Alena/Figma_1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Alena Trushcheva
2025-09-16 01:40:08 +03:00
commit d9969e1394
252 changed files with 41184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
mixitup-3.3.1/tests/functional/index.html Normal file
View File

@@ -0,0 +1,101 @@
<html>
<head>
<link rel="stylesheet" href="styles.css"/>
<title>MixItUp Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<menu>
<h2>Native Controls</h2>
<h3>Filters</h3>
<button type="button" class="control mixitup-control" data-filter="all">All</button>
<button type="button" class="control mixitup-control" data-filter="none">None</button>
<button type="button" class="control mixitup-control" data-filter=".cat-1">Category A</button>
<button type="button" class="control mixitup-control" data-filter=".cat-2">Category B</button>
<button type="button" class="control mixitup-control" data-filter=".cat-3">Category C</button>
<button type="button" class="control mixitup-control" data-filter=".cat-x">Category X</button>
<h3>Filter Toggles</h3>
<button type="button" class="control mixitup-control" data-toggle=".cat-1">Category A</button>
<button type="button" class="control mixitup-control" data-toggle=".cat-2">Category B</button>
<button type="button" class="control mixitup-control" data-toggle=".cat-3">Category C</button>
<h3>Sorts</h3>
<button type="button" class="control mixitup-control" data-sort="default:asc">Ascending</button>
<button type="button" class="control mixitup-control" data-sort="default:desc">Descending</button> |
<button type="button" class="control mixitup-control" data-sort="order:asc">Custom Ascending</button>
<button type="button" class="control mixitup-control" data-sort="order:desc">Custom Descending</button> |
<button type="button" class="control mixitup-control" data-sort="date:asc order:asc">Multi Custom Ascending Ascending</button>
<button type="button" class="control mixitup-control" data-sort="date:asc order:desc">Multi Custom Ascending Descending</button> |
<button type="button" class="control mixitup-control" data-sort="random">Random</button>
<h3>MultiMix</h3>
<button type="button" class="control mixitup-control" data-filter=".cat-1" data-sort="default:asc">Category A / Ascending</button>
<button type="button" class="control mixitup-control" data-filter=".cat-3" data-sort="order:desc">Category C / Custom Descending</button>
<h2>API Methods</h2>
<div class="control js-append">Append</div>
<div class="control js-prepend">Prepend</div>
<div class="control js-insert-at-index">Insert at index (5)</div>
<div class="control js-remove-via-element">Remove by element reference (0)</div>
<div class="control js-remove-via-index">Remove by index (3)</div>
<div class="control js-insert-multiple-via-markup">Insert Multiple via markup</div>
<div class="control js-insert-multiple-via-elements">Insert Multiple via elements</div><br><br>
<div class="control js-api-filter">Filter Category B</div>
<div class="control js-api-filter-compound">Filter Category B + C</div>
<div class="control js-api-sort">Sort Custom Ascending</div>
<br><br>
<div class="control js-api-limit-3">3 per page</div>
<div class="control js-api-limit-inf">Infinite per page</div>
<div class="control js-api-limit-10">10 per page</div>
</menu>
<section class="sandbox" id="sandbox-1">
<div class="mix cat-1" data-order="5" data-date="1">A 5</div>
<div class="mix cat-1" data-order="1" data-date="2">A 1</div>
<div class="mix cat-2" data-order="4" data-date="3">B 4</div>
<div class="mix cat-3" data-order="3" data-date="3">C 3</div>
<div class="mix cat-3" data-order="2" data-date="4">C 2</div>
<div class="mix cat-3" data-order="6" data-date="6">C 6</div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</section>
<span class="mixitup-page-list"></span>
<span class="mixitup-page-stats"></span>
<section class="sandbox" id="sandbox-2">
<div class="mix" id="12"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</section>
<script src="../../dist/mixitup.js"></script>
<script src="../../../mixitup-pagination/dist/mixitup-pagination.js"></script>
<script src="../../../mixitup-dragndrop/mixitup-dragndrop.js"></script>
<script src="main.js"></script>
</body>
</html>

191
mixitup-3.3.1/tests/functional/main.js Normal file
View File

@@ -0,0 +1,191 @@
/* global mixitup */
var sandbox = document.querySelector('.sandbox');
var mixer = mixitup('#sandbox-1', {
animation: {
effects: 'fade',
easing: 'cubic-bezier(1, 0, 0, 1)',
duration: 400
},
controls: {
scope: 'global',
live: false
// toggleLogic: 'and'
},
pagination: {
limit: 4,
maxPagers: 6
},
load: {
// filter: 'none',
sort: 'random'
},
// dragndrop: {
// enable: true,
// hidePlaceholder: false,
// debounceDelay: 20,
// detection: 'collision',
// // liveSort: false
// // swap: true
// },
callbacks: {
// onMixLift: function() {
// console.log('lift', this);
// }
}
}, null);
console.log(mixer.getState());
sandbox.addEventListener('mixStart', function(e) {
console.log('mixStart', e.detail);
});
sandbox.addEventListener('mixEnd', function(e) {
console.log('mixEnd', e.detail);
});
sandbox.addEventListener('mixClick', function(e) {
console.log('mixClick', e.detail);
});
sandbox.addEventListener('mixBusy', function(e) {
console.log('mixBusy', e.detail);
});
sandbox.addEventListener('mixFail', function(e) {
console.log('mixFail', e.detail);
});
sandbox.classList.add('sandbox__mixitup');
document.querySelector('.js-append').addEventListener('click', function() {
mixer.append('<div class="mix cat-3" data-order="3">C 3</div>');
});
document.querySelector('.js-prepend').addEventListener('click', function() {
mixer.prepend('<div class="mix cat-1" data-order="2">A 2</div>');
});
document.querySelector('.js-insert-at-index').addEventListener('click', function() {
mixer.insert(4, '<div class="mix cat-4" data-order="5">D 5</div>');
});
document.querySelector('.js-remove-via-element').addEventListener('click', function() {
var state = mixer.getState();
if (state.targets[0]) {
mixer.remove(state.targets[0]);
}
});
document.querySelector('.js-remove-via-index').addEventListener('click', function() {
mixer.remove(3);
});
document.querySelector('.js-insert-multiple-via-markup').addEventListener('click', function() {
mixer.prepend(
'<div class="mix cat-4" data-order="1">D 1</div>' +
'<div class="mix cat-4" data-order="2">D 2</div>' +
'<div class="mix cat-4" data-order="3">D 3</div>'
);
});
document.querySelector('.js-insert-multiple-via-elements').addEventListener('click', function() {
var h = mixitup.h,
el1 = h.createElement('<div class="mix cat-4" data-order="1">D 1</div>').children[0],
el2 = h.createElement('<div class="mix cat-4" data-order="2">D 2</div>').children[0],
el3 = h.createElement('<div class="mix cat-4" data-order="3">D 3</div>').children[0],
elements = [el1, el2, el3];
// Going into the mixer backwards?
mixer.multiMix({
insert: elements
});
});
document.querySelector('.js-api-filter').addEventListener('click', function() {
mixer.filter('.cat-2');
});
document.querySelector('.js-api-filter-compound').addEventListener('click', function() {
mixer.filter('.cat-2, .cat-3');
});
document.querySelector('.js-api-sort').addEventListener('click', function() {
mixer.sort('order:asc');
});
document.querySelector('.js-api-limit-3').addEventListener('click', function() {
mixer.paginate({limit: 3});
});
document.querySelector('.js-api-limit-inf').addEventListener('click', function() {
mixer.paginate({limit: Infinity});
});
document.querySelector('.js-api-limit-10').addEventListener('click', function() {
mixer.paginate({limit: 10});
});
var dataset = [{
id: '12',
category: '1'
}];
var dataMixer = mixitup('#sandbox-2', {
load: {
dataset: dataset
},
data: {
uidKey: 'id',
dirtyCheck: true
},
render: {
target: function(data) {
return `<div class="mix cat-${data.category}" id="${data.id}"></div>`;
}
}
});
dataset.push({
id: '14',
category: '2'
}, {
id: '2',
category: '3'
});
var first;
dataMixer.dataset(dataset)
.then(function() {
dataset.reverse();
return dataMixer.dataset(dataset);
})
.then(function() {
first = dataset.shift();
return dataMixer.dataset(dataset);
})
.then(function() {
dataset.push(first);
return dataMixer.dataset(dataset);
})
.then(function() {
dataset = [dataset[2], dataset[0]];
return dataMixer.dataset(dataset);
})
.then(function() {
dataset[1] = {
id: '14',
category: '4'
};
return dataMixer.dataset(dataset);
});

136
mixitup-3.3.1/tests/functional/styles.css Normal file
View File

@@ -0,0 +1,136 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background: #eee;
}
.mixitup-control,
.mixitup-pager {
cursor: pointer;
display: inline-block;
padding: .5rem;
background: #eee;
}
.mixitup-control-active,
.mixitup-pager-active {
font-weight: bold;
}
.mixitup-pager-disabled {
opacity: .8;
}
.mix {
vertical-align: top;
background: skyblue;
border-radius: 5px;
margin: 2rem;
color: transparent;
transition: opacity 300ms;
-webkit-user-select: none;
}
.mix,
.gap {
display: inline-block;
width: 6%;
margin: 0 2rem;
}
.mix {
margin: 2rem;
}
.mix:before {
content: '';
display: inline-block;
padding-top: 100%;
}
.mixitup-target-placeholder {
background: transparent !important;
border: 2px dashed #ccc;
box-sizing: border-box;
}
.mixitup-target-dragging {
opacity: .5;
}
.mixitup-target-closest {
border: 3px solid orange;
}
.sandbox {
overflow: hidden;
text-align: justify;
background: #333;
min-height: 2rem;
}
.sandbox:after {
content: '';
width: 100%;
display: inline-block;
}
.sandbox__mixitup .mix {
}
.mix.cat-2 {
background: violet;
}
.mix.cat-3 {
background: yellow;
}
.mix.cat-4 {
background: aquamarine;
}