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

256
mixitup-3.3.1/demos/dataset-pre-rendered-targets/index.html Normal file
View File

@@ -0,0 +1,256 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../reset.css" rel="stylesheet"/>
<link href="./style.css" rel="stylesheet"/>
<title>MixItUp Demo - Dataset with Pre-rendered Targets</title>
</head>
<body>
<div class="controls" data-ref="controls">
<button type="button" class="control control-filter" data-ref="filter" data-color="all">All</button>
<button type="button" class="control control-filter" data-ref="filter" data-color="green">Green</button>
<button type="button" class="control control-filter" data-ref="filter" data-color="blue">Blue</button>
<button type="button" class="control control-filter" data-ref="filter" data-color="pink">Pink</button>
<button type="button" class="control control-filter" data-ref="filter" data-color="none">None</button>
<button type="button" class="control control-sort" data-ref="sort" data-key="publishedDate" data-order="asc">Asc</button>
<button type="button" class="control control-sort" data-ref="sort" data-key="publishedDate" data-order="desc">Desc</button>
</div>
<div class="container" data-ref="container">
<div class="item green" data-ref="item">
<time class="published-date">2015-10-03</time>
</div>
<div class="item green" data-ref="item">
<time class="published-date">2015-12-22</time>
</div>
<div class="item blue" data-ref="item">
<time class="published-date">2016-02-15</time>
</div>
<div class="item pink" data-ref="item">
<time class="published-date">2016-04-25</time>
</div>
<div class="item green" data-ref="item">
<time class="published-date">2016-05-02</time>
</div>
<div class="item blue" data-ref="item">
<time class="published-date">2016-10-07</time>
</div>
<div class="item pink" data-ref="item">
<time class="published-date">2016-11-13</time>
</div>
<div class="item blue" data-ref="item">
<time class="published-date">2016-12-01</time>
</div>
<div class="gap" data-ref="first-gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</div>
<script src="../mock-api.js"></script>
<script src="../mixitup.min.js"></script>
<script>
// Typically, our data would live in a DB and be retrieved via a JSON API, but in
// this demo we will create a mock dataset using an array literal.
// You will notice that this data exactly matches our pre-rendered targets.
var items = [
{
id: 1,
color: 'green',
publishedDate: '2015-10-03'
},
{
id: 2,
color: 'green',
publishedDate: '2015-12-22'
},
{
id: 3,
color: 'blue',
publishedDate: '2016-02-15'
},
{
id: 4,
color: 'pink',
publishedDate: '2016-04-25'
},
{
id: 5,
color: 'green',
publishedDate: '2016-05-02'
},
{
id: 6,
color: 'blue',
publishedDate: '2016-10-07'
},
{
id: 7,
color: 'pink',
publishedDate: '2016-11-13'
},
{
id: 8,
color: 'blue',
publishedDate: '2016-12-01'
}
];
// The `Api` class is not part of MixItUp and has been created to mock
// the asyncronous fetching of data for this demo. To use it, we must
// create an api instance, passing in our mock data to represent the
// contents of a DB.
var api = new Api(items);
// As we'll be building and binding our own UI, we'll start with caching
// references to any DOM elements we'll need to work with
var controls = document.querySelector('[data-ref="controls"]');
var filters = document.querySelectorAll('[data-ref="filter"]');
var sorts = document.querySelectorAll('[data-ref="sort"]');
var container = document.querySelector('[data-ref="container"]');
// "Gap" elements are used to maintain even columns in a justified grid. See our
// "MixItUp Grid Layouts" tutorial for more information.
var firstGap = document.querySelector('[data-ref="first-gap"]');
// We'll need to keep track of our active current filter so
// that we can sort within the current filter.
var activeColor = '';
// Instantiate and configure the mixer
var mixer = mixitup(container, {
selectors: {
target: '[data-ref="item"]' // Query targets with an attribute selector to keep our JS and styling classes seperate
},
layout: {
siblingAfter: firstGap // Ensure the first "gap" element is known to mixitup incase of insertion into an empty container
},
load: {
dataset: items // As we have pre-rendered targets, we must "prime" MixItUp with their underlying data
},
data: {
uidKey: 'id' // Our data model must have a unique id. In this case, its key is 'id'
},
render: { // We must provide a target render function incase we need to render new items not in the initial dataset (not used in this demo)
target: function(item) {
return '<div class="item ' + item.color + '" data-ref="item"><time class="published-date">' + item.publishedDate + '</time></div>';
}
}
});
/**
* A helper function to set an active styling class on an active button,
* and remove it from its siblings at the same time.
*
* @param {HTMLElement} activeButton
* @param {HTMLELement[]} siblings
* @return {void}
*/
function activateButton(activeButton, siblings) {
var button;
var i;
for (i = 0; i < siblings.length; i++) {
button = siblings[i];
button.classList[button === activeButton ? 'add' : 'remove']('control-active');
}
}
/**
* A click handler to detect the type of button clicked, read off the
* relevent attributes, call the API, and trigger a dataset operation.
*
* @param {HTMLElement} button
* @return {void}
*/
function handleButtonClick(button) {
// Define default values for color, sortBy and order
// incase they are not present in the clicked button
var color = activeColor;
var sortBy = 'id';
var order = 'asc';
// If button is already active, or an operation is in progress, ignore the click
if (button.classList.contains('control-active') || mixer.isMixing()) return;
// Else, check what type of button it is, if any
if (button.matches('[data-ref="filter"]')) {
// Filter button
activateButton(button, filters);
color = activeColor = button.getAttribute('data-color');
} else if (button.matches('[data-ref="sort"]')) {
// Sort button
activateButton(button, sorts);
sortBy = button.getAttribute('data-key');
order = button.getAttribute('data-order');
} else {
// Not a button
return;
}
// Now that we have our color filter and sorting order, we can fetch some data from the API.
api.get({
color: color,
$sort_by: sortBy,
$order: order
})
.then(function(items) {
// Our api returns an array of items which we can send
// straight to our mixer using the .dataset() method
return mixer.dataset(items);
})
.then(function(state) {
console.log('fetched ' + state.activeDataset.length + ' items');
})
.catch(console.error.bind(console));
}
// We can now set up a handler to listen for "click" events on our UI buttons
controls.addEventListener('click', function(e) {
handleButtonClick(e.target);
});
// Set controls the active controls on startup to match the default filter and sort
activateButton(controls.querySelector('[data-color="all"]'), filters);
activateButton(controls.querySelector('[data-order="asc"]'), sorts);
// NB: Always remember to destroy the instance with mixer.destroy() when your
// component unmounts to ensure that event handlers are unbound and the
// instance can be garbage collected.
</script>
</body>
</html>

201
mixitup-3.3.1/demos/dataset-pre-rendered-targets/style.css Normal file
View File

@@ -0,0 +1,201 @@
html,
body {
height: 100%;
background: #f2f2f2;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
/* Controls
---------------------------------------------------------------------- */
.controls {
padding: 1rem;
background: #333;
font-size: 0.1px;
}
.control {
position: relative;
display: inline-block;
width: 2.7rem;
height: 2.7rem;
background: #444;
cursor: pointer;
font-size: 0.1px;
color: white;
transition: background 150ms;
}
.control:not(.control-active):hover {
background: #3f3f3f;
}
.control-filter:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
top: calc(50% - 6px);
left: calc(50% - 6px);
border: 2px solid currentColor;
border-radius: 2px;
background: currentColor;
transition: background-color 150ms, border-color 150ms;
}
.control-sort:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-top: 2px solid;
border-left: 2px solid;
top: calc(50% - 6px);
left: calc(50% - 6px);
transform: translateY(1px) rotate(45deg);
}
.control-sort[data-order="desc"]:after {
transform: translateY(-4px) rotate(-135deg);
}
.control-active {
background: #393939;
}
.control-filter.control-active:after {
background: transparent;
}
.control:first-of-type {
border-radius: 3px 0 0 3px;
}
.control:last-of-type {
border-radius: 0 3px 3px 0;
}
.control-filter + .control-sort {
margin-left: .75rem;
}
.control-filter[data-color="green"] {
color: #91e6c7;
}
.control-filter[data-color="blue"] {
color: #5ecdde;
}
.control-filter[data-color="pink"] {
color: #d595aa;
}
.control-filter[data-color="none"] {
color: #2f2f2f;
}
/* Container
---------------------------------------------------------------------- */
.container {
padding: 1rem;
text-align: justify;
font-size: 0.1px;
}
.container:after {
content: '';
display: inline-block;
width: 100%;
}
/* Target Elements
---------------------------------------------------------------------- */
.item,
.gap {
display: inline-block;
vertical-align: top;
}
.item {
background: #fff;
border-top: .5rem solid currentColor;
border-radius: 2px;
margin-bottom: 1rem;
position: relative;
}
.item:before {
content: '';
display: inline-block;
padding-top: 56.25%;
}
.item.green {
color: #91e6c7;
}
.item.pink {
color: #d595aa;
}
.item.blue {
color: #5ecdde;
}
.item .published-date {
position: absolute;
top: 0;
left: 0;
padding: 1rem;
font-size: 1rem;
color: #333;
font-family: 'helvetica-neue', arial, sans-serif;
font-weight: 700;
}
/* Grid Breakpoints
---------------------------------------------------------------------- */
/* 2 Columns */
.item,
.gap {
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
}
/* 3 Columns */
@media screen and (min-width: 541px) {
.item,
.gap {
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
}
}
/* 4 Columns */
@media screen and (min-width: 961px) {
.item,
.gap {
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
}
}
/* 5 Columns */
@media screen and (min-width: 1281px) {
.item,
.gap {
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
}
}