first commit
This commit is contained in:
7
mixitup-3.3.1/.gitignore
vendored
Normal file
7
mixitup-3.3.1/.gitignore
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
node_modules
|
||||
components
|
||||
.tmp
|
||||
.DS_Store
|
||||
.log
|
||||
npm-debug.*
|
||||
coverage/
|
||||
95
mixitup-3.3.1/.jscsrc
Normal file
95
mixitup-3.3.1/.jscsrc
Normal file
@@ -0,0 +1,95 @@
|
||||
{
|
||||
"requireCurlyBraces": [
|
||||
"else",
|
||||
"for",
|
||||
"while",
|
||||
"do",
|
||||
"try",
|
||||
"catch"
|
||||
],
|
||||
"requireSpaceAfterKeywords": [
|
||||
"if",
|
||||
"else",
|
||||
"for",
|
||||
"while",
|
||||
"do",
|
||||
"case",
|
||||
"return",
|
||||
"try",
|
||||
"typeof"
|
||||
],
|
||||
"safeContextKeyword": ["self"],
|
||||
"maximumLineLength": {
|
||||
"value": 140,
|
||||
"allowComments": true,
|
||||
"allowRegex": true
|
||||
},
|
||||
"requireSpaceBeforeBlockStatements": true,
|
||||
"requireParenthesesAroundIIFE": true,
|
||||
"requireSpaceAfterLineComment": {
|
||||
"allExcept": ["#", "="]
|
||||
},
|
||||
"requireSpacesInConditionalExpression": true,
|
||||
"disallowSpacesInNamedFunctionExpression": {
|
||||
"beforeOpeningRoundBrace": true
|
||||
},
|
||||
"disallowSpacesInFunctionDeclaration": {
|
||||
"beforeOpeningRoundBrace": true
|
||||
},
|
||||
"disallowFunctionDeclarations": false,
|
||||
"requireSpaceBetweenArguments": true,
|
||||
"requireMultipleVarDecl": false,
|
||||
"requireBlocksOnNewline": true,
|
||||
"requireSemicolons": true,
|
||||
"disallowEmptyBlocks": true,
|
||||
"disallowSpacesInsideArrayBrackets": true,
|
||||
"disallowSpacesInsideParentheses": true,
|
||||
"requireCommaBeforeLineBreak": true,
|
||||
"requireLineBreakAfterVariableAssignment": true,
|
||||
"requirePaddingNewlinesBeforeKeywords": [
|
||||
"do",
|
||||
"for",
|
||||
"if",
|
||||
"switch",
|
||||
"try",
|
||||
"void",
|
||||
"while",
|
||||
"return"
|
||||
],
|
||||
"requirePaddingNewLinesInObjects": true,
|
||||
"disallowSpaceAfterPrefixUnaryOperators": true,
|
||||
"disallowSpaceBeforePostfixUnaryOperators": true,
|
||||
"disallowSpaceBeforeBinaryOperators": [
|
||||
","
|
||||
],
|
||||
"requireSpacesInForStatement": true,
|
||||
"requireSpaceBeforeBinaryOperators": true,
|
||||
"requireSpaceAfterBinaryOperators": true,
|
||||
"disallowKeywords": [
|
||||
"with"
|
||||
],
|
||||
"validateIndentation": 4,
|
||||
"disallowMixedSpacesAndTabs": true,
|
||||
"disallowTrailingWhitespace": true,
|
||||
"disallowTrailingComma": true,
|
||||
"disallowKeywordsOnNewLine": [
|
||||
"else"
|
||||
],
|
||||
"requireCapitalizedConstructors": true,
|
||||
"disallowNewlineBeforeBlockStatements": true,
|
||||
"disallowMultipleLineStrings": true,
|
||||
"disallowMultipleLineBreaks": true,
|
||||
"requireSpaceBeforeObjectValues": true,
|
||||
"validateQuoteMarks": "'",
|
||||
"jsDoc": {
|
||||
"checkAnnotations": true,
|
||||
"requireParamTypes": true,
|
||||
"checkParamNames": true,
|
||||
"checkParamExistence": true,
|
||||
// "checkRedundantParams": true,
|
||||
"checkReturnTypes": true,
|
||||
"requireNewlineAfterDescription": true,
|
||||
// "requireParamDescription": true,
|
||||
"requireDescriptionCompleteSentence": true
|
||||
}
|
||||
}
|
||||
24
mixitup-3.3.1/.jshintrc
Normal file
24
mixitup-3.3.1/.jshintrc
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"esnext": true,
|
||||
"-W030": true,
|
||||
"-W053": true,
|
||||
"-W084": true,
|
||||
"-W055": true,
|
||||
"-W069": true,
|
||||
"-W097": true,
|
||||
"-W087": true,
|
||||
"undef": true,
|
||||
"unused": true,
|
||||
"laxbreak": true,
|
||||
"node": true,
|
||||
"browser": true,
|
||||
"predef": [
|
||||
"window",
|
||||
"Promise",
|
||||
"define",
|
||||
"console",
|
||||
"describe",
|
||||
"after",
|
||||
"it"
|
||||
]
|
||||
}
|
||||
5
mixitup-3.3.1/.travis.yml
Normal file
5
mixitup-3.3.1/.travis.yml
Normal file
@@ -0,0 +1,5 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "node"
|
||||
after_success:
|
||||
- npm run coveralls
|
||||
94
mixitup-3.3.1/CHANGELOG.md
Normal file
94
mixitup-3.3.1/CHANGELOG.md
Normal file
@@ -0,0 +1,94 @@
|
||||
Change Log
|
||||
==========
|
||||
|
||||
## 3.3.1
|
||||
- Insures dataset uses polyfilled `Array.from` for old IE support.
|
||||
- Fixes support for sorting via element collection. This was not correctly implemented before although documented.
|
||||
- Fixes the "filter-by-url" demo to ensure that only leading `'.'` characters are stripped off rather than any character.
|
||||
|
||||
## 3.3.0
|
||||
- Introduces new internal filter hook `testResultEvaluateHideShown` allowing plugins to manipulate the result of every filter test upon a target. Provides an convenient entry point for non-selector based filtering such as range slider inputs.
|
||||
- Adds range slider demo.
|
||||
|
||||
## 3.2.2
|
||||
- Fixes issue where multiple toggle controls are not automatically activated when a compound selector is specified to `load.filter`.
|
||||
- Fixes issue where calling `.toggleOff()` and passing a non-existent selector will deactivate all other active toggles.
|
||||
- Fixes issue where padding whitespace around a DOM string when calling `.insert()` caused an exception.
|
||||
- Adds additional demos for non-standard UI.
|
||||
|
||||
## 3.2.1
|
||||
- Additional edge-case work relating to Dataset API fix in v3.2.0.
|
||||
- Addition of `.forceRender()` mixer API method.
|
||||
- Removes `.multiMix()` legacy API alias method.
|
||||
|
||||
## 3.2.0
|
||||
- Removes support for legacy `$().mixItUp()` jQuery API
|
||||
- Fixes issue with Dataset API causing DOM exception when dealing with certain combinations of simultaneous insertion and sorting.
|
||||
|
||||
## 3.1.12
|
||||
- Fixes issue where `state.targets` does not reflect the updated sort order after a sort operation.
|
||||
- Addition of `behavior.liveSort` configuration option.
|
||||
|
||||
## 3.1.11
|
||||
|
||||
- Various geometry improvements related to scroll bar issues on desktop Windows and (non-inertial scroll) desktop Mac systems.
|
||||
- Addition of `animation.clampWidth` configuration option.
|
||||
|
||||
## 3.1.10
|
||||
|
||||
- Fixes an issue where the `activeContainerClass` did not persist between non-layout-change operations (e.g. sort, filter).
|
||||
|
||||
## 3.1.9
|
||||
|
||||
- Fixes an issue relating to `animation.clampHeight` where the height was not correctly applied causing scroll jumping in certain situations.
|
||||
|
||||
## 3.1.8
|
||||
|
||||
- Adds ability to bind live controls where multiple parents exist. Required for Pagination 3.2.0.
|
||||
|
||||
## 3.1.7
|
||||
|
||||
- Fixed duplicate hook `beforeCacheDom` in `Target#cacheDom`. Now renamed to `afterCacheDom`.
|
||||
|
||||
## 3.1.6
|
||||
|
||||
- Added composer.json
|
||||
|
||||
## 3.1.5
|
||||
|
||||
- Fixed several issues relating to the Dataset API and multimix-like operations (i.e. simultaneous insertion/removal/sorting/dirty-checking)
|
||||
|
||||
## 3.1.4
|
||||
|
||||
- Added ability to extend static factory methods (such as `mixitup.use`) with hooks.
|
||||
- Added ability to return a single DOM element from `render.target` instead of an HTML string
|
||||
- Moved target rendering functionality into `Target` class, so that targets can render themselves
|
||||
- Force disable controls if dataset API is in use (if `data.uidKey` is set)
|
||||
|
||||
## 3.1.3
|
||||
|
||||
- Exposed `.toggleOn()` and `.toggleOff()` API methods publicly via the mixer facade, as were accidently missed out previously.
|
||||
|
||||
## 3.1.2
|
||||
|
||||
- Improved `compareVersions` util function to handle semver notation correctly (e.g. `'^'`, `'~'`, `'-beta'`, etc).
|
||||
- Fixed issue with "Filtering by URL" demo that added a `#mix` segment to the URL for filter "all"
|
||||
|
||||
## 3.1.1
|
||||
|
||||
- Fixed issue where `transitionend` event handlers were not rebound to re-rendered targets during dirtyCheck updates.
|
||||
- Fixed issue where dataset operation objects where created on push to queue, resulting in corrupted target data.
|
||||
|
||||
## 3.1.0
|
||||
|
||||
- Added `selectors.controls` configuration option to allow for further specificity of control querying
|
||||
in addition to the mandatory data attributes.
|
||||
- Fixed package.json issues.
|
||||
|
||||
## 3.0.1
|
||||
|
||||
- Fixed issue where `layout.containerClassName` is not reflected in state object after instantiation.
|
||||
|
||||
## 3.0.0
|
||||
|
||||
- Release
|
||||
208
mixitup-3.3.1/README.md
Normal file
208
mixitup-3.3.1/README.md
Normal file
@@ -0,0 +1,208 @@
|
||||
# MixItUp 3
|
||||
|
||||
[](https://travis-ci.org/patrickkunka/mixitup)
|
||||
[](https://coveralls.io/github/patrickkunka/mixitup?branch=v3)
|
||||
[](https://www.jsdelivr.com/package/gh/patrickkunka/mixitup)
|
||||
|
||||
MixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove DOM elements with beautiful animations.
|
||||
|
||||
MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts and compatible with inline-flow, percentages, media queries, flexbox and more.
|
||||
|
||||
For a live sandbox, full documentation, tutorials and more, please visit [kunkalabs.com/mixitup](https://www.kunkalabs.com/mixitup/).
|
||||
|
||||
Migrating from MixItUp 2? Check out the [MixItUp 3 Migration Guide](./docs/mixitup-3-migration-guide.md).
|
||||
|
||||
#### Licensing
|
||||
|
||||
MixItUp is open source and free to use for non-commercial, educational and non-profit use. For use in commercial projects, **a commercial license is required**. For licensing information and FAQs please see the [MixItUp Licenses](https://www.kunkalabs.com/mixitup/licenses/) page.
|
||||
|
||||
#### Documentation
|
||||
|
||||
- [Factory Function](./docs/mixitup.md)
|
||||
- [Configuration Object](./docs/mixitup.Config.md)
|
||||
- [Mixer API Methods](./docs/mixitup.Mixer.md)
|
||||
- [State Object](./docs/mixitup.State.md)
|
||||
- [Mixer Events](./docs/mixitup.Events.md)
|
||||
|
||||
#### Browser Support
|
||||
|
||||
MixItUp 3 has been tested for compatibility with the following browsers.
|
||||
|
||||
- Chrome 16+
|
||||
- Firefox 16+
|
||||
- Safari 6.2+
|
||||
- Yandex 14+
|
||||
- Edge 13+
|
||||
- IE 10+ (with animations), IE 8-9 (no animations)
|
||||
|
||||
## Getting Started
|
||||
|
||||
#### Contents
|
||||
|
||||
- [Building the Container](#building-the-container)
|
||||
- [Building Controls](#building-controls)
|
||||
- [Styling the Container](#styling-the-container)
|
||||
- [Loading MixItUp](#loading-mixitup)
|
||||
- [Creating a Mixer](#creating-a-mixer)
|
||||
- [Configuration](#configuration)
|
||||
|
||||
Most commonly, MixItUp is applied to a **"container"** of **"target"** elements, which could be a portfolio of projects, a list of blog posts, a selection of products, or any kind of UI where filtering and/or sorting would be advantageous.
|
||||
|
||||
To get started, follow these simple steps:
|
||||
|
||||
### Building the Container
|
||||
|
||||
By default, MixItUp will query the container for targets matching the selector `'.mix'`.
|
||||
|
||||
```html
|
||||
<div class="container">
|
||||
<div class="mix category-a" data-order="1"></div>
|
||||
<div class="mix category-b" data-order="2"></div>
|
||||
<div class="mix category-b category-c" data-order="3"></div>
|
||||
<div class="mix category-a category-d" data-order="4"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Targets can be filtered using any valid selector e.g. `'.category-a'`, and are sorted via optional custom data attributes e.g. `'data-order'`.
|
||||
|
||||
Further reading: [Marking-up MixItUp Containers](https://www.kunkalabs.com/tutorials/marking-up-mixitup-containers/)
|
||||
|
||||
### Building Controls
|
||||
|
||||
One way that filtering and sorting happens is when controls are clicked. You may use any clickable element as a control, but `<button type="button">` is recommended for accessibility.
|
||||
|
||||
#### Filter Controls
|
||||
|
||||
Filter controls are queried based on the presence of a `data-filter` attribute, whose value must be `'all'`, `'none'`, or a valid selector string e.g. `'.category-a'`.
|
||||
|
||||
```html
|
||||
<button type="button" data-filter="all">All</button>
|
||||
<button type="button" data-filter=".category-a">Category A</button>
|
||||
<button type="button" data-filter=".category-b">Category B</button>
|
||||
<button type="button" data-filter=".category-c">Category C</button>
|
||||
```
|
||||
|
||||
Further reading: [Filtering with MixItUp](https://www.kunkalabs.com/tutorials/filtering-with-mixitup/)
|
||||
|
||||
#### Sort Controls
|
||||
|
||||
Sort controls are queried based on the presence of a `data-sort` attribute, whose value takes the form of a "sort string" made up of the name of the attribute to sort by, followed by an optional colon-separated sorting order e.g. `'order'`, `'order:asc'`, `'order:desc'`.
|
||||
|
||||
```html
|
||||
<button type="button" data-sort="order:asc">Ascending</button>
|
||||
<button type="button" data-sort="order:descending">Descending</button>
|
||||
<button type="button" data-sort="random">Random</button>
|
||||
```
|
||||
|
||||
The values `'default'` and `'random'` are also valid, with `'default'` referring to the original order of target elements in the DOM at the time of mixer instantiation.
|
||||
|
||||
Further reading: [Sorting with MixItUp](https://www.kunkalabs.com/tutorials/sorting-with-mixitup/)
|
||||
|
||||
### Styling the Container
|
||||
|
||||
While MixItUp can be added on top of any existing CSS layout, we strongly recommend inline-block or flexbox-based styling over floats and legacy grid frameworks when dealing with grid-based designs for a number of reasons.
|
||||
|
||||
Further reading: [MixItUp Grid Layouts](https://www.kunkalabs.com/tutorials/mixitup-grid-layouts/)
|
||||
|
||||
### Loading MixItUp
|
||||
|
||||
Firstly, load the MixItUp JavaScript library using the preferred method for your project.
|
||||
|
||||
#### Script Tag
|
||||
|
||||
The most simple way to load MixItUp in your project is to include it via a `<script>` tag before the closing `</body>` tag on your page.
|
||||
|
||||
```html
|
||||
...
|
||||
|
||||
<script src="/path/to/mixitup.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
With this technique, the MixItUp factory function will be made available via the global variable `mixitup`.
|
||||
|
||||
#### Module Import
|
||||
|
||||
If you are building a modular JavaScript project with Webpack, Browserify, or RequireJS, MixItUp can be installed using your package manager of choice (e.g. npm, jspm, yarn) and then imported into any of your project's modules.
|
||||
|
||||
`npm install mixitup --save`
|
||||
|
||||
```js
|
||||
// ES2015
|
||||
|
||||
import mixitup from 'mixitup';
|
||||
```
|
||||
|
||||
```js
|
||||
// CommonJS
|
||||
|
||||
var mixitup = require('mixitup');
|
||||
```
|
||||
|
||||
```js
|
||||
// AMD
|
||||
|
||||
require(['mixitup'], function(mixitup) {
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
### Creating a Mixer
|
||||
|
||||
With the `mixitup()` factory function available, you may now instantiate a "mixer" on your container to enable MixItUp functionality.
|
||||
|
||||
Call the factory function passing a selector string or a reference to your container element as the first parameter, and a the newly instantiated mixer will be returned.
|
||||
|
||||
###### Example: Instantiating a mixer with a selector string
|
||||
|
||||
```js
|
||||
var mixer = mixitup('.container');
|
||||
```
|
||||
|
||||
###### Example: Instantiating a mixer with an element reference
|
||||
|
||||
```js
|
||||
var mixer = mixitup(containerEl);
|
||||
```
|
||||
|
||||
Your mixer is now ready for you to interact with, either via its controls (see above), or its API (see [Mixer API Methods](./docs/mixitup.Mixer.md)). Click a control or call an API method to check that everything is working correctly.
|
||||
|
||||
### Configuration
|
||||
|
||||
If you wish to customize the functionality of your mixer, an optional "configuration object" can be passed as the second parameter to the `mixitup` function. If no configuration object is passed, the default settings will be used.
|
||||
|
||||
Further reading: [Configuration Object](/docs/mixitup.Config.md)
|
||||
|
||||
###### Example: Passing a configuration object
|
||||
|
||||
```js
|
||||
var mixer = mixitup(containerEl, {
|
||||
selectors: {
|
||||
target: '.blog-item'
|
||||
},
|
||||
animation: {
|
||||
duration: 300
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### Using the API
|
||||
|
||||
If you wish to interact with your mixer via its API, the mixer reference returned by the factory function can be used to call API methods.
|
||||
|
||||
###### Example: Calling an API method
|
||||
|
||||
```js
|
||||
var mixer = mixitup(containerEl);
|
||||
|
||||
mixer.filter('.category-a');
|
||||
```
|
||||
|
||||
Further reading: [Mixer API Methods](./docs/mixitup.Mixer.md)
|
||||
|
||||
#### Building a modern JavaScript application?
|
||||
|
||||
You may wish to use MixItUp 3's new "dataset" API. Dataset is designed for use in API-driven JavaScript applications, and can be used instead of DOM-based methods such as `.filter()`, `.sort()`, `.insert()`, etc. When used, insertion, removal, sorting and pagination can be achieved purely via changes to your data model, without the uglyness of having to interact with or query the DOM directly.
|
||||
|
||||
Further reading: [Using the Dataset API](https://www.kunkalabs.com/tutorials/using-the-dataset-api/)
|
||||
19
mixitup-3.3.1/composer.json
Normal file
19
mixitup-3.3.1/composer.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "patrickkunka/mixitup",
|
||||
"type": "library",
|
||||
"homepage": "https://www.kunkalabs.com/mixitup/",
|
||||
"license": [
|
||||
"proprietary"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "KunkaLabs Limited",
|
||||
"homepage": "https://www.kunkalabs.com/"
|
||||
}
|
||||
],
|
||||
"support": {
|
||||
"docs": "https://www.kunkalabs.com/mixitup/docs/get-started/"
|
||||
},
|
||||
"description": "A high-performance, dependency-free library for animated filtering, sorting and more",
|
||||
"keywords": ["javascript", "animate", "filtering", "sorting"]
|
||||
}
|
||||
50
mixitup-3.3.1/demos/attribute-selectors/index.html
Normal file
50
mixitup-3.3.1/demos/attribute-selectors/index.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!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 - Querying via Attribute Selectors</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="mixitup-container">
|
||||
<div class="item green" data-ref="mixitup-target"></div>
|
||||
<div class="item green" data-ref="mixitup-target"></div>
|
||||
<div class="item blue" data-ref="mixitup-target"></div>
|
||||
<div class="item pink" data-ref="mixitup-target"></div>
|
||||
<div class="item green" data-ref="mixitup-target"></div>
|
||||
<div class="item blue" data-ref="mixitup-target"></div>
|
||||
<div class="item pink" data-ref="mixitup-target"></div>
|
||||
<div class="item blue" data-ref="mixitup-target"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('[data-ref~="mixitup-container"]');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
selectors: {
|
||||
target: '[data-ref~="mixitup-target"]'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
190
mixitup-3.3.1/demos/attribute-selectors/style.css
Normal file
190
mixitup-3.3.1/demos/attribute-selectors/style.css
Normal file
@@ -0,0 +1,190 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Grid Items
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
46
mixitup-3.3.1/demos/basic-ie-8/index.html
Normal file
46
mixitup-3.3.1/demos/basic-ie-8/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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 - Basic (IE8 Compatible Layout)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all"></button>
|
||||
<button type="button" class="control" data-filter=".green"></button>
|
||||
<button type="button" class="control" data-filter=".blue"></button>
|
||||
<button type="button" class="control" data-filter=".pink"></button>
|
||||
<button type="button" class="control" data-filter="none"></button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
122
mixitup-3.3.1/demos/basic-ie-8/style.css
Normal file
122
mixitup-3.3.1/demos/basic-ie-8/style.css
Normal file
@@ -0,0 +1,122 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 16px;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
height: 35px;
|
||||
min-width: 25px;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-weight: 800;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control[data-filter="all"] {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
background: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
background: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
background: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
background: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 16px;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: 8px solid transparent;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1.25%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
border-top-color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
border-top-color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
border-top-color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: 24%;
|
||||
}
|
||||
46
mixitup-3.3.1/demos/basic/index.html
Normal file
46
mixitup-3.3.1/demos/basic/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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 - Basic</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
190
mixitup-3.3.1/demos/basic/style.css
Normal file
190
mixitup-3.3.1/demos/basic/style.css
Normal file
@@ -0,0 +1,190 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
108
mixitup-3.3.1/demos/checkboxes-with-reset-checkbox/index.html
Normal file
108
mixitup-3.3.1/demos/checkboxes-with-reset-checkbox/index.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!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 - Checkboxes with Reset Checkbox</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<div class="checkbox-group">
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">All</label>
|
||||
<input type="checkbox" value="all" checked/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Green</label>
|
||||
<input type="checkbox" value=".green"/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Blue</label>
|
||||
<input type="checkbox" value=".blue"/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Pink</label>
|
||||
<input type="checkbox" value=".pink"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// In this example, we must bind a 'change' event handler to
|
||||
// our checkboxes, then interact with the mixer via
|
||||
// its .filter() API methods.
|
||||
|
||||
var containerEl = document.querySelector('.container');
|
||||
var checkboxGroup = document.querySelector('.checkbox-group');
|
||||
var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
|
||||
var allCheckbox = checkboxGroup.querySelector('input[value="all"]');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
|
||||
checkboxGroup.addEventListener('change', function(e) {
|
||||
var selectors = [];
|
||||
var checkbox;
|
||||
var i;
|
||||
|
||||
if (e.target === allCheckbox && e.target.checked) {
|
||||
// If the "all" checkbox was checked, uncheck all other checkboxes
|
||||
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
checkbox = checkboxes[i];
|
||||
|
||||
if (checkbox !== allCheckbox) checkbox.checked = false;
|
||||
}
|
||||
} else {
|
||||
// Another checkbox was changed, uncheck "all".
|
||||
|
||||
allCheckbox.checked = false;
|
||||
}
|
||||
|
||||
// Iterate through all checkboxes, pushing the
|
||||
// values of those that are checked into an array
|
||||
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
checkbox = checkboxes[i];
|
||||
|
||||
if (checkbox.checked) selectors.push(checkbox.value);
|
||||
}
|
||||
|
||||
// If there are values in the array, join it into a string
|
||||
// using your desired logic, and send to the mixer's .filter()
|
||||
// method, otherwise filter by 'all'
|
||||
|
||||
var selectorString = selectors.length > 0 ?
|
||||
selectors.join(',') : // or '.' for AND logic
|
||||
'all';
|
||||
|
||||
mixer.filter(selectorString);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
200
mixitup-3.3.1/demos/checkboxes-with-reset-checkbox/style.css
Normal file
200
mixitup-3.3.1/demos/checkboxes-with-reset-checkbox/style.css
Normal file
@@ -0,0 +1,200 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
background: #2a2a2a;
|
||||
margin-right: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.checkbox:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkbox-input,
|
||||
.checkbox-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
color: white;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-size: .9rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
86
mixitup-3.3.1/demos/checkboxes/index.html
Normal file
86
mixitup-3.3.1/demos/checkboxes/index.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<!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 - Checkboxes</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<div class="checkbox-group">
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Green</label>
|
||||
<input type="checkbox" value=".green"/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Blue</label>
|
||||
<input type="checkbox" value=".blue"/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Pink</label>
|
||||
<input type="checkbox" value=".pink"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// In this example, we must bind a 'change' event handler to
|
||||
// our checkboxes, then interact with the mixer via
|
||||
// its .filter() API methods.
|
||||
|
||||
var containerEl = document.querySelector('.container');
|
||||
var checkboxGroup = document.querySelector('.checkbox-group');
|
||||
var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
|
||||
checkboxGroup.addEventListener('change', function() {
|
||||
var selectors = [];
|
||||
|
||||
// Iterate through all checkboxes, pushing the
|
||||
// values of those that are checked into an array
|
||||
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
var checkbox = checkboxes[i];
|
||||
|
||||
if (checkbox.checked) selectors.push(checkbox.value);
|
||||
}
|
||||
|
||||
// If there are values in the array, join it into a string
|
||||
// using your desired logic, and send to the mixer's .filter()
|
||||
// method, otherwise filter by 'all'
|
||||
|
||||
var selectorString = selectors.length > 0 ?
|
||||
selectors.join(',') : // or '.' for AND logic
|
||||
'all';
|
||||
|
||||
mixer.filter(selectorString);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
200
mixitup-3.3.1/demos/checkboxes/style.css
Normal file
200
mixitup-3.3.1/demos/checkboxes/style.css
Normal file
@@ -0,0 +1,200 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
background: #2a2a2a;
|
||||
margin-right: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.checkbox:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkbox-input,
|
||||
.checkbox-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
color: white;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-size: .9rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
226
mixitup-3.3.1/demos/dataset-empty-container/index.html
Normal file
226
mixitup-3.3.1/demos/dataset-empty-container/index.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<!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 an Empty Container</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="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:
|
||||
|
||||
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
|
||||
},
|
||||
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);
|
||||
|
||||
// Finally, load the full dataset into the mixer
|
||||
|
||||
mixer.dataset(items)
|
||||
.then(function(state) {
|
||||
console.log('loaded ' + state.activeDataset.length + ' items');
|
||||
});
|
||||
|
||||
// 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>
|
||||
199
mixitup-3.3.1/demos/dataset-empty-container/style.css
Normal file
199
mixitup-3.3.1/demos/dataset-empty-container/style.css
Normal file
@@ -0,0 +1,199 @@
|
||||
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));
|
||||
}
|
||||
}
|
||||
256
mixitup-3.3.1/demos/dataset-pre-rendered-targets/index.html
Normal file
256
mixitup-3.3.1/demos/dataset-pre-rendered-targets/index.html
Normal 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
201
mixitup-3.3.1/demos/dataset-pre-rendered-targets/style.css
Normal 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));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
156
mixitup-3.3.1/demos/filtering-by-range/index.html
Normal file
156
mixitup-3.3.1/demos/filtering-by-range/index.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!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 - Filtering by Range</title>
|
||||
|
||||
<!--
|
||||
This demo hooks into MixItUp's plugins API to provide a means of applying
|
||||
additional non-selector-based contraints to our filtering logic, such as a
|
||||
minimum and maximum range.
|
||||
|
||||
Although this demo uses the native <input type="range"> only, you are free to use any
|
||||
specialised range slider UI library instead (e.g. Bootstrap, jQuery UI, etc). Simply
|
||||
update the `getRange()` function to read values in from your plugin's API instead.
|
||||
|
||||
NB: REQUIRES MixItUp v3.3.0 OR LATER!
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="size:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="size:desc">Desc</button>
|
||||
|
||||
<datalist id="sizeLegend">
|
||||
<option value="0">
|
||||
<option value="1">
|
||||
<option value="2">
|
||||
<option value="3">
|
||||
<option value="4">
|
||||
<option value="6">
|
||||
<option value="7">
|
||||
<option value="8">
|
||||
<option value="9">
|
||||
<option value="10">
|
||||
</datalist>
|
||||
|
||||
<div class="range-slider">
|
||||
<label class="range-slider-label">Min</label>
|
||||
|
||||
<input name="minSize" class="range-slider-input" type="range" min="0" max="10" value="0" list="sizeLegend"/>
|
||||
</div>
|
||||
|
||||
<div class="range-slider">
|
||||
<label class="range-slider-label">Max</label>
|
||||
|
||||
<input name="maxSize" class="range-slider-input" type="range" min="0" max="10" value="10" list="sizeLegend"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container">
|
||||
<div class="mix green" data-size="1"></div>
|
||||
<div class="mix green" data-size="3"></div>
|
||||
<div class="mix blue" data-size="4"></div>
|
||||
<div class="mix pink" data-size="5"></div>
|
||||
<div class="mix green" data-size="0"></div>
|
||||
<div class="mix green" data-size="3"></div>
|
||||
<div class="mix blue" data-size="8"></div>
|
||||
<div class="mix pink" data-size="2"></div>
|
||||
<div class="mix blue" data-size="10"></div>
|
||||
<div class="mix blue" data-size="7"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var container = document.querySelector('[data-ref="container"]');
|
||||
var minSizeRangeInput = document.querySelector('[name="minSize"]');
|
||||
var maxSizeRangeInput = document.querySelector('[name="maxSize"]');
|
||||
|
||||
var mixer = mixitup(container, {
|
||||
animation: {
|
||||
duration: 350
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Reads the values from our two native range inputs, returning an object
|
||||
* with `min` and `max` numeric values.
|
||||
*
|
||||
* @return {object}
|
||||
*/
|
||||
|
||||
function getRange() {
|
||||
var min = Number(minSizeRangeInput.value);
|
||||
var max = Number(maxSizeRangeInput.value);
|
||||
|
||||
return {
|
||||
min: min,
|
||||
max: max
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensures that the mixer is re-filtered whenever the value of a range
|
||||
* input changes.
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function handleRangeInputChange() {
|
||||
mixer.filter(mixer.getState().activeFilter);
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows us to manipulate the test result (`true` or `false`) of a
|
||||
* target against the current filter selector(s) (e.g. `.blue`).
|
||||
*
|
||||
* In this case we want to apply an additional constraint of whether or not the
|
||||
* target is within an arbitrary range, and override the test result to `false`
|
||||
* if not. The function must always return the test result.
|
||||
*
|
||||
* @param {boolean} testResult
|
||||
* A boolean indicating whether or not the target is passing the current filtering criteria.
|
||||
* @param {mixitup.Target} target
|
||||
* A reference to the target being tested
|
||||
* @return {boolean}
|
||||
*/
|
||||
|
||||
function filterTestResult(testResult, target) {
|
||||
var size = Number(target.dom.el.getAttribute('data-size'));
|
||||
var range = getRange();
|
||||
|
||||
if (size < range.min || size > range.max) {
|
||||
testResult = false;
|
||||
}
|
||||
|
||||
return testResult;
|
||||
}
|
||||
|
||||
// Using the static method `registerFilter` from the MixItUp plugins API, we can
|
||||
// register the above function as a filter, to manipulate the value returned from the
|
||||
// `testResultEvaluateHideShow` hook.
|
||||
|
||||
mixitup.Mixer.registerFilter('testResultEvaluateHideShow', 'range', filterTestResult);
|
||||
|
||||
// Listen for change events from the two range inputs
|
||||
|
||||
minSizeRangeInput.addEventListener('change', handleRangeInputChange);
|
||||
maxSizeRangeInput.addEventListener('change', handleRangeInputChange);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
280
mixitup-3.3.1/demos/filtering-by-range/style.css
Normal file
280
mixitup-3.3.1/demos/filtering-by-range/style.css
Normal file
@@ -0,0 +1,280 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
.range-slider {
|
||||
margin: 0 1rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.range-slider:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.range-slider::before,
|
||||
.range-slider::after,
|
||||
.range-slider-label {
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
}
|
||||
|
||||
.range-slider::before,
|
||||
.range-slider::after {
|
||||
font-size: .7rem;
|
||||
color: #aaa;
|
||||
content: '0';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 0 .2rem;
|
||||
}
|
||||
|
||||
.range-slider::after {
|
||||
content: '10';
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.range-slider-label {
|
||||
display: block;
|
||||
font-size: .8rem;
|
||||
color: #ccc;
|
||||
margin-bottom: .05rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.range-slider:last-child .range-slider-label {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.range-slider-input {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
margin-bottom: .75rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.range-slider-input::-webkit-slider-runnable-track {
|
||||
width: 300px;
|
||||
height: 5px;
|
||||
background: #888;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.range-slider-input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
background: #5ecdde;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.range-slider-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix[data-size]:after {
|
||||
position: absolute;
|
||||
content: attr(data-size);
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #aaa;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
107
mixitup-3.3.1/demos/filtering-by-text-input/index.html
Normal file
107
mixitup-3.3.1/demos/filtering-by-text-input/index.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<!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 - Filtering by Text Input</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
|
||||
<input type="text" class="input" data-ref="input-search" placeholder="Search by color"/>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var container = document.querySelector('[data-ref="container"]');
|
||||
var inputSearch = document.querySelector('[data-ref="input-search"]');
|
||||
var keyupTimeout;
|
||||
|
||||
var mixer = mixitup(container, {
|
||||
animation: {
|
||||
duration: 350
|
||||
},
|
||||
callbacks: {
|
||||
onMixClick: function() {
|
||||
// Reset the search if a filter is clicked
|
||||
|
||||
if (this.matches('[data-filter]')) {
|
||||
inputSearch.value = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Set up a handler to listen for "keyup" events from the search input
|
||||
|
||||
inputSearch.addEventListener('keyup', function() {
|
||||
var searchValue;
|
||||
|
||||
if (inputSearch.value.length < 3) {
|
||||
// If the input value is less than 3 characters, don't send
|
||||
|
||||
searchValue = '';
|
||||
} else {
|
||||
searchValue = inputSearch.value.toLowerCase().trim();
|
||||
}
|
||||
|
||||
// Very basic throttling to prevent mixer thrashing. Only search
|
||||
// once 350ms has passed since the last keyup event
|
||||
|
||||
clearTimeout(keyupTimeout);
|
||||
|
||||
keyupTimeout = setTimeout(function() {
|
||||
filterByString(searchValue);
|
||||
}, 350);
|
||||
});
|
||||
|
||||
/**
|
||||
* Filters the mixer using a provided search string, which is matched against
|
||||
* the contents of each target's "class" attribute. Any custom data-attribute(s)
|
||||
* could also be used.
|
||||
*
|
||||
* @param {string} searchValue
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function filterByString(searchValue) {
|
||||
if (searchValue) {
|
||||
// Use an attribute wildcard selector to check for matches
|
||||
|
||||
mixer.filter('[class*="' + searchValue + '"]');
|
||||
} else {
|
||||
// If no searchValue, treat as filter('all')
|
||||
|
||||
mixer.filter('all');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
202
mixitup-3.3.1/demos/filtering-by-text-input/style.css
Normal file
202
mixitup-3.3.1/demos/filtering-by-text-input/style.css
Normal file
@@ -0,0 +1,202 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
padding: .75rem;
|
||||
margin-left: .75rem;
|
||||
border-radius: 2px;
|
||||
border: 0 none;
|
||||
background: white;
|
||||
font-family: 'helvetica neue', arial, sans-serif;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
116
mixitup-3.3.1/demos/filtering-by-url/index.html
Normal file
116
mixitup-3.3.1/demos/filtering-by-url/index.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!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 - Filtering by URL</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// As we have no server-side application or routes, we will use
|
||||
// a URL "hash" for this demo, but we chould just as easily use
|
||||
// a URL route segment.
|
||||
|
||||
// As we will use the target selector in several parts of the demo,
|
||||
// we will declare it as a variable here.
|
||||
|
||||
var targetSelector = '.mix';
|
||||
|
||||
/**
|
||||
* Reads a hash from the URL (if present), and converts it into a class
|
||||
* selector string. E.g "#green" -> ".green". Otherwise, defaults
|
||||
* to the targetSelector, equivalent to "all"
|
||||
*
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
function getSelectorFromHash() {
|
||||
var hash = window.location.hash.replace(/^#/g, '');
|
||||
|
||||
var selector = hash ? '.' + hash : targetSelector;
|
||||
|
||||
return selector;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the URL whenever the current filter changes.
|
||||
*
|
||||
* @param {mixitup.State} state
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function setHash(state) {
|
||||
var selector = state.activeFilter.selector;
|
||||
var newHash = '#' + selector.replace(/^\./g, '');
|
||||
|
||||
if (selector === targetSelector && window.location.hash) {
|
||||
// Equivalent to filter "all", remove the hash
|
||||
|
||||
history.pushState(null, document.title, window.location.pathname); // or history.replaceState()
|
||||
} else if (newHash !== window.location.hash && selector !== targetSelector) {
|
||||
// Change the hash
|
||||
|
||||
history.pushState(null, document.title, window.location.pathname + newHash); // or history.replaceState()
|
||||
}
|
||||
}
|
||||
|
||||
// Instantiate and configure the mixer
|
||||
|
||||
var mixer = mixitup('.container', {
|
||||
selectors: {
|
||||
target: targetSelector
|
||||
},
|
||||
load: {
|
||||
filter: getSelectorFromHash() // Ensure that the mixer's initial filter matches the URL on startup
|
||||
},
|
||||
callbacks: {
|
||||
onMixEnd: setHash // Call the setHash() method at the end of each operation
|
||||
}
|
||||
});
|
||||
|
||||
// Add an "onhashchange" handler to keep the mixer in sync as the user goes
|
||||
// back and forward through their history.
|
||||
|
||||
// NB: This may or may not be the desired behavior for your project. If you don't
|
||||
// want MixItUp operations to count as individual history items, simply use
|
||||
// 'replaceState()' instead of 'pushState()' within the 'setHash()' function above.
|
||||
// In which case this handler would no longer be neccessary.
|
||||
|
||||
window.onhashchange = function() {
|
||||
var selector = getSelectorFromHash();
|
||||
|
||||
if (selector === mixer.getState().activeFilter.selector) return; // no change
|
||||
|
||||
mixer.filter(selector);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
170
mixitup-3.3.1/demos/filtering-by-url/style.css
Normal file
170
mixitup-3.3.1/demos/filtering-by-url/style.css
Normal file
@@ -0,0 +1,170 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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;
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
51
mixitup-3.3.1/demos/grid-columns/index.html
Normal file
51
mixitup-3.3.1/demos/grid-columns/index.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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 - Columns Grid</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
|
||||
<button type="button" class="control text" data-sort="random">Shuffle</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
animation: {
|
||||
animateResizeContainer: false // required to prevent column algorithm bug
|
||||
}
|
||||
});
|
||||
|
||||
// NB: See comments in stylesheet regarding fixes for chrome and safari "flickering"
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
214
mixitup-3.3.1/demos/grid-columns/style.css
Normal file
214
mixitup-3.3.1/demos/grid-columns/style.css
Normal file
@@ -0,0 +1,214 @@
|
||||
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;
|
||||
vertical-align: top;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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.text {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0 1rem;
|
||||
font-size: .9rem;
|
||||
height: 2.7rem;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control.text:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
|
||||
-webkit-column-count: 1;
|
||||
-moz-column-count: 1;
|
||||
column-count: 1;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
|
||||
backface-visibility: hidden; /* prevents flicker in chrome */
|
||||
will-change: transform, opacity; /* prevents flicker in safari */
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix.pink:before {
|
||||
padding-top: 75%;
|
||||
}
|
||||
|
||||
.mix.blue:before {
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
@media screen and (min-width: 401px) {
|
||||
.container {
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.container {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.container {
|
||||
-webkit-column-count: 4;
|
||||
-moz-column-count: 4;
|
||||
column-count: 4;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.container {
|
||||
-webkit-column-count: 5;
|
||||
-moz-column-count: 5;
|
||||
column-count: 5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<!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 - Flex-box Grid with Matching Heights</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-sort="random">Shuffle</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green">
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore. Quis autem vel eum iure reprehenderit qui in ea voluptate velit similique sunt in culpa qui officia deserunt mollitia animi.</p>
|
||||
</div>
|
||||
|
||||
<div class="mix green">
|
||||
<p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum.</p>
|
||||
</div>
|
||||
|
||||
<div class="mix blue">
|
||||
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias.<p>
|
||||
</div>
|
||||
|
||||
<div class="mix pink">
|
||||
<p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum.</p>
|
||||
</div>
|
||||
|
||||
<div class="mix green">
|
||||
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias.<p>
|
||||
</div>
|
||||
|
||||
<div class="mix blue">
|
||||
<p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum.</p>
|
||||
</div>
|
||||
|
||||
<div class="mix pink">
|
||||
<p>Magni dolores eos qui ratione voluptatem sequi nesciun.</p>
|
||||
</div>
|
||||
|
||||
<div class="mix blue">
|
||||
<p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum.</p>
|
||||
</div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
animation: {
|
||||
animateResizeTargets: true
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
148
mixitup-3.3.1/demos/grid-flex-box-matching-heights/style.css
Normal file
148
mixitup-3.3.1/demos/grid-flex-box-matching-heights/style.css
Normal file
@@ -0,0 +1,148 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: .9rem;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
color: transparent;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix p {
|
||||
padding: 1rem;
|
||||
display: inline-block;
|
||||
font-size: calc(1vw + .5rem);
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
27
mixitup-3.3.1/demos/grid-flex-box/index.html
Normal file
27
mixitup-3.3.1/demos/grid-flex-box/index.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!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 - Flex-box Grid</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
84
mixitup-3.3.1/demos/grid-flex-box/style.css
Normal file
84
mixitup-3.3.1/demos/grid-flex-box/style.css
Normal file
@@ -0,0 +1,84 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
23
mixitup-3.3.1/demos/grid-floats/index.html
Normal file
23
mixitup-3.3.1/demos/grid-floats/index.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!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 - Float-based Grid</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
73
mixitup-3.3.1/demos/grid-floats/style.css
Normal file
73
mixitup-3.3.1/demos/grid-floats/style.css
Normal file
@@ -0,0 +1,73 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem .5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix {
|
||||
float: left;
|
||||
margin: 0 .5rem 1rem;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix {
|
||||
width: calc(50% - 1rem);
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix {
|
||||
width: calc(100%/3 - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
27
mixitup-3.3.1/demos/grid-inline-block/index.html
Normal file
27
mixitup-3.3.1/demos/grid-inline-block/index.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!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 - Inline-block Grid</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
87
mixitup-3.3.1/demos/grid-inline-block/style.css
Normal file
87
mixitup-3.3.1/demos/grid-inline-block/style.css
Normal file
@@ -0,0 +1,87 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
81
mixitup-3.3.1/demos/index.html
Normal file
81
mixitup-3.3.1/demos/index.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MixItUp Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>MixItUp Demos</h1>
|
||||
|
||||
<p>The following collection of demos have been designed to demonstrate MixItUp's core functionality. They are maintained as part of the <a href="https://github.com/patrickkunka/mixitup/tree/v3/demos">MixItUp Github repository</a>, and can be viewed at <a href="http://demos.kunkalabs.com/mixitup">demos.kunkalabs.com/mixitup/</a>.</p>
|
||||
|
||||
<p>Each demo is intended to be as simple and instructive as possible and therefore intentionally avoids "magic" such as SASS, ES6, modules, or external dependencies that may require compilation in order to be usable in the browser. As such, you may run and edit these demos using any basic static file webserver, online or offline.</p>
|
||||
|
||||
<p>We add new demos to this collection regularly, but please <a href="https://www.kunkalabs.com/contact-us/">contact us</a> if there's a particular piece of functionality you would like to see which is missing from this list, or if you come across an issue with an existing demo.</p>
|
||||
|
||||
<h2>Basic Functionality</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./basic/">Basic MixItUp Functionality</a></li>
|
||||
<li><a href="./attribute-selectors/">Querying via Attribute Selectors</a></li>
|
||||
<li><a href="./loading-animation/">Loading Animation</a></li>
|
||||
<li><a href="./multiple-instances-global-control-scoping/">Multiple Instances with Global Control Scoping</a></li>
|
||||
<li><a href="./multiple-instances-local-control-scoping/">Multiple Instances with Local Control Scoping</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Filtering</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./toggle-filtering-or-logic/">Toggle Filtering with OR Logic</a></li>
|
||||
<li><a href="./toggle-filtering-and-logic/">Toggle Filtering with AND Logic</a></li>
|
||||
<li><a href="./filtering-by-url/">Filtering by URL</a></li>
|
||||
<li><a href="./filtering-by-text-input/">Filtering by Text Input</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Non-standard UI</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./select-dropdowns/">Select Dropdowns</a></li>
|
||||
<li><a href="./radio-buttons/">Radio Buttons</a></li>
|
||||
<li><a href="./checkboxes/">Checkboxes</a></li>
|
||||
<li><a href="./checkboxes-with-reset-checkbox/">Checkboxes with Reset Checkbox</a></li>
|
||||
<li><a href="./filtering-by-range/">Range Sliders</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Sorting</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./sorting-by-default/">Sorting by Default</a></li>
|
||||
<li><a href="./sorting-by-attribute/">Sorting by Attribute</a></li>
|
||||
<li><a href="./sorting-by-multiple-attributes/">Sorting by Multiple Attributes</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Insertion</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./insertion-non-target-elements/">Insertion with Non-target Elements</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Removal</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./removal-by-reference/">Removal by Reference</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Dataset</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./dataset-empty-container/">Dataset with an Empty Container</a></li>
|
||||
<li><a href="./dataset-pre-rendered-targets/">Dataset with Pre-rendered Targets</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Grids</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="./grid-inline-block/">Inline-block Grid (HTML/CSS only)</a></li>
|
||||
<li><a href="./grid-flex-box/">Flex-box Grid (HTML/CSS only)</a></li>
|
||||
<li><a href="./grid-floats/">Float-based Grid (HTML/CSS only)</a></li>
|
||||
<li><a href="./grid-flex-box-matching-heights/">Flex-box Grid with Matching Heights</a></li>
|
||||
<li><a href="./grid-columns/">Columns Grid</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
42
mixitup-3.3.1/demos/insertion-non-target-elements/index.html
Normal file
42
mixitup-3.3.1/demos/insertion-non-target-elements/index.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!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 - Insertion with Non-target Elements</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container">
|
||||
<button type="button" class="item button" data-ref="button-add-new"></button>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('[data-ref="container"]');
|
||||
var buttonAddNew = document.querySelector('[data-ref="button-add-new"]');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
selectors: {
|
||||
target: '[data-ref="mixitup-target"]'
|
||||
}
|
||||
});
|
||||
|
||||
buttonAddNew.addEventListener('click', function() {
|
||||
mixer.insertAfter('<div class="item" data-ref="mixitup-target"></div>', buttonAddNew);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
174
mixitup-3.3.1/demos/insertion-non-target-elements/style.css
Normal file
174
mixitup-3.3.1/demos/insertion-non-target-elements/style.css
Normal file
@@ -0,0 +1,174 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Grid Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.item,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #ddd;
|
||||
font-size: 4rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 100ms;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
box-shadow: inset 0 0 20px rgba(0,0,0, .1);
|
||||
}
|
||||
|
||||
.button:after {
|
||||
display: inline-block;
|
||||
content: '+';
|
||||
font-size: 4rem;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
71
mixitup-3.3.1/demos/loading-animation/index.html
Normal file
71
mixitup-3.3.1/demos/loading-animation/index.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!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 - Basic</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
animation: {
|
||||
effects: 'fade scale stagger(50ms)' // Set a 'stagger' effect for the loading animation
|
||||
},
|
||||
load: {
|
||||
filter: 'none' // Ensure all targets start from hidden (i.e. display: none;)
|
||||
}
|
||||
});
|
||||
|
||||
// Add a class to the container to remove 'visibility: hidden;' from targets. This
|
||||
// prevents any flickr of content before the page's JavaScript has loaded.
|
||||
|
||||
containerEl.classList.add('mixitup-ready');
|
||||
|
||||
// Show all targets in the container
|
||||
|
||||
mixer.show()
|
||||
.then(function() {
|
||||
// Remove the stagger effect for any subsequent operations
|
||||
|
||||
mixer.configure({
|
||||
animation: {
|
||||
effects: 'fade scale'
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
198
mixitup-3.3.1/demos/loading-animation/style.css
Normal file
198
mixitup-3.3.1/demos/loading-animation/style.css
Normal file
@@ -0,0 +1,198 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mixitup-ready .mix {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
18
mixitup-3.3.1/demos/mixitup.min.js
vendored
Normal file
18
mixitup-3.3.1/demos/mixitup.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
94
mixitup-3.3.1/demos/mock-api.js
Normal file
94
mixitup-3.3.1/demos/mock-api.js
Normal file
@@ -0,0 +1,94 @@
|
||||
(function(window) {
|
||||
var Api = function(dataset) {
|
||||
var _db = [];
|
||||
|
||||
Object.defineProperties(this, {
|
||||
db: {
|
||||
get: function() {
|
||||
return _db.slice();
|
||||
},
|
||||
set: function(value) {
|
||||
if (!Array.isArray(value)) {
|
||||
throw new TypeError('[mock-api] Dataset must be an array');
|
||||
}
|
||||
|
||||
if (!value.length) {
|
||||
throw new TypeError('[mock-api] Dataset must contain one or more elements');
|
||||
}
|
||||
|
||||
_db = value;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.init(dataset);
|
||||
};
|
||||
|
||||
Api.prototype = {
|
||||
constructor: Api,
|
||||
|
||||
init: function(dataset) {
|
||||
this.db = dataset;
|
||||
},
|
||||
|
||||
get: function(query) {
|
||||
var self = this;
|
||||
|
||||
return Promise.resolve()
|
||||
.then(function() {
|
||||
var output;
|
||||
|
||||
query = Object.assign(new Api.Query(), query);
|
||||
|
||||
Object.freeze(query);
|
||||
|
||||
output = self.filter(self.db, query);
|
||||
|
||||
output = self.sort(output, query);
|
||||
|
||||
return output;
|
||||
});
|
||||
},
|
||||
|
||||
filter: function(input, query) {
|
||||
return input.filter(function(item) {
|
||||
var key;
|
||||
var value;
|
||||
|
||||
for (key in query) {
|
||||
if (key.match(/^\$/g)) continue;
|
||||
|
||||
value = query[key];
|
||||
|
||||
if (value === 'all') return true;
|
||||
|
||||
if (item[key] !== value) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
},
|
||||
|
||||
sort: function(input, query) {
|
||||
return input.sort(function(a, b) {
|
||||
var valueA = a[query.$sort_by];
|
||||
var valueB = b[query.$sort_by];
|
||||
|
||||
if (valueA > valueB) {
|
||||
return query.$order === 'asc' ? 1 : -1;
|
||||
} else if (valueA < valueB) {
|
||||
return query.$order === 'asc' ? -1 : 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Api.Query = function() {
|
||||
this.$sort_by = 'id';
|
||||
this.$order = 'asc';
|
||||
};
|
||||
|
||||
window.Api = Api;
|
||||
})(window);
|
||||
@@ -0,0 +1,53 @@
|
||||
<!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 - Multiple Mixers with Global Control Scoping</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container-1">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container-2">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl1 = document.querySelector('[data-ref="container-1"]');
|
||||
var containerEl2 = document.querySelector('[data-ref="container-2"]');
|
||||
|
||||
var mixer1 = mixitup(containerEl1);
|
||||
var mixer1 = mixitup(containerEl2);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,184 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
font-size: 0.1px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.targets:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
<!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 - Multiple Mixers with Local Control Scoping</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" data-ref="container-1">
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="targets">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" data-ref="container-2">
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="targets">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl1 = document.querySelector('[data-ref="container-1"]');
|
||||
var containerEl2 = document.querySelector('[data-ref="container-2"]');
|
||||
|
||||
var config = {
|
||||
controls: {
|
||||
scope: 'local'
|
||||
}
|
||||
};
|
||||
|
||||
var mixer1 = mixitup(containerEl1, config);
|
||||
var mixer1 = mixitup(containerEl2, config);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,186 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
font-size: 0.1px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.targets {
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.targets:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
93
mixitup-3.3.1/demos/radio-buttons/index.html
Normal file
93
mixitup-3.3.1/demos/radio-buttons/index.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<!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 - Radio Buttons</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<div class="radio-group radios-filter">
|
||||
<div class="radio">
|
||||
<label class="radio-label">All</label>
|
||||
<input name="color" type="radio" value="all" checked/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Green</label>
|
||||
<input name="color" type="radio" value=".green"/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Blue</label>
|
||||
<input name="color" type="radio" value=".blue"/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Pink</label>
|
||||
<input name="color" type="radio" value=".pink"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="radio-group radios-sort">
|
||||
<div class="radio">
|
||||
<label class="radio-label">Asc</label>
|
||||
<input name="order" type="radio" value="default:asc" checked/>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label class="radio-label">Desc</label>
|
||||
<input name="order" type="radio" value="default:desc"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// In this example, we must bind a 'change' event handler to
|
||||
// our radios, then interact with the mixer via
|
||||
// its .filter() API methods.
|
||||
|
||||
var containerEl = document.querySelector('.container');
|
||||
var radiosFilter = document.querySelector('.radios-filter');
|
||||
var radiosSort = document.querySelector('.radios-sort');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
|
||||
radiosFilter.addEventListener('change', function() {
|
||||
var checked = radiosFilter.querySelector(':checked');
|
||||
|
||||
var selector = checked ? checked.value : 'all';
|
||||
|
||||
mixer.filter(selector);
|
||||
});
|
||||
|
||||
radiosSort.addEventListener('change', function() {
|
||||
var checked = radiosSort.querySelector(':checked');
|
||||
|
||||
var order = checked.value;
|
||||
|
||||
mixer.sort(order);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
200
mixitup-3.3.1/demos/radio-buttons/style.css
Normal file
200
mixitup-3.3.1/demos/radio-buttons/style.css
Normal file
@@ -0,0 +1,200 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
background: #2a2a2a;
|
||||
margin-right: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.radio {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.radio:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.radio-input,
|
||||
.radio-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
color: white;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-size: .9rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
62
mixitup-3.3.1/demos/removal-by-reference/index.html
Normal file
62
mixitup-3.3.1/demos/removal-by-reference/index.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!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 - Removal by Reference</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
|
||||
function handleTargetClick(e) {
|
||||
var targetEl;
|
||||
|
||||
if (!(targetEl = e.target).matches('.mix')) {
|
||||
// If clicked element is not a target, return
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Pass the reference to the target element to the remove method
|
||||
|
||||
mixer.remove(targetEl);
|
||||
}
|
||||
|
||||
containerEl.addEventListener('click', handleTargetClick);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
196
mixitup-3.3.1/demos/removal-by-reference/style.css
Normal file
196
mixitup-3.3.1/demos/removal-by-reference/style.css
Normal file
@@ -0,0 +1,196 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
72
mixitup-3.3.1/demos/reset.css
Normal file
72
mixitup-3.3.1/demos/reset.css
Normal file
@@ -0,0 +1,72 @@
|
||||
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;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 0 none;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
67
mixitup-3.3.1/demos/select-dropdowns/index.html
Normal file
67
mixitup-3.3.1/demos/select-dropdowns/index.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!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 - Select Dropdowns</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<select class="select-filter">
|
||||
<option value="all">All</option>
|
||||
<option value=".green">Green</option>
|
||||
<option value=".blue">Blue</option>
|
||||
<option value=".pink">Pink</option>
|
||||
</select>
|
||||
|
||||
<select class="select-sort">
|
||||
<option value="default:asc">Ascending</option>
|
||||
<option value="default:desc">Descending</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// In this example, we must bind 'change' event handlers to
|
||||
// our <select> elements, then interact with the mixer via
|
||||
// its .filter() and .sort() API methods.
|
||||
|
||||
var containerEl = document.querySelector('.container');
|
||||
var selectFilter = document.querySelector('.select-filter');
|
||||
var selectSort = document.querySelector('.select-sort');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
|
||||
selectFilter.addEventListener('change', function() {
|
||||
var selector = selectFilter.value;
|
||||
|
||||
mixer.filter(selector);
|
||||
});
|
||||
|
||||
selectSort.addEventListener('change', function() {
|
||||
var order = selectSort.value;
|
||||
|
||||
mixer.sort(order);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
111
mixitup-3.3.1/demos/select-dropdowns/style.css
Normal file
111
mixitup-3.3.1/demos/select-dropdowns/style.css
Normal file
@@ -0,0 +1,111 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.controls > select {
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
44
mixitup-3.3.1/demos/sorting-by-attribute/index.html
Normal file
44
mixitup-3.3.1/demos/sorting-by-attribute/index.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!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 - Sorting by Attribute</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-sort="published-date:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="published-date:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix" data-published-date="2016-10-12"></div>
|
||||
<div class="mix" data-published-date="2016-09-03"></div>
|
||||
<div class="mix" data-published-date="2016-05-22"></div>
|
||||
<div class="mix" data-published-date="2016-05-19"></div>
|
||||
<div class="mix" data-published-date="2016-04-30"></div>
|
||||
<div class="mix" data-published-date="2016-04-24"></div>
|
||||
<div class="mix" data-published-date="2016-03-12"></div>
|
||||
<div class="mix" data-published-date="2016-01-01"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
load: {
|
||||
sort: 'published-date:desc'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
157
mixitup-3.3.1/demos/sorting-by-attribute/style.css
Normal file
157
mixitup-3.3.1/demos/sorting-by-attribute/style.css
Normal file
@@ -0,0 +1,157 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix[data-published-date]:after {
|
||||
position: absolute;
|
||||
content: attr(data-published-date);
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #aaa;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
40
mixitup-3.3.1/demos/sorting-by-default/index.html
Normal file
40
mixitup-3.3.1/demos/sorting-by-default/index.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!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 - Sorting by Default</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
<div class="mix"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
145
mixitup-3.3.1/demos/sorting-by-default/style.css
Normal file
145
mixitup-3.3.1/demos/sorting-by-default/style.css
Normal file
@@ -0,0 +1,145 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<!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 - Sorting by Multiple Attributes</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-sort="published-date:desc name:asc">Desc</button>
|
||||
<button type="button" class="control" data-sort="published-date:asc name:asc">Asc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix" data-published-date="2016-11-24" data-name="Oscar"><h4>Oscar</h4></div>
|
||||
<div class="mix" data-published-date="2016-10-12" data-name="Charlie"><h4>Charlie</h4></div>
|
||||
<div class="mix" data-published-date="2016-09-30" data-name="Lima"><h4>Lima</h4></div>
|
||||
<div class="mix" data-published-date="2016-09-03" data-name="Alpha"><h4>Alpha</h4></div>
|
||||
<div class="mix" data-published-date="2016-09-03" data-name="Mike"><h4>Mike</h4></div>
|
||||
<div class="mix" data-published-date="2016-09-03" data-name="Zulu"><h4>Zulu</h4></div>
|
||||
<div class="mix" data-published-date="2016-04-30" data-name="Tango"><h4>Tango</h4></div>
|
||||
<div class="mix" data-published-date="2016-04-24" data-name="Sierra"><h4>Sierra</h4></div>
|
||||
<div class="mix" data-published-date="2016-03-12" data-name="Bravo"><h4>Bravo</h4></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
load: {
|
||||
sort: 'published-date:desc name:asc'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
165
mixitup-3.3.1/demos/sorting-by-multiple-attributes/style.css
Normal file
165
mixitup-3.3.1/demos/sorting-by-multiple-attributes/style.css
Normal file
@@ -0,0 +1,165 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-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[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix[data-published-date]:after {
|
||||
position: absolute;
|
||||
content: attr(data-published-date);
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mix h4 {
|
||||
position: absolute;
|
||||
padding: 1rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
46
mixitup-3.3.1/demos/toggle-filtering-and-logic/index.html
Normal file
46
mixitup-3.3.1/demos/toggle-filtering-and-logic/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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 - Toggle Filtering AND Logic</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-toggle=".green">Green</button>
|
||||
<button type="button" class="control" data-toggle=".blue">Blue</button>
|
||||
<button type="button" class="control" data-toggle=".pink">Pink</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue pink"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
controls: {
|
||||
toggleLogic: 'and'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
186
mixitup-3.3.1/demos/toggle-filtering-and-logic/style.css
Normal file
186
mixitup-3.3.1/demos/toggle-filtering-and-logic/style.css
Normal file
@@ -0,0 +1,186 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after,
|
||||
.control[data-toggle]: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;
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-toggle]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"],
|
||||
.control[data-toggle=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"],
|
||||
.control[data-toggle=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"],
|
||||
.control[data-toggle=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
border-top: .5rem solid transparent;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.mix.pink.green:before {
|
||||
width: 100%;
|
||||
border-top-color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.green.blue:before {
|
||||
width: 100%;
|
||||
border-top-color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.blue.pink:before {
|
||||
width: 100%;
|
||||
border-top-color: #d595aa;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
42
mixitup-3.3.1/demos/toggle-filtering-or-logic/index.html
Normal file
42
mixitup-3.3.1/demos/toggle-filtering-or-logic/index.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!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 - Toggle Filtering OR Logic</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-toggle=".green">Green</button>
|
||||
<button type="button" class="control" data-toggle=".blue">Blue</button>
|
||||
<button type="button" class="control" data-toggle=".pink">Pink</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
170
mixitup-3.3.1/demos/toggle-filtering-or-logic/style.css
Normal file
170
mixitup-3.3.1/demos/toggle-filtering-or-logic/style.css
Normal file
@@ -0,0 +1,170 @@
|
||||
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:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after,
|
||||
.control[data-toggle]: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;
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-toggle]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"],
|
||||
.control[data-toggle=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"],
|
||||
.control[data-toggle=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"],
|
||||
.control[data-toggle=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
10682
mixitup-3.3.1/dist/mixitup.js
vendored
Normal file
10682
mixitup-3.3.1/dist/mixitup.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
18
mixitup-3.3.1/dist/mixitup.min.js
vendored
Normal file
18
mixitup-3.3.1/dist/mixitup.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
105
mixitup-3.3.1/docs/mixitup-3-migration-guide.md
Normal file
105
mixitup-3.3.1/docs/mixitup-3-migration-guide.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# MixItUp 3 Migration Guide
|
||||
|
||||
The biggest change to MixItUp with v3, is the dropping of jQuery as a dependency. MixItUp 1 and 2 both existed as jQuery plugins, with instantiation and API calls abstracted away through a typical jQuery-plugin interface.
|
||||
|
||||
With MixItUp 3, we can now interact with MixItUp instances ('mixers') directly with minimal abstraction.
|
||||
|
||||
## Instantiation
|
||||
|
||||
###### Example: Basic Instantiation
|
||||
|
||||
```js
|
||||
// MixItUp 2
|
||||
|
||||
$('.container').mixItUp();
|
||||
```
|
||||
|
||||
```js
|
||||
// MixItUp 3
|
||||
|
||||
var mixer = mixitup('.container');
|
||||
```
|
||||
|
||||
###### Example: Passing the configuration object
|
||||
|
||||
```js
|
||||
// MixItUp 2
|
||||
|
||||
$('.container').mixItUp({
|
||||
selectors: {
|
||||
target: '.item'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
// MixItUp 3
|
||||
|
||||
var mixer = mixitup('.container', {
|
||||
selectors: {
|
||||
target: '.item'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Note that the `mixitup()` factory function is now all lowercase, as apposed to the camel case MixItUp 2 jQuery method `.mixItUp()`.
|
||||
|
||||
MixItUp 3 adds many new configuration options, and renames or removes some of those from MixItUp 2.
|
||||
|
||||
*Further reading: [Configuration Object](/docs/mixitup.Config.md)*
|
||||
|
||||
## Method Invocation
|
||||
|
||||
```js
|
||||
// MixItUp 2
|
||||
|
||||
$('.container').mixItUp('filter', '.category-a');
|
||||
```
|
||||
```js
|
||||
// MixItUp 3
|
||||
|
||||
mixer.filter('.category-a');
|
||||
```
|
||||
|
||||
As you may have noticed, mixers in MixItUp 3 have many of the same API methods as were available in MixItUp 2, but are called using standard method invocation syntax, with arguments passed in the standard form rather than the jQuery-UI-like syntax of MixItUp 2.
|
||||
|
||||
MixItUp 3 adds many new API methods, and renames or removes some of those from MixItUp 2.
|
||||
|
||||
*Further reading: [Mixer API Methods](/docs/mixitup.Mixer.md)*
|
||||
|
||||
## Promises and Callbacks
|
||||
|
||||
In MixItUp 2, asynchronous operations (those involving animation) accepted an optional callback function to be invoked on completion.
|
||||
|
||||
With MixItUp 3, all asynchronous methods return a promise resolving with a state object. Callback functions are still permitted as an optional argument, but promises should be considered the preferred method for dealing with asynchronous operations.
|
||||
|
||||
```js
|
||||
// MixItUp 2 (callbacks)
|
||||
|
||||
$('.container').mixItUp('filter', '.category-a', function(state) {
|
||||
// Operation finished, the new state is:
|
||||
|
||||
console.log(state);
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
// MixItUp 3 (promises)
|
||||
|
||||
mixer.filter('.category-a')
|
||||
.then(function(state) {
|
||||
// Operation finished, the new state is:
|
||||
|
||||
console.log(state);
|
||||
});
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
In MixItUp 2, it was required that a CSS `display: none` rule be applied to all target elements by default, with MixItUp adding the `display` value of your choice (e.g. `inline-block`) to only those targets to be shown. This was intended to prevent a flash-of-content before MixItUp 2's loading animation started.
|
||||
|
||||
With MixItUp 3, loading animations are removed by default, and mixers are instantiated synchronously and instantly. Because of this, it is assumed that all targets in the DOM are already shown, so MixItUp only needs to add `display: none` to those targets to be hidden, using whatever `display` value is declared in your CSS for shown targets.
|
||||
|
||||
In short – you no longer need to set `display: none` in your CSS. Simply use whatever display value your layout would require, regardless of MixItUp.
|
||||
|
||||
Loading animations are still possible in MixItUp 3 as demonstrated in the [Loading Animation](http://demos.kunkalabs.com/mixitup/loading-animation/) demo. The code for this demo is available [here](/demos/loading-animation/).
|
||||
1858
mixitup-3.3.1/docs/mixitup.Config.md
Normal file
1858
mixitup-3.3.1/docs/mixitup.Config.md
Normal file
File diff suppressed because it is too large
Load Diff
104
mixitup-3.3.1/docs/mixitup.Events.md
Normal file
104
mixitup-3.3.1/docs/mixitup.Events.md
Normal file
@@ -0,0 +1,104 @@
|
||||
# mixitup.Events
|
||||
|
||||
## Overview
|
||||
|
||||
The `mixitup.Events` class contains all custom events dispatched by MixItUp at various
|
||||
points within the lifecycle of a mixer operation.
|
||||
|
||||
Each event is analogous to the callback function of the same name defined in
|
||||
the `callbacks` configuration object, and is triggered immediately before it.
|
||||
|
||||
Events are always triggered from the container element on which MixItUp is instantiated
|
||||
upon.
|
||||
|
||||
As with any event, registered event handlers receive the event object as a parameter
|
||||
which includes a `detail` property containting references to the current `state`,
|
||||
the `mixer` instance, and other event-specific properties described below.
|
||||
|
||||
### Contents
|
||||
|
||||
- [mixStart](#mixStart)
|
||||
- [mixBusy](#mixBusy)
|
||||
- [mixEnd](#mixEnd)
|
||||
- [mixFail](#mixFail)
|
||||
- [mixClick](#mixClick)
|
||||
|
||||
|
||||
<h3 id="mixStart">mixStart</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
A custom event triggered immediately after any MixItUp operation is requested
|
||||
and before animations have begun.
|
||||
|
||||
The `mixStart` event also exposes a `futureState` property via the
|
||||
`event.detail` object, which represents the final state of the mixer once
|
||||
the requested operation has completed.
|
||||
|
||||
|
||||
|Type
|
||||
|---
|
||||
|`CustomEvent`
|
||||
|
||||
|
||||
<h3 id="mixBusy">mixBusy</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
A custom event triggered when a MixItUp operation is requested while another
|
||||
operation is in progress, and the animation queue is full, or queueing
|
||||
is disabled.
|
||||
|
||||
|
||||
|Type
|
||||
|---
|
||||
|`CustomEvent`
|
||||
|
||||
|
||||
<h3 id="mixEnd">mixEnd</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
A custom event triggered after any MixItUp operation has completed, and the
|
||||
state has been updated.
|
||||
|
||||
|
||||
|Type
|
||||
|---
|
||||
|`CustomEvent`
|
||||
|
||||
|
||||
<h3 id="mixFail">mixFail</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
A custom event triggered whenever a filter operation "fails", i.e. no targets
|
||||
could be found matching the requested filter.
|
||||
|
||||
|
||||
|Type
|
||||
|---
|
||||
|`CustomEvent`
|
||||
|
||||
|
||||
<h3 id="mixClick">mixClick</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
A custom event triggered whenever a MixItUp control is clicked, and before its
|
||||
respective operation is requested.
|
||||
|
||||
This event also exposes an `originalEvent` property via the `event.detail`
|
||||
object, which holds a reference to the original click event.
|
||||
|
||||
|
||||
|Type
|
||||
|---
|
||||
|`CustomEvent`
|
||||
|
||||
|
||||
1011
mixitup-3.3.1/docs/mixitup.Mixer.md
Normal file
1011
mixitup-3.3.1/docs/mixitup.Mixer.md
Normal file
File diff suppressed because it is too large
Load Diff
248
mixitup-3.3.1/docs/mixitup.State.md
Normal file
248
mixitup-3.3.1/docs/mixitup.State.md
Normal file
@@ -0,0 +1,248 @@
|
||||
# mixitup.State
|
||||
|
||||
## Overview
|
||||
|
||||
`mixitup.State` objects expose various pieces of data detailing the state of
|
||||
a MixItUp instance. They are provided at the start and end of any operation via
|
||||
callbacks and events, with the most recent state stored between operations
|
||||
for retrieval at any time via the API.
|
||||
|
||||
### Contents
|
||||
|
||||
- [id](#id)
|
||||
- [activeFilter](#activeFilter)
|
||||
- [activeSort](#activeSort)
|
||||
- [activeContainerClassName](#activeContainerClassName)
|
||||
- [container](#container)
|
||||
- [targets](#targets)
|
||||
- [hide](#hide)
|
||||
- [show](#show)
|
||||
- [matching](#matching)
|
||||
- [totalTargets](#totalTargets)
|
||||
- [totalShow](#totalShow)
|
||||
- [totalHide](#totalHide)
|
||||
- [totalMatching](#totalMatching)
|
||||
- [hasFailed](#hasFailed)
|
||||
- [triggerElement](#triggerElement)
|
||||
- [activeDataset](#activeDataset)
|
||||
|
||||
|
||||
<h3 id="id">id</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
The ID of the mixer instance.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`string`| `''`
|
||||
|
||||
|
||||
<h3 id="activeFilter">activeFilter</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
The currently active filter command as set by a control click or API call.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`mixitup.CommandFilter`| `null`
|
||||
|
||||
|
||||
<h3 id="activeSort">activeSort</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
The currently active sort command as set by a control click or API call.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`mixitup.CommandSort`| `null`
|
||||
|
||||
|
||||
<h3 id="activeContainerClassName">activeContainerClassName</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
The current layout-specific container class name, if applied.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`string`| `''`
|
||||
|
||||
|
||||
<h3 id="container">container</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
A reference to the container element that the mixer is instantiated on.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`Element`| `null`
|
||||
|
||||
|
||||
<h3 id="targets">targets</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
An array of all target elements indexed by the mixer.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`Array.<Element>`| `[]`
|
||||
|
||||
|
||||
<h3 id="hide">hide</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
An array of all target elements not matching the current filter.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`Array.<Element>`| `[]`
|
||||
|
||||
|
||||
<h3 id="show">show</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
An array of all target elements matching the current filter and any additional
|
||||
limits applied such as pagination.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`Array.<Element>`| `[]`
|
||||
|
||||
|
||||
<h3 id="matching">matching</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
An array of all target elements matching the current filter irrespective of
|
||||
any additional limits applied such as pagination.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`Array.<Element>`| `[]`
|
||||
|
||||
|
||||
<h3 id="totalTargets">totalTargets</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
An integer representing the total number of target elements indexed by the
|
||||
mixer. Equivalent to `state.targets.length`.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`number`| `-1`
|
||||
|
||||
|
||||
<h3 id="totalShow">totalShow</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
An integer representing the total number of target elements matching the
|
||||
current filter and any additional limits applied such as pagination.
|
||||
Equivalent to `state.show.length`.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`number`| `-1`
|
||||
|
||||
|
||||
<h3 id="totalHide">totalHide</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
An integer representing the total number of target elements not matching
|
||||
the current filter. Equivalent to `state.hide.length`.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`number`| `-1`
|
||||
|
||||
|
||||
<h3 id="totalMatching">totalMatching</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
An integer representing the total number of target elements matching the
|
||||
current filter irrespective of any other limits applied such as pagination.
|
||||
Equivalent to `state.matching.length`.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`number`| `-1`
|
||||
|
||||
|
||||
<h3 id="hasFailed">hasFailed</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
A boolean indicating whether the last operation "failed", i.e. no targets
|
||||
could be found matching the filter.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`boolean`| `false`
|
||||
|
||||
|
||||
<h3 id="triggerElement">triggerElement</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
The DOM element that was clicked if the last operation was triggered by the
|
||||
clicking of a control and not an API call.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`Elementnull`| `null`
|
||||
|
||||
|
||||
<h3 id="activeDataset">activeDataset</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
The currently active dataset underlying the rendered targets, if the
|
||||
dataset API is in use.
|
||||
|
||||
|
||||
|Type | Default
|
||||
|--- | ---
|
||||
|`Array.<object>`| `null`
|
||||
|
||||
|
||||
47
mixitup-3.3.1/docs/mixitup.md
Normal file
47
mixitup-3.3.1/docs/mixitup.md
Normal file
@@ -0,0 +1,47 @@
|
||||
#mixitup()
|
||||
|
||||
*Version added: 3.0.0*
|
||||
|
||||
`mixitup(container [,config] [,foreignDoc])`
|
||||
|
||||
The `mixitup()` "factory" function creates and returns individual instances
|
||||
of MixItUp, known as "mixers", on which API methods can be called.
|
||||
|
||||
When loading MixItUp via a script tag, the factory function is accessed
|
||||
via the global variable `mixitup`. When using a module loading
|
||||
system (e.g. ES2015, CommonJS, RequireJS), the factory function is
|
||||
exported into your module when you require the MixItUp library.
|
||||
|
||||
| |Type | Name | Description
|
||||
|---|--- | --- | ---
|
||||
|Param |`Element, string` | `container` | A DOM element or selector string representing the container(s) on which to instantiate MixItUp.
|
||||
|Param |`object` | `[config]` | An optional "configuration object" used to customize the behavior of the MixItUp instance.
|
||||
|Param |`object` | `[foreignDoc]` | An optional reference to a `document`, which can be used to control a MixItUp instance in an iframe.
|
||||
|Returns |`mixitup.Mixer` | A "mixer" object holding the MixItUp instance.
|
||||
|
||||
###### Example 1: Creating a mixer instance with an element reference
|
||||
|
||||
```js
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
```
|
||||
###### Example 2: Creating a mixer instance with a selector string
|
||||
|
||||
```js
|
||||
var mixer = mixitup('.container');
|
||||
```
|
||||
###### Example 3: Passing a configuration object
|
||||
|
||||
```js
|
||||
var mixer = mixitup(containerEl, {
|
||||
animation: {
|
||||
effects: 'fade scale(0.5)'
|
||||
}
|
||||
});
|
||||
```
|
||||
###### Example 4: Passing an iframe reference
|
||||
|
||||
```js
|
||||
var mixer = mixitup(containerEl, config, foreignDocument);
|
||||
```
|
||||
90
mixitup-3.3.1/gulpfile.js
Normal file
90
mixitup-3.3.1/gulpfile.js
Normal file
@@ -0,0 +1,90 @@
|
||||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const jshint = require('gulp-jshint');
|
||||
const stylish = require('jshint-stylish');
|
||||
const rename = require('gulp-rename');
|
||||
const jscs = require('gulp-jscs');
|
||||
const uglify = require('gulp-uglify');
|
||||
const livereload = require('gulp-livereload');
|
||||
const exec = require('child_process').exec;
|
||||
|
||||
gulp.task('default', ['watch']);
|
||||
|
||||
gulp.task('watch', () => {
|
||||
livereload.listen(35730);
|
||||
|
||||
gulp.watch([
|
||||
'./src/*.js',
|
||||
'./src/*.hbs'
|
||||
], ['reload-js'])
|
||||
.on('change', function(e) {
|
||||
console.log(
|
||||
'[gulp-watch] file ' +
|
||||
e.path +
|
||||
' was ' +
|
||||
e.type +
|
||||
', building'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('reload-js', ['build-dist'], () => {
|
||||
return livereload.changed();
|
||||
});
|
||||
|
||||
gulp.task('prod', ['uglify']);
|
||||
|
||||
gulp.task('uglify', ['build'], () => {
|
||||
return gulp.src([
|
||||
'./dist/mixitup.js'
|
||||
])
|
||||
.pipe(uglify({
|
||||
preserveComments: 'license'
|
||||
}))
|
||||
.pipe(rename('mixitup.min.js'))
|
||||
.on('error', e => console.error('[uglify] ' + e.message))
|
||||
.pipe(gulp.dest('./dist/'))
|
||||
.pipe(gulp.dest('./demos/'));
|
||||
});
|
||||
|
||||
gulp.task('build', ['build-dist'], done => {
|
||||
exec('node node_modules/mixitup-build/docs.js -s mixitup.js', (e, out) => {
|
||||
if (out) {
|
||||
console.log(out);
|
||||
}
|
||||
|
||||
done(e);
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('build-dist', ['lint', 'code-style'], done => {
|
||||
exec('node node_modules/mixitup-build/dist.js -o mixitup.js', (e, out) => {
|
||||
if (out) {
|
||||
console.log(out);
|
||||
}
|
||||
|
||||
done(e);
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('lint', () => {
|
||||
return gulp.src([
|
||||
'./src/*.js'
|
||||
], {
|
||||
base: '/'
|
||||
})
|
||||
.pipe(jshint('./.jshintrc'))
|
||||
.pipe(jshint.reporter(stylish))
|
||||
.pipe(jshint.reporter('fail'));
|
||||
});
|
||||
|
||||
gulp.task('code-style', () => {
|
||||
return gulp.src([
|
||||
'./src/*.js'
|
||||
], {
|
||||
base: '/'
|
||||
})
|
||||
.pipe(jscs())
|
||||
.pipe(jscs.reporter());
|
||||
});
|
||||
41
mixitup-3.3.1/package.json
Normal file
41
mixitup-3.3.1/package.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "mixitup",
|
||||
"title": "MixItUp",
|
||||
"version": "3.3.1",
|
||||
"description": "A high-performance, dependency-free library for animated filtering, sorting and more",
|
||||
"author": "KunkaLabs Limited",
|
||||
"homepage": "https://www.kunkalabs.com/mixitup/",
|
||||
"license": "SEE LICENSE IN README.md",
|
||||
"main": "./dist/mixitup.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/patrickkunka/mixitup/"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "mocha ./tests/unit/main.js",
|
||||
"cover": "istanbul cover _mocha ./tests/unit/main.js",
|
||||
"coveralls": "npm run cover -- --report lcovonly && cat ./coverage/lcov.info | coveralls"
|
||||
},
|
||||
"devDependencies": {
|
||||
"chai": "^3.5.0",
|
||||
"chai-as-promised": "^5.3.0",
|
||||
"chai-shallow-deep-equal": "^1.4.0",
|
||||
"coveralls": "^2.11.14",
|
||||
"gulp": "^3.8.8",
|
||||
"gulp-jscs": "^4.0.0",
|
||||
"gulp-jshint": "^1.8.5",
|
||||
"gulp-livereload": "~2.1.1",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-uglify": "~1.5.1",
|
||||
"istanbul": "^0.4.5",
|
||||
"jsdom": "9.4.2",
|
||||
"jsdom-global": "2.0.0",
|
||||
"jshint-stylish": "~1.0.0",
|
||||
"merge-stream": "^0.1.7",
|
||||
"mixitup-build": "git://github.com/patrickkunka/mixitup-build.git",
|
||||
"mocha": "^3.0.2",
|
||||
"mocha-lcov-reporter": "^1.2.0",
|
||||
"vinyl-buffer": "^1.0.0",
|
||||
"vinyl-source-stream": "^1.1.0"
|
||||
}
|
||||
}
|
||||
15
mixitup-3.3.1/src/banner.js
Normal file
15
mixitup-3.3.1/src/banner.js
Normal file
@@ -0,0 +1,15 @@
|
||||
/**!
|
||||
* {{title}} v{{version}}
|
||||
* {{description}}
|
||||
* Build {{buildId}}
|
||||
*
|
||||
* @copyright Copyright {{beginCopyrightYear}}-{{currentYear}} {{author}}.
|
||||
* @author {{author}}.
|
||||
* @link {{websiteUrl}}
|
||||
*
|
||||
* @license Commercial use requires a commercial license.
|
||||
* {{commercialLicenseUrl}}
|
||||
*
|
||||
* Non-commercial use permitted under same terms as CC BY-NC 3.0 license.
|
||||
* {{nonCommercialLicenseUrl}}
|
||||
*/
|
||||
68
mixitup-3.3.1/src/base-static.js
Normal file
68
mixitup-3.3.1/src/base-static.js
Normal file
@@ -0,0 +1,68 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* The BaseStatic class holds a set of static methods which are then added to all other
|
||||
* extensible MixItUp classes as a means of integrating extensions via the addition of new
|
||||
* methods and/or actions and hooks.
|
||||
*
|
||||
* @constructor
|
||||
* @namespace
|
||||
* @memberof mixitup
|
||||
* @private
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.BaseStatic = function() {
|
||||
this.actions = {};
|
||||
this.filters = {};
|
||||
|
||||
/**
|
||||
* Performs a shallow extend on the class's prototype, adding one or more new members to
|
||||
* the class in a single operation.
|
||||
*
|
||||
* @memberof mixitup.BaseStatic
|
||||
* @public
|
||||
* @static
|
||||
* @since 2.1.0
|
||||
* @param {object} extension
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
this.extend = function(extension) {
|
||||
h.extend(this.prototype, extension);
|
||||
};
|
||||
|
||||
/**
|
||||
* Registers a function to be called on the action hook of the provided name.
|
||||
*
|
||||
* @memberof mixitup.BaseStatic
|
||||
* @public
|
||||
* @static
|
||||
* @since 2.1.0
|
||||
* @param {string} hookName
|
||||
* @param {string} extensionName
|
||||
* @param {function} func
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
this.registerAction = function(hookName, extensionName, func) {
|
||||
(this.actions[hookName] = this.actions[hookName] || {})[extensionName] = func;
|
||||
};
|
||||
|
||||
/**
|
||||
* Registers a function to be called on the filter of the provided name.
|
||||
*
|
||||
* @memberof mixitup.BaseStatic
|
||||
* @public
|
||||
* @static
|
||||
* @since 2.1.0
|
||||
* @param {string} hookName
|
||||
* @param {string} extensionName
|
||||
* @param {function} func
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
this.registerFilter = function(hookName, extensionName, func) {
|
||||
(this.filters[hookName] = this.filters[hookName] || {})[extensionName] = func;
|
||||
};
|
||||
};
|
||||
76
mixitup-3.3.1/src/base.js
Normal file
76
mixitup-3.3.1/src/base.js
Normal file
@@ -0,0 +1,76 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* The Base class adds instance methods to all other extensible MixItUp classes,
|
||||
* enabling the calling of any registered hooks.
|
||||
*
|
||||
* @constructor
|
||||
* @namespace
|
||||
* @memberof mixitup
|
||||
* @private
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.Base = function() {};
|
||||
|
||||
mixitup.Base.prototype = {
|
||||
constructor: mixitup.Base,
|
||||
|
||||
/**
|
||||
* Calls any registered hooks for the provided action.
|
||||
*
|
||||
* @memberof mixitup.Base
|
||||
* @private
|
||||
* @instance
|
||||
* @since 2.0.0
|
||||
* @param {string} actionName
|
||||
* @param {Array<*>} args
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
callActions: function(actionName, args) {
|
||||
var self = this,
|
||||
hooks = self.constructor.actions[actionName],
|
||||
extensionName = '';
|
||||
|
||||
if (!hooks || h.isEmptyObject(hooks)) return;
|
||||
|
||||
for (extensionName in hooks) {
|
||||
hooks[extensionName].apply(self, args);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Calls any registered hooks for the provided filter.
|
||||
*
|
||||
* @memberof mixitup.Base
|
||||
* @private
|
||||
* @instance
|
||||
* @since 2.0.0
|
||||
* @param {string} filterName
|
||||
* @param {*} input
|
||||
* @param {Array<*>} args
|
||||
* @return {*}
|
||||
*/
|
||||
|
||||
callFilters: function(filterName, input, args) {
|
||||
var self = this,
|
||||
hooks = self.constructor.filters[filterName],
|
||||
output = input,
|
||||
extensionName = '';
|
||||
|
||||
if (!hooks || h.isEmptyObject(hooks)) return output;
|
||||
|
||||
args = args || [];
|
||||
|
||||
for (extensionName in hooks) {
|
||||
args = h.arrayFromList(args);
|
||||
|
||||
args.unshift(output);
|
||||
|
||||
output = hooks[extensionName].apply(self, args);
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
};
|
||||
86
mixitup-3.3.1/src/collection.js
Normal file
86
mixitup-3.3.1/src/collection.js
Normal file
@@ -0,0 +1,86 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* A jQuery-collection-like wrapper around one or more `mixitup.Mixer` instances
|
||||
* allowing simultaneous control of said instances similar to the MixItUp 2 API.
|
||||
*
|
||||
* @example
|
||||
* new mixitup.Collection(instances)
|
||||
*
|
||||
* @constructor
|
||||
* @namespace
|
||||
* @memberof mixitup
|
||||
* @private
|
||||
* @since 3.0.0
|
||||
* @param {mixitup.Mixer[]} instances
|
||||
*/
|
||||
|
||||
mixitup.Collection = function(instances) {
|
||||
var instance = null,
|
||||
i = -1;
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
for (i = 0; instance = instances[i]; i++) {
|
||||
this[i] = instance;
|
||||
}
|
||||
|
||||
this.length = instances.length;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.freeze(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.Collection);
|
||||
|
||||
mixitup.Collection.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
h.extend(mixitup.Collection.prototype,
|
||||
/** @lends mixitup.Collection */
|
||||
{
|
||||
constructor: mixitup.Collection,
|
||||
|
||||
/**
|
||||
* Calls a method on all instances in the collection by passing the method
|
||||
* name as a string followed by any applicable parameters to be curried into
|
||||
* to the method.
|
||||
*
|
||||
* @example
|
||||
* .mixitup(methodName[,arg1][,arg2..]);
|
||||
*
|
||||
* @example
|
||||
* var collection = new Collection([mixer1, mixer2]);
|
||||
*
|
||||
* return collection.mixitup('filter', '.category-a')
|
||||
* .then(function(states) {
|
||||
* state.forEach(function(state) {
|
||||
* console.log(state.activeFilter.selector); // .category-a
|
||||
* });
|
||||
* });
|
||||
*
|
||||
* @public
|
||||
* @instance
|
||||
* @since 3.0.0
|
||||
* @param {string} methodName
|
||||
* @return {Promise<Array<mixitup.State>>}
|
||||
*/
|
||||
|
||||
mixitup: function(methodName) {
|
||||
var self = this,
|
||||
instance = null,
|
||||
args = Array.prototype.slice.call(arguments),
|
||||
tasks = [],
|
||||
i = -1;
|
||||
|
||||
this.callActions('beforeMixitup');
|
||||
|
||||
args.shift();
|
||||
|
||||
for (i = 0; instance = self[i]; i++) {
|
||||
tasks.push(instance[methodName].apply(instance, args));
|
||||
}
|
||||
|
||||
return self.callFilters('promiseMixitup', h.all(tasks, mixitup.libraries), arguments);
|
||||
}
|
||||
});
|
||||
28
mixitup-3.3.1/src/command-change-layout.js
Normal file
28
mixitup-3.3.1/src/command-change-layout.js
Normal file
@@ -0,0 +1,28 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* An object into which all arbitrary arguments sent to '.changeLayout()' are mapped.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup
|
||||
* @private
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.CommandChangeLayout = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
this.containerClassName = '';
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.CommandChangeLayout);
|
||||
|
||||
mixitup.CommandChangeLayout.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.CommandChangeLayout.prototype.constructor = mixitup.CommandChangeLayout;
|
||||
28
mixitup-3.3.1/src/command-dataset.js
Normal file
28
mixitup-3.3.1/src/command-dataset.js
Normal file
@@ -0,0 +1,28 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* An object into which all arbitrary arguments sent to '.dataset()' are mapped.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup
|
||||
* @private
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.CommandDataset = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
this.dataset = null;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.CommandDataset);
|
||||
|
||||
mixitup.CommandDataset.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.CommandDataset.prototype.constructor = mixitup.CommandDataset;
|
||||
30
mixitup-3.3.1/src/command-filter.js
Normal file
30
mixitup-3.3.1/src/command-filter.js
Normal file
@@ -0,0 +1,30 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* An object into which all arbitrary arguments sent to '.filter()' are mapped.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup
|
||||
* @private
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.CommandFilter = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
this.selector = '';
|
||||
this.collection = null;
|
||||
this.action = 'show'; // enum: ['show', 'hide']
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.CommandFilter);
|
||||
|
||||
mixitup.CommandFilter.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.CommandFilter.prototype.constructor = mixitup.CommandFilter;
|
||||
31
mixitup-3.3.1/src/command-insert.js
Normal file
31
mixitup-3.3.1/src/command-insert.js
Normal file
@@ -0,0 +1,31 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* An object into which all arbitrary arguments sent to '.insert()' are mapped.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup
|
||||
* @private
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.CommandInsert = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
this.index = 0;
|
||||
this.collection = [];
|
||||
this.position = 'before'; // enum: ['before', 'after']
|
||||
this.sibling = null;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.CommandInsert);
|
||||
|
||||
mixitup.CommandInsert.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.CommandInsert.prototype.constructor = mixitup.CommandInsert;
|
||||
32
mixitup-3.3.1/src/command-multimix.js
Normal file
32
mixitup-3.3.1/src/command-multimix.js
Normal file
@@ -0,0 +1,32 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* An object into which all arbitrary arguments sent to '.multimix()' are mapped.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup
|
||||
* @private
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.CommandMultimix = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
this.filter = null;
|
||||
this.sort = null;
|
||||
this.insert = null;
|
||||
this.remove = null;
|
||||
this.changeLayout = null;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.CommandMultimix);
|
||||
|
||||
mixitup.CommandMultimix.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.CommandMultimix.prototype.constructor = mixitup.CommandMultimix;
|
||||
29
mixitup-3.3.1/src/command-remove.js
Normal file
29
mixitup-3.3.1/src/command-remove.js
Normal file
@@ -0,0 +1,29 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* An object into which all arbitrary arguments sent to '.remove()' are mapped.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup
|
||||
* @private
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.CommandRemove = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
this.targets = [];
|
||||
this.collection = [];
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.CommandRemove);
|
||||
|
||||
mixitup.CommandRemove.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.CommandRemove.prototype.constructor = mixitup.CommandRemove;
|
||||
32
mixitup-3.3.1/src/command-sort.js
Normal file
32
mixitup-3.3.1/src/command-sort.js
Normal file
@@ -0,0 +1,32 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* An object into which all arbitrary arguments sent to '.sort()' are mapped.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup
|
||||
* @private
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.CommandSort = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
this.sortString = '';
|
||||
this.attribute = '';
|
||||
this.order = 'asc';
|
||||
this.collection = null;
|
||||
this.next = null;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.CommandSort);
|
||||
|
||||
mixitup.CommandSort.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.CommandSort.prototype.constructor = mixitup.CommandSort;
|
||||
491
mixitup-3.3.1/src/config-animation.js
Normal file
491
mixitup-3.3.1/src/config-animation.js
Normal file
@@ -0,0 +1,491 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* A group of properties defining the mixer's animation and effects settings.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup.Config
|
||||
* @name animation
|
||||
* @namespace
|
||||
* @public
|
||||
* @since 2.0.0
|
||||
*/
|
||||
|
||||
mixitup.ConfigAnimation = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not animation should be enabled for the MixItUp instance.
|
||||
* If `false`, all operations will occur instantly and syncronously, although callback
|
||||
* functions and any returned promises will still be fulfilled.
|
||||
*
|
||||
* @example <caption>Example: Create a mixer with all animations disabled</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* enable: false
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name enable
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
*/
|
||||
|
||||
this.enable = true;
|
||||
|
||||
/**
|
||||
* A string of one or more space-seperated properties to which transitions will be
|
||||
* applied for all filtering animations.
|
||||
*
|
||||
* Properties can be listed any order or combination, although they will be applied in a specific
|
||||
* predefined order to produce consistent results.
|
||||
*
|
||||
* To learn more about available effects, experiment with our <a href="https://www.kunkalabs.com/mixitup/">
|
||||
* sandbox demo</a> and try out the "Export config" button in the Animation options drop down.
|
||||
*
|
||||
* @example <caption>Example: Apply "fade" and "translateZ" effects to all animations</caption>
|
||||
* // As targets are filtered in and out, they will fade between
|
||||
* // opacity 1 and 0 and transform between translateZ(-100px) and
|
||||
* // translateZ(0).
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* effects: 'fade translateZ(-100px)'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name effects
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'fade scale'
|
||||
*/
|
||||
|
||||
this.effects = 'fade scale';
|
||||
|
||||
/**
|
||||
* A string of one or more space-seperated effects to be applied only to filter-in
|
||||
* animations, overriding `config.animation.effects` if set.
|
||||
*
|
||||
* @example <caption>Example: Apply downwards vertical translate to targets being filtered in</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* effectsIn: 'fade translateY(-100%)'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name effectsIn
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default ''
|
||||
*/
|
||||
|
||||
this.effectsIn = '';
|
||||
|
||||
/**
|
||||
* A string of one or more space-seperated effects to be applied only to filter-out
|
||||
* animations, overriding `config.animation.effects` if set.
|
||||
*
|
||||
* @example <caption>Example: Apply upwards vertical translate to targets being filtered out</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* effectsOut: 'fade translateY(-100%)'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name effectsOut
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default ''
|
||||
*/
|
||||
|
||||
this.effectsOut = '';
|
||||
|
||||
/**
|
||||
* An integer dictating the duration of all MixItUp animations in milliseconds, not
|
||||
* including any additional delay apllied via the `'stagger'` effect.
|
||||
*
|
||||
* @example <caption>Example: Apply an animation duration of 200ms to all mixitup animations</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* duration: 200
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name duration
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {number}
|
||||
* @default 600
|
||||
*/
|
||||
|
||||
this.duration = 600;
|
||||
|
||||
/**
|
||||
* A valid CSS3 transition-timing function or shorthand. For a full list of accepted
|
||||
* values, visit <a href="http://easings.net" target="_blank">easings.net</a>.
|
||||
*
|
||||
* @example <caption>Example 1: Apply "ease-in-out" easing to all animations</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* easing: 'ease-in-out'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 2: Apply a custom "cubic-bezier" easing function to all animations</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name easing
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'ease'
|
||||
*/
|
||||
|
||||
this.easing = 'ease';
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not to apply perspective to the MixItUp container
|
||||
* during animations. By default, perspective is always applied and creates the
|
||||
* illusion of three-dimensional space for effects such as `translateZ`, `rotateX`,
|
||||
* and `rotateY`.
|
||||
*
|
||||
* You may wish to disable this and define your own perspective settings via CSS.
|
||||
*
|
||||
* @example <caption>Example: Prevent perspective from being applied to any 3D transforms</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* applyPerspective: false
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name applyPerspective
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {bolean}
|
||||
* @default true
|
||||
*/
|
||||
|
||||
this.applyPerspective = true;
|
||||
|
||||
/**
|
||||
* The perspective distance value to be applied to the container during animations,
|
||||
* affecting any 3D-transform-based effects.
|
||||
*
|
||||
* @example <caption>Example: Set a perspective distance of 2000px</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* effects: 'rotateY(-25deg)',
|
||||
* perspectiveDistance: '2000px'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name perspectiveDistance
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default '3000px'
|
||||
*/
|
||||
|
||||
this.perspectiveDistance = '3000px';
|
||||
|
||||
/**
|
||||
* The perspective-origin value to be applied to the container during animations,
|
||||
* affecting any 3D-transform-based effects.
|
||||
*
|
||||
* @example <caption>Example: Set a perspective origin in the top-right of the container</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* effects: 'transateZ(-200px)',
|
||||
* perspectiveOrigin: '100% 0'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name perspectiveOrigin
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default '50% 50%'
|
||||
*/
|
||||
|
||||
this.perspectiveOrigin = '50% 50%';
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not to enable the queuing of operations.
|
||||
*
|
||||
* If `true` (default), and a control is clicked or an API call is made while another
|
||||
* operation is progress, the operation will go into the queue and will be automatically exectuted
|
||||
* when the previous operaitons is finished.
|
||||
*
|
||||
* If `false`, any requested operations will be ignored, and the `onMixBusy` callback and `mixBusy`
|
||||
* event will be fired. If `debug.showWarnings` is enabled, a console warning will also occur.
|
||||
*
|
||||
* @example <caption>Example: Disable queuing</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* queue: false
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name queue
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
*/
|
||||
|
||||
this.queue = true;
|
||||
|
||||
/**
|
||||
* An integer dictacting the maximum number of operations allowed in the queue at
|
||||
* any time, when queuing is enabled.
|
||||
*
|
||||
* @example <caption>Example: Allow a maximum of 5 operations in the queue at any time</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* queueLimit: 5
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name queueLimit
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {number}
|
||||
* @default 3
|
||||
*/
|
||||
|
||||
this.queueLimit = 3;
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not to transition the height and width of the
|
||||
* container as elements are filtered in and out. If disabled, the container height
|
||||
* will change abruptly.
|
||||
*
|
||||
* It may be desirable to disable this on mobile devices as the CSS `height` and
|
||||
* `width` properties do not receive GPU-acceleration and can therefore cause stuttering.
|
||||
*
|
||||
* @example <caption>Example 1: Disable the transitioning of the container height and/or width</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* animateResizeContainer: false
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 2: Disable the transitioning of the container height and/or width for mobile devices only</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* animateResizeContainer: myFeatureTests.isMobile ? false : true
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name animateResizeContainer
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
*/
|
||||
|
||||
this.animateResizeContainer = true;
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not to transition the height and width of target
|
||||
* elements as they change throughout the course of an animation.
|
||||
*
|
||||
* This is often a must for flex-box grid layouts where the size of target elements may change
|
||||
* depending on final their position in relation to their siblings, or for `.changeLayout()`
|
||||
* operations where the size of targets change between layouts.
|
||||
*
|
||||
* NB: This feature requires additional calculations and manipulation to non-hardware-accelerated
|
||||
* properties which may adversely affect performance on slower devices, and is therefore
|
||||
* disabled by default.
|
||||
*
|
||||
* @example <caption>Example: Enable the transitioning of target widths and heights</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* animateResizeTargets: true
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name animateResizeTargets
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
*/
|
||||
|
||||
this.animateResizeTargets = false;
|
||||
|
||||
/**
|
||||
* A custom function used to manipulate the order in which the stagger delay is
|
||||
* incremented when using the ‘stagger’ effect.
|
||||
*
|
||||
* When using the 'stagger' effect, the delay applied to each target element is incremented
|
||||
* based on its index. You may create a custom function to manipulate the order in which the
|
||||
* delay is incremented and create engaging non-linear stagger effects.
|
||||
*
|
||||
* The function receives the index of the target element as a parameter, and must
|
||||
* return an integer which serves as the multiplier for the stagger delay.
|
||||
*
|
||||
* @example <caption>Example 1: Stagger target elements by column in a 3-column grid</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* effects: 'fade stagger(100ms)',
|
||||
* staggerSequence: function(i) {
|
||||
* return i % 3;
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 2: Using an algorithm to produce a more complex sequence</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* effects: 'fade stagger(100ms)',
|
||||
* staggerSequence: function(i) {
|
||||
* return (2*i) - (5*((i/3) - ((1/3) * (i%3))));
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name staggerSequence
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {function}
|
||||
* @default null
|
||||
*/
|
||||
|
||||
this.staggerSequence = null;
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not to reverse the direction of `translate`
|
||||
* and `rotate` transforms for elements being filtered out.
|
||||
*
|
||||
* It can be used to create carousel-like animations where elements enter and exit
|
||||
* from opposite directions. If enabled, the effect `translateX(-100%)` for elements
|
||||
* being filtered in would become `translateX(100%)` for targets being filtered out.
|
||||
*
|
||||
* This functionality can also be achieved by providing seperate effects
|
||||
* strings for `config.animation.effectsIn` and `config.animation.effectsOut`.
|
||||
*
|
||||
* @example <caption>Example: Reverse the desired direction on any translate/rotate effect for targets being filtered out</caption>
|
||||
* // Elements being filtered in will be translated from '100%' to '0' while
|
||||
* // elements being filtered out will be translated from 0 to '-100%'
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* effects: 'fade translateX(100%)',
|
||||
* reverseOut: true,
|
||||
* nudge: false // Disable nudging to create a carousel-like effect
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name reverseOut
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
*/
|
||||
|
||||
this.reverseOut = false;
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not to "nudge" the animation path of targets
|
||||
* when they are being filtered in and out simulatenously.
|
||||
*
|
||||
* This has been the default behavior of MixItUp since version 1, but it
|
||||
* may be desirable to disable this effect when filtering directly from
|
||||
* one exclusive set of targets to a different exclusive set of targets,
|
||||
* to create a carousel-like effect, or a generally more subtle animation.
|
||||
*
|
||||
* @example <caption>Example: Disable the "nudging" of targets being filtered in and out simulatenously</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* nudge: false
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name nudge
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
*/
|
||||
|
||||
this.nudge = true;
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not to clamp the height of the container while MixItUp's
|
||||
* geometry tests are carried out before an operation.
|
||||
*
|
||||
* To prevent scroll-bar flicker, clamping is turned on by default. But in the case where the
|
||||
* height of the container might affect its vertical positioning in the viewport
|
||||
* (e.g. a vertically-centered container), this should be turned off to ensure accurate
|
||||
* test results and a smooth animation.
|
||||
*
|
||||
* @example <caption>Example: Disable container height-clamping</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* clampHeight: false
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name clampHeight
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
*/
|
||||
|
||||
this.clampHeight = true;
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not to clamp the width of the container while MixItUp's
|
||||
* geometry tests are carried out before an operation.
|
||||
*
|
||||
* To prevent scroll-bar flicker, clamping is turned on by default. But in the case where the
|
||||
* width of the container might affect its horitzontal positioning in the viewport
|
||||
* (e.g. a horizontall-centered container), this should be turned off to ensure accurate
|
||||
* test results and a smooth animation.
|
||||
*
|
||||
* @example <caption>Example: Disable container width-clamping</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* animation: {
|
||||
* clampWidth: false
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name clampWidth
|
||||
* @memberof mixitup.Config.animation
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
*/
|
||||
|
||||
this.clampWidth = true;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ConfigAnimation);
|
||||
|
||||
mixitup.ConfigAnimation.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ConfigAnimation.prototype.constructor = mixitup.ConfigAnimation;
|
||||
73
mixitup-3.3.1/src/config-behavior.js
Normal file
73
mixitup-3.3.1/src/config-behavior.js
Normal file
@@ -0,0 +1,73 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* A group of properties relating to the behavior of the Mixer.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup.Config
|
||||
* @name behavior
|
||||
* @namespace
|
||||
* @public
|
||||
* @since 3.1.12
|
||||
*/
|
||||
|
||||
mixitup.ConfigBehavior = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
/**
|
||||
* A boolean dictating whether to allow "live" sorting of the mixer.
|
||||
*
|
||||
* Because of the expensive nature of sorting, MixItUp makes use of several
|
||||
* internal optimizations to skip redundant sorting operations, such as when
|
||||
* the newly requested sort command is the same as the active one. The caveat
|
||||
* to this optimization is that "live" edits to the value of a target's sorting
|
||||
* attribute will be ignored when requesting a re-sort by the same attribute.
|
||||
*
|
||||
* By setting to `behavior.liveSort` to `true`, the mixer will always re-sort
|
||||
* regardless of whether or not the sorting attribute and order have changed.
|
||||
*
|
||||
* @example <caption>Example: Enabling `liveSort` to allow for re-sorting</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* behavior: {
|
||||
* liveSort: true
|
||||
* },
|
||||
* load: {
|
||||
* sort: 'edited:desc'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* var target = containerEl.children[3];
|
||||
*
|
||||
* console.log(target.getAttribute('data-edited')); // '2015-04-24'
|
||||
*
|
||||
* target.setAttribute('data-edited', '2017-08-10'); // Update the target's edited date
|
||||
*
|
||||
* mixer.sort('edited:desc')
|
||||
* .then(function(state) {
|
||||
* // The target is now at the top of the list
|
||||
*
|
||||
* console.log(state.targets[0] === target); // true
|
||||
* });
|
||||
*
|
||||
* @name liveSort
|
||||
* @memberof mixitup.Config.behavior
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
*/
|
||||
|
||||
this.liveSort = false;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ConfigBehavior);
|
||||
|
||||
mixitup.ConfigBehavior.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ConfigBehavior.prototype.constructor = mixitup.ConfigBehavior;
|
||||
184
mixitup-3.3.1/src/config-callbacks.js
Normal file
184
mixitup-3.3.1/src/config-callbacks.js
Normal file
@@ -0,0 +1,184 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* A group of optional callback functions to be invoked at various
|
||||
* points within the lifecycle of a mixer operation.
|
||||
*
|
||||
* Each function is analogous to an event of the same name triggered from the
|
||||
* container element, and is invoked immediately after it.
|
||||
*
|
||||
* All callback functions receive the current `state` object as their first
|
||||
* argument, as well as other more specific arguments described below.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup.Config
|
||||
* @name callbacks
|
||||
* @namespace
|
||||
* @public
|
||||
* @since 2.0.0
|
||||
*/
|
||||
|
||||
mixitup.ConfigCallbacks = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
/**
|
||||
* A callback function invoked immediately after any MixItUp operation is requested
|
||||
* and before animations have begun.
|
||||
*
|
||||
* A second `futureState` argument is passed to the function which represents the final
|
||||
* state of the mixer once the requested operation has completed.
|
||||
*
|
||||
* @example <caption>Example: Adding an `onMixStart` callback function</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* callbacks: {
|
||||
* onMixStart: function(state, futureState) {
|
||||
* console.log('Starting operation...');
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name onMixStart
|
||||
* @memberof mixitup.Config.callbacks
|
||||
* @instance
|
||||
* @type {function}
|
||||
* @default null
|
||||
*/
|
||||
|
||||
this.onMixStart = null;
|
||||
|
||||
/**
|
||||
* A callback function invoked when a MixItUp operation is requested while another
|
||||
* operation is in progress, and the animation queue is full, or queueing
|
||||
* is disabled.
|
||||
*
|
||||
* @example <caption>Example: Adding an `onMixBusy` callback function</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* callbacks: {
|
||||
* onMixBusy: function(state) {
|
||||
* console.log('Mixer busy');
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name onMixBusy
|
||||
* @memberof mixitup.Config.callbacks
|
||||
* @instance
|
||||
* @type {function}
|
||||
* @default null
|
||||
*/
|
||||
|
||||
this.onMixBusy = null;
|
||||
|
||||
/**
|
||||
* A callback function invoked after any MixItUp operation has completed, and the
|
||||
* state has been updated.
|
||||
*
|
||||
* @example <caption>Example: Adding an `onMixEnd` callback function</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* callbacks: {
|
||||
* onMixEnd: function(state) {
|
||||
* console.log('Operation complete');
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name onMixEnd
|
||||
* @memberof mixitup.Config.callbacks
|
||||
* @instance
|
||||
* @type {function}
|
||||
* @default null
|
||||
*/
|
||||
|
||||
this.onMixEnd = null;
|
||||
|
||||
/**
|
||||
* A callback function invoked whenever an operation "fails", i.e. no targets
|
||||
* could be found matching the requested filter.
|
||||
*
|
||||
* @example <caption>Example: Adding an `onMixFail` callback function</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* callbacks: {
|
||||
* onMixFail: function(state) {
|
||||
* console.log('No items could be found matching the requested filter');
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name onMixFail
|
||||
* @memberof mixitup.Config.callbacks
|
||||
* @instance
|
||||
* @type {function}
|
||||
* @default null
|
||||
*/
|
||||
|
||||
this.onMixFail = null;
|
||||
|
||||
/**
|
||||
* A callback function invoked whenever a MixItUp control is clicked, and before its
|
||||
* respective operation is requested.
|
||||
*
|
||||
* The clicked element is assigned to the `this` keyword within the function. The original
|
||||
* click event is passed to the function as the second argument, which can be useful if
|
||||
* using `<a>` tags as controls where the default behavior needs to be prevented.
|
||||
*
|
||||
* Returning `false` from the callback will prevent the control click from triggering
|
||||
* an operation.
|
||||
*
|
||||
* @example <caption>Example 1: Adding an `onMixClick` callback function</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* callbacks: {
|
||||
* onMixClick: function(state, originalEvent) {
|
||||
* console.log('The control "' + this.innerText + '" was clicked');
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 2: Using `onMixClick` to manipulate the original click event</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* callbacks: {
|
||||
* onMixClick: function(state, originalEvent) {
|
||||
* // Prevent original click event from bubbling up:
|
||||
* originalEvent.stopPropagation();
|
||||
*
|
||||
* // Prevent default behavior of clicked element:
|
||||
* originalEvent.preventDefault();
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 3: Using `onMixClick` to conditionally cancel operations</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* callbacks: {
|
||||
* onMixClick: function(state, originalEvent) {
|
||||
* // Perform some conditional check:
|
||||
*
|
||||
* if (myApp.isLoading) {
|
||||
* // By returning false, we can prevent the control click from triggering an operation.
|
||||
*
|
||||
* return false;
|
||||
* }
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name onMixClick
|
||||
* @memberof mixitup.Config.callbacks
|
||||
* @instance
|
||||
* @type {function}
|
||||
* @default null
|
||||
*/
|
||||
|
||||
this.onMixClick = null;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ConfigCallbacks);
|
||||
|
||||
mixitup.ConfigCallbacks.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ConfigCallbacks.prototype.constructor = mixitup.ConfigCallbacks;
|
||||
300
mixitup-3.3.1/src/config-class-names.js
Normal file
300
mixitup-3.3.1/src/config-class-names.js
Normal file
@@ -0,0 +1,300 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* A group of properties defining the output and structure of class names programmatically
|
||||
* added to controls and containers to reflect the state of the mixer.
|
||||
*
|
||||
* Most commonly, class names are added to controls by MixItUp to indicate that
|
||||
* the control is active so that it can be styled accordingly - `'mixitup-control-active'` by default.
|
||||
*
|
||||
* Using a "BEM" like structure, each classname is broken into the three parts:
|
||||
* a block namespace (`'mixitup'`), an element name (e.g. `'control'`), and an optional modifier
|
||||
* name (e.g. `'active'`) reflecting the state of the element.
|
||||
*
|
||||
* By default, each part of the classname is concatenated together using single hyphens as
|
||||
* delineators, but this can be easily customised to match the naming convention and style of
|
||||
* your project.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup.Config
|
||||
* @name classNames
|
||||
* @namespace
|
||||
* @public
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.ConfigClassNames = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
/**
|
||||
* The "block" portion, or top-level namespace added to the start of any class names created by MixItUp.
|
||||
*
|
||||
* @example <caption>Example 1: changing the `config.classNames.block` value</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* classNames: {
|
||||
* block: 'portfolio'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Active control output: "portfolio-control-active"
|
||||
*
|
||||
* @example <caption>Example 2: Removing `config.classNames.block`</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* classNames: {
|
||||
* block: ''
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Active control output: "control-active"
|
||||
*
|
||||
* @name block
|
||||
* @memberof mixitup.Config.classNames
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'mixitup'
|
||||
*/
|
||||
|
||||
this.block = 'mixitup';
|
||||
|
||||
/**
|
||||
* The "element" portion of the class name added to container.
|
||||
*
|
||||
* @name elementContainer
|
||||
* @memberof mixitup.Config.classNames
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'container'
|
||||
*/
|
||||
|
||||
this.elementContainer = 'container';
|
||||
|
||||
/**
|
||||
* The "element" portion of the class name added to filter controls.
|
||||
*
|
||||
* By default, all filter, sort, multimix and toggle controls take the same element value of `'control'`, but
|
||||
* each type's element value can be individually overwritten to match the unique classNames of your controls as needed.
|
||||
*
|
||||
* @example <caption>Example 1: changing the `config.classNames.elementFilter` value</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* classNames: {
|
||||
* elementFilter: 'filter'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Active filter output: "mixitup-filter-active"
|
||||
*
|
||||
* @example <caption>Example 2: changing the `config.classNames.block` and `config.classNames.elementFilter` values</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* classNames: {
|
||||
* block: 'portfolio',
|
||||
* elementFilter: 'filter'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Active filter output: "portfolio-filter-active"
|
||||
*
|
||||
* @name elementFilter
|
||||
* @memberof mixitup.Config.classNames
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'control'
|
||||
*/
|
||||
|
||||
this.elementFilter = 'control';
|
||||
|
||||
/**
|
||||
* The "element" portion of the class name added to sort controls.
|
||||
*
|
||||
* By default, all filter, sort, multimix and toggle controls take the same element value of `'control'`, but
|
||||
* each type's element value can be individually overwritten to match the unique classNames of your controls as needed.
|
||||
*
|
||||
* @example <caption>Example 1: changing the `config.classNames.elementSort` value</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* classNames: {
|
||||
* elementSort: 'sort'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Active sort output: "mixitup-sort-active"
|
||||
*
|
||||
* @example <caption>Example 2: changing the `config.classNames.block` and `config.classNames.elementSort` values</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* classNames: {
|
||||
* block: 'portfolio',
|
||||
* elementSort: 'sort'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Active sort output: "portfolio-sort-active"
|
||||
*
|
||||
* @name elementSort
|
||||
* @memberof mixitup.Config.classNames
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'control'
|
||||
*/
|
||||
|
||||
this.elementSort = 'control';
|
||||
|
||||
/**
|
||||
* The "element" portion of the class name added to multimix controls.
|
||||
*
|
||||
* By default, all filter, sort, multimix and toggle controls take the same element value of `'control'`, but
|
||||
* each type's element value can be individually overwritten to match the unique classNames of your controls as needed.
|
||||
*
|
||||
* @example <caption>Example 1: changing the `config.classNames.elementMultimix` value</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* classNames: {
|
||||
* elementMultimix: 'multimix'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Active multimix output: "mixitup-multimix-active"
|
||||
*
|
||||
* @example <caption>Example 2: changing the `config.classNames.block` and `config.classNames.elementMultimix` values</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* classNames: {
|
||||
* block: 'portfolio',
|
||||
* elementSort: 'multimix'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Active multimix output: "portfolio-multimix-active"
|
||||
*
|
||||
* @name elementMultimix
|
||||
* @memberof mixitup.Config.classNames
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'control'
|
||||
*/
|
||||
|
||||
this.elementMultimix = 'control';
|
||||
|
||||
/**
|
||||
* The "element" portion of the class name added to toggle controls.
|
||||
*
|
||||
* By default, all filter, sort, multimix and toggle controls take the same element value of `'control'`, but
|
||||
* each type's element value can be individually overwritten to match the unique classNames of your controls as needed.
|
||||
*
|
||||
* @example <caption>Example 1: changing the `config.classNames.elementToggle` value</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* classNames: {
|
||||
* elementToggle: 'toggle'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Active toggle output: "mixitup-toggle-active"
|
||||
*
|
||||
* @example <caption>Example 2: changing the `config.classNames.block` and `config.classNames.elementToggle` values</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* classNames: {
|
||||
* block: 'portfolio',
|
||||
* elementToggle: 'toggle'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Active toggle output: "portfolio-toggle-active"
|
||||
*
|
||||
* @name elementToggle
|
||||
* @memberof mixitup.Config.classNames
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'control'
|
||||
*/
|
||||
|
||||
this.elementToggle = 'control';
|
||||
|
||||
/**
|
||||
* The "modifier" portion of the class name added to active controls.
|
||||
* @name modifierActive
|
||||
* @memberof mixitup.Config.classNames
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'active'
|
||||
*/
|
||||
|
||||
this.modifierActive = 'active';
|
||||
|
||||
/**
|
||||
* The "modifier" portion of the class name added to disabled controls.
|
||||
*
|
||||
* @name modifierDisabled
|
||||
* @memberof mixitup.Config.classNames
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'disabled'
|
||||
*/
|
||||
|
||||
this.modifierDisabled = 'disabled';
|
||||
|
||||
/**
|
||||
* The "modifier" portion of the class name added to the container when in a "failed" state.
|
||||
*
|
||||
* @name modifierFailed
|
||||
* @memberof mixitup.Config.classNames
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'failed'
|
||||
*/
|
||||
|
||||
this.modifierFailed = 'failed';
|
||||
|
||||
/**
|
||||
* The delineator used between the "block" and "element" portions of any class name added by MixItUp.
|
||||
*
|
||||
* If the block portion is ommited by setting it to an empty string, no delineator will be added.
|
||||
*
|
||||
* @example <caption>Example: changing the delineator to match BEM convention</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* classNames: {
|
||||
* delineatorElement: '__'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // example active control output: "mixitup__control-active"
|
||||
*
|
||||
* @name delineatorElement
|
||||
* @memberof mixitup.Config.classNames
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default '-'
|
||||
*/
|
||||
|
||||
this.delineatorElement = '-';
|
||||
|
||||
/**
|
||||
* The delineator used between the "element" and "modifier" portions of any class name added by MixItUp.
|
||||
*
|
||||
* If the element portion is ommited by setting it to an empty string, no delineator will be added.
|
||||
*
|
||||
* @example <caption>Example: changing both delineators to match BEM convention</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* classNames: {
|
||||
* delineatorElement: '__'
|
||||
* delineatorModifier: '--'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Active control output: "mixitup__control--active"
|
||||
*
|
||||
* @name delineatorModifier
|
||||
* @memberof mixitup.Config.classNames
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default '-'
|
||||
*/
|
||||
|
||||
this.delineatorModifier = '-';
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ConfigClassNames);
|
||||
|
||||
mixitup.ConfigClassNames.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ConfigClassNames.prototype.constructor = mixitup.ConfigClassNames;
|
||||
220
mixitup-3.3.1/src/config-controls.js
Normal file
220
mixitup-3.3.1/src/config-controls.js
Normal file
@@ -0,0 +1,220 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* A group of properties relating to clickable control elements.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup.Config
|
||||
* @name controls
|
||||
* @namespace
|
||||
* @public
|
||||
* @since 2.0.0
|
||||
*/
|
||||
|
||||
mixitup.ConfigControls = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not controls should be enabled for the mixer instance.
|
||||
*
|
||||
* If `true` (default behavior), MixItUp will search the DOM for any clickable elements with
|
||||
* `data-filter`, `data-sort` or `data-toggle` attributes, and bind them for click events.
|
||||
*
|
||||
* If `false`, no click handlers will be bound, and all functionality must therefore be performed
|
||||
* via the mixer's API methods.
|
||||
*
|
||||
* If you do not intend to use the default controls, setting this property to `false` will
|
||||
* marginally improve the startup time of your mixer instance, and will also prevent any other active
|
||||
* mixer instances in the DOM which are bound to controls from controlling the instance.
|
||||
*
|
||||
* @example <caption>Example: Disabling controls</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* controls: {
|
||||
* enable: false
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // With the default controls disabled, we can only control
|
||||
* // the mixer via its API methods, e.g.:
|
||||
*
|
||||
* mixer.filter('.cat-1');
|
||||
*
|
||||
* @name enable
|
||||
* @memberof mixitup.Config.controls
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
*/
|
||||
|
||||
this.enable = true;
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not to use event delegation when binding click events
|
||||
* to the default controls.
|
||||
*
|
||||
* If `false` (default behavior), each control button in the DOM will be found and
|
||||
* individually bound when a mixer is instantiated, with their corresponding actions
|
||||
* cached for performance.
|
||||
*
|
||||
* If `true`, a single click handler will be applied to the `window` (or container element - see
|
||||
* `config.controls.scope`), and any click events triggered by elements with `data-filter`,
|
||||
* `data-sort` or `data-toggle` attributes present will be handled as they propagate upwards.
|
||||
*
|
||||
* If you require a user interface where control buttons may be added, removed, or changed during the
|
||||
* lifetime of a mixer, `controls.live` should be set to `true`. There is a marginal but unavoidable
|
||||
* performance deficit when using live controls, as the value of each control button must be read
|
||||
* from the DOM in real time once the click event has propagated.
|
||||
*
|
||||
* @example <caption>Example: Setting live controls</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* controls: {
|
||||
* live: true
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Control buttons can now be added, remove and changed without breaking
|
||||
* // the mixer's UI
|
||||
*
|
||||
* @name live
|
||||
* @memberof mixitup.Config.controls
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
*/
|
||||
|
||||
this.live = false;
|
||||
|
||||
/**
|
||||
* A string dictating the "scope" to use when binding or querying the default controls. The available
|
||||
* values are `'global'` or `'local'`.
|
||||
*
|
||||
* When set to `'global'` (default behavior), MixItUp will query the entire document for control buttons
|
||||
* to bind, or delegate click events from (see `config.controls.live`).
|
||||
*
|
||||
* When set to `'local'`, MixItUp will only query (or bind click events to) its own container element.
|
||||
* This may be desireable if you require multiple active mixer instances within the same document, with
|
||||
* controls that would otherwise intefere with each other if scoped globally.
|
||||
*
|
||||
* Conversely, if you wish to control multiple instances with a single UI, you would create one
|
||||
* set of controls and keep the controls scope of each mixer set to `global`.
|
||||
*
|
||||
* @example <caption>Example: Setting 'local' scoped controls</caption>
|
||||
* var mixerOne = mixitup(containerOne, {
|
||||
* controls: {
|
||||
* scope: 'local'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* var mixerTwo = mixitup(containerTwo, {
|
||||
* controls: {
|
||||
* scope: 'local'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Both mixers can now exist within the same document with
|
||||
* // isolated controls placed within their container elements.
|
||||
*
|
||||
* @name scope
|
||||
* @memberof mixitup.Config.controls
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'global'
|
||||
*/
|
||||
|
||||
this.scope = 'global'; // enum: ['local' ,'global']
|
||||
|
||||
/**
|
||||
* A string dictating the type of logic to apply when concatenating the filter selectors of
|
||||
* active toggle buttons (i.e. any clickable element with a `data-toggle` attribute).
|
||||
*
|
||||
* If set to `'or'` (default behavior), selectors will be concatenated together as
|
||||
* a comma-seperated list. For example:
|
||||
*
|
||||
* `'.cat-1, .cat-2'` (shows any elements matching `'.cat-1'` OR `'.cat-2'`)
|
||||
*
|
||||
* If set to `'and'`, selectors will be directly concatenated together. For example:
|
||||
*
|
||||
* `'.cat-1.cat-2'` (shows any elements which match both `'.cat-1'` AND `'.cat-2'`)
|
||||
*
|
||||
* @example <caption>Example: Setting "and" toggle logic</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* controls: {
|
||||
* toggleLogic: 'and'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name toggleLogic
|
||||
* @memberof mixitup.Config.controls
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'or'
|
||||
*/
|
||||
|
||||
this.toggleLogic = 'or'; // enum: ['or', 'and']
|
||||
|
||||
/**
|
||||
* A string dictating the filter behavior when all toggles are inactive.
|
||||
*
|
||||
* When set to `'all'` (default behavior), *all* targets will be shown by default
|
||||
* when no toggles are active, or at the moment all active toggles are toggled off.
|
||||
*
|
||||
* When set to `'none'`, no targets will be shown by default when no toggles are
|
||||
* active, or at the moment all active toggles are toggled off.
|
||||
*
|
||||
* @example <caption>Example 1: Setting the default toggle behavior to `'all'`</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* controls: {
|
||||
* toggleDefault: 'all'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* mixer.toggleOn('.cat-2')
|
||||
* .then(function() {
|
||||
* // Deactivate all active toggles
|
||||
*
|
||||
* return mixer.toggleOff('.cat-2')
|
||||
* })
|
||||
* .then(function(state) {
|
||||
* console.log(state.activeFilter.selector); // 'all'
|
||||
* console.log(state.totalShow); // 12
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 2: Setting the default toggle behavior to `'none'`</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* controls: {
|
||||
* toggleDefault: 'none'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* mixer.toggleOn('.cat-2')
|
||||
* .then(function() {
|
||||
* // Deactivate all active toggles
|
||||
*
|
||||
* return mixer.toggleOff('.cat-2')
|
||||
* })
|
||||
* .then(function(state) {
|
||||
* console.log(state.activeFilter.selector); // 'none'
|
||||
* console.log(state.totalShow); // 0
|
||||
* });
|
||||
*
|
||||
* @name toggleDefault
|
||||
* @memberof mixitup.Config.controls
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'all'
|
||||
*/
|
||||
|
||||
this.toggleDefault = 'all'; // enum: ['all', 'none']
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ConfigControls);
|
||||
|
||||
mixitup.ConfigControls.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ConfigControls.prototype.constructor = mixitup.ConfigControls;
|
||||
118
mixitup-3.3.1/src/config-data.js
Normal file
118
mixitup-3.3.1/src/config-data.js
Normal file
@@ -0,0 +1,118 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* A group of properties relating to MixItUp's dataset API.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup.Config
|
||||
* @name data
|
||||
* @namespace
|
||||
* @public
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.ConfigData = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
/**
|
||||
* A string specifying the name of the key containing your data model's unique
|
||||
* identifier (UID). To use the dataset API, a UID key must be specified and
|
||||
* be present and unique on all objects in the dataset you provide to MixItUp.
|
||||
*
|
||||
* For example, if your dataset is made up of MongoDB documents, the UID
|
||||
* key would be `'id'` or `'_id'`.
|
||||
*
|
||||
* @example <caption>Example: Setting the UID to `'id'`</caption>
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* data: {
|
||||
* uidKey: 'id'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name uidKey
|
||||
* @memberof mixitup.Config.data
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default ''
|
||||
*/
|
||||
|
||||
this.uidKey = '';
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not MixItUp should "dirty check" each object in
|
||||
* your dataset for changes whenever `.dataset()` is called, and re-render any targets
|
||||
* for which a change is found.
|
||||
*
|
||||
* Depending on the complexity of your data model, dirty checking can be expensive
|
||||
* and is therefore disabled by default.
|
||||
*
|
||||
* NB: For changes to be detected, a new immutable instance of the edited model must be
|
||||
* provided to mixitup, rather than manipulating properties on the existing instance.
|
||||
* If your changes are a result of a DB write and read, you will most likely be calling
|
||||
* `.dataset()` with a clean set of objects each time, so this will not be an issue.
|
||||
*
|
||||
* @example <caption>Example: Enabling dirty checking</caption>
|
||||
*
|
||||
* var myDataset = [
|
||||
* {
|
||||
* id: 0,
|
||||
* title: "Blog Post Title 0"
|
||||
* ...
|
||||
* },
|
||||
* {
|
||||
* id: 1,
|
||||
* title: "Blog Post Title 1"
|
||||
* ...
|
||||
* }
|
||||
* ];
|
||||
*
|
||||
* // Instantiate a mixer with a pre-loaded dataset, and a target renderer
|
||||
* // function defined
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* data: {
|
||||
* uidKey: 'id',
|
||||
* dirtyCheck: true
|
||||
* },
|
||||
* load: {
|
||||
* dataset: myDataset
|
||||
* },
|
||||
* render: {
|
||||
* target: function() { ... }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // For illustration, we will clone and edit the second object in the dataset.
|
||||
* // NB: this would typically be done server-side in response to a DB update,
|
||||
* and then re-queried via an API.
|
||||
*
|
||||
* myDataset[1] = Object.assign({}, myDataset[1]);
|
||||
*
|
||||
* myDataset[1].title = 'Blog Post Title 11';
|
||||
*
|
||||
* mixer.dataset(myDataset)
|
||||
* .then(function() {
|
||||
* // the target with ID "1", will be re-rendered reflecting its new title
|
||||
* });
|
||||
*
|
||||
* @name dirtyCheck
|
||||
* @memberof mixitup.Config.data
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
*/
|
||||
|
||||
this.dirtyCheck = false;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ConfigData);
|
||||
|
||||
mixitup.ConfigData.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ConfigData.prototype.constructor = mixitup.ConfigData;
|
||||
106
mixitup-3.3.1/src/config-debug.js
Normal file
106
mixitup-3.3.1/src/config-debug.js
Normal file
@@ -0,0 +1,106 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* A group of properties allowing the toggling of various debug features.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup.Config
|
||||
* @name debug
|
||||
* @namespace
|
||||
* @public
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.ConfigDebug = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not the mixer instance returned by the
|
||||
* `mixitup()` factory function should expose private properties and methods.
|
||||
*
|
||||
* By default, mixer instances only expose their public API, but enabling
|
||||
* debug mode will give you access to various mixer internals which may aid
|
||||
* in debugging, or the authoring of extensions.
|
||||
*
|
||||
* @example <caption>Example: Enabling debug mode</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* debug: {
|
||||
* enable: true
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Private properties and methods will now be visible on the mixer instance:
|
||||
*
|
||||
* console.log(mixer);
|
||||
*
|
||||
* @name enable
|
||||
* @memberof mixitup.Config.debug
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
*/
|
||||
|
||||
this.enable = false;
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not warnings should be shown when various
|
||||
* common gotchas occur.
|
||||
*
|
||||
* Warnings are intended to provide insights during development when something
|
||||
* occurs that is not a fatal, but may indicate an issue with your integration,
|
||||
* and are therefore turned on by default. However, you may wish to disable
|
||||
* them in production.
|
||||
*
|
||||
* @example <caption>Example 1: Disabling warnings</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* debug: {
|
||||
* showWarnings: false
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 2: Disabling warnings based on environment</caption>
|
||||
*
|
||||
* var showWarnings = myAppConfig.environment === 'development' ? true : false;
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* debug: {
|
||||
* showWarnings: showWarnings
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name showWarnings
|
||||
* @memberof mixitup.Config.debug
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
*/
|
||||
|
||||
this.showWarnings = true;
|
||||
|
||||
/**
|
||||
* Used for server-side testing only.
|
||||
*
|
||||
* @private
|
||||
* @name fauxAsync
|
||||
* @memberof mixitup.Config.debug
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
*/
|
||||
|
||||
this.fauxAsync = false;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ConfigDebug);
|
||||
|
||||
mixitup.ConfigDebug.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ConfigDebug.prototype.constructor = mixitup.ConfigDebug;
|
||||
144
mixitup-3.3.1/src/config-layout.js
Normal file
144
mixitup-3.3.1/src/config-layout.js
Normal file
@@ -0,0 +1,144 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* A group of properties relating to the layout of the container.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup.Config
|
||||
* @name layout
|
||||
* @namespace
|
||||
* @public
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.ConfigLayout = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
/**
|
||||
* A boolean dictating whether or not mixitup should query all descendants
|
||||
* of the container for targets, or only immediate children.
|
||||
*
|
||||
* By default, mixitup will query all descendants matching the
|
||||
* `selectors.target` selector when indexing targets upon instantiation.
|
||||
* This allows for targets to be nested inside a sub-container which is
|
||||
* useful when ring-fencing targets from locally scoped controls in your
|
||||
* markup (see `controls.scope`).
|
||||
*
|
||||
* However, if you are building a more complex UI requiring the nesting
|
||||
* of mixers within mixers, you will most likely want to limit targets to
|
||||
* immediate children of the container by setting this property to `false`.
|
||||
*
|
||||
* @example <caption>Example: Restricting targets to immediate children</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* layout: {
|
||||
* allowNestedTargets: false
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name allowNestedTargets
|
||||
* @memberof mixitup.Config.layout
|
||||
* @instance
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
*/
|
||||
|
||||
this.allowNestedTargets = true;
|
||||
|
||||
/**
|
||||
* A string specifying an optional class name to apply to the container when in
|
||||
* its default state.
|
||||
*
|
||||
* By changing this class name or adding a class name to the container via the
|
||||
* `.changeLayout()` API method, the CSS layout of the container can be changed,
|
||||
* and MixItUp will attemp to gracefully animate the container and its targets
|
||||
* between states.
|
||||
*
|
||||
* @example <caption>Example 1: Specifying a container class name</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* layout: {
|
||||
* containerClassName: 'grid'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 2: Changing the default class name with `.changeLayout()`</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* layout: {
|
||||
* containerClassName: 'grid'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* mixer.changeLayout('list')
|
||||
* .then(function(state) {
|
||||
* console.log(state.activeContainerClass); // "list"
|
||||
* });
|
||||
*
|
||||
* @name containerClassName
|
||||
* @memberof mixitup.Config.layout
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default ''
|
||||
*/
|
||||
|
||||
this.containerClassName = '';
|
||||
|
||||
/**
|
||||
* A reference to a non-target sibling element after which to insert targets
|
||||
* when there are no targets in the container.
|
||||
*
|
||||
* @example <caption>Example: Setting a `siblingBefore` reference element</caption>
|
||||
*
|
||||
* var addButton = containerEl.querySelector('button');
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* layout: {
|
||||
* siblingBefore: addButton
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name siblingBefore
|
||||
* @memberof mixitup.Config.layout
|
||||
* @instance
|
||||
* @type {HTMLElement}
|
||||
* @default null
|
||||
*/
|
||||
|
||||
this.siblingBefore = null;
|
||||
|
||||
/**
|
||||
* A reference to a non-target sibling element before which to insert targets
|
||||
* when there are no targets in the container.
|
||||
*
|
||||
* @example <caption>Example: Setting an `siblingAfter` reference element</caption>
|
||||
*
|
||||
* var gap = containerEl.querySelector('.gap');
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* layout: {
|
||||
* siblingAfter: gap
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name siblingAfter
|
||||
* @memberof mixitup.Config.layout
|
||||
* @instance
|
||||
* @type {HTMLElement}
|
||||
* @default null
|
||||
*/
|
||||
|
||||
this.siblingAfter = null;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ConfigLayout);
|
||||
|
||||
mixitup.ConfigLayout.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ConfigLayout.prototype.constructor = mixitup.ConfigLayout;
|
||||
127
mixitup-3.3.1/src/config-load.js
Normal file
127
mixitup-3.3.1/src/config-load.js
Normal file
@@ -0,0 +1,127 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* A group of properties defining the initial state of the mixer on load (instantiation).
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup.Config
|
||||
* @name load
|
||||
* @namespace
|
||||
* @public
|
||||
* @since 2.0.0
|
||||
*/
|
||||
|
||||
mixitup.ConfigLoad = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
/**
|
||||
* A string defining any filtering to be statically applied to the mixer on load.
|
||||
* As per the `.filter()` API, this can be any valid selector string, or the
|
||||
* values `'all'` or `'none'`.
|
||||
*
|
||||
* @example <caption>Example 1: Defining an initial filter selector to be applied on load</caption>
|
||||
*
|
||||
* // The mixer will show only those targets matching '.category-a' on load.
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* load: {
|
||||
* filter: '.category-a'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 2: Hiding all targets on load</caption>
|
||||
*
|
||||
* // The mixer will show hide all targets on load.
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* load: {
|
||||
* filter: 'none'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name filter
|
||||
* @memberof mixitup.Config.load
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'all'
|
||||
*/
|
||||
|
||||
this.filter = 'all';
|
||||
|
||||
/**
|
||||
* A string defining any sorting to be statically applied to the mixer on load.
|
||||
* As per the `.sort()` API, this should be a valid "sort string" made up of
|
||||
* an attribute to sort by (or `'default'`) followed by an optional sorting
|
||||
* order, or the value `'random'`;
|
||||
*
|
||||
* @example <caption>Example: Defining sorting to be applied on load</caption>
|
||||
*
|
||||
* // The mixer will sort the container by the value of the `data-published-date`
|
||||
* // attribute, in descending order.
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* load: {
|
||||
* sort: 'published-date:desc'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name sort
|
||||
* @memberof mixitup.Config.load
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default 'default:asc'
|
||||
*/
|
||||
|
||||
this.sort = 'default:asc';
|
||||
|
||||
/**
|
||||
* An array of objects representing the underlying data of any pre-rendered targets,
|
||||
* when using the `.dataset()` API.
|
||||
*
|
||||
* NB: If targets are pre-rendered when the mixer is instantiated, this must be set.
|
||||
*
|
||||
* @example <caption>Example: Defining the initial underyling dataset</caption>
|
||||
*
|
||||
* var myDataset = [
|
||||
* {
|
||||
* id: 0,
|
||||
* title: "Blog Post Title 0",
|
||||
* ...
|
||||
* },
|
||||
* {
|
||||
* id: 1,
|
||||
* title: "Blog Post Title 1",
|
||||
* ...
|
||||
* }
|
||||
* ];
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* data: {
|
||||
* uidKey: 'id'
|
||||
* },
|
||||
* load: {
|
||||
* dataset: myDataset
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name dataset
|
||||
* @memberof mixitup.Config.load
|
||||
* @instance
|
||||
* @type {Array.<object>}
|
||||
* @default null
|
||||
*/
|
||||
|
||||
this.dataset = null;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ConfigLoad);
|
||||
|
||||
mixitup.ConfigLoad.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ConfigLoad.prototype.constructor = mixitup.ConfigLoad;
|
||||
100
mixitup-3.3.1/src/config-render.js
Normal file
100
mixitup-3.3.1/src/config-render.js
Normal file
@@ -0,0 +1,100 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* A group of optional render functions for creating and updating elements.
|
||||
*
|
||||
* All render functions receive a data object, and should return a valid HTML string.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup.Config
|
||||
* @name render
|
||||
* @namespace
|
||||
* @public
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.ConfigRender = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
/**
|
||||
* A function returning an HTML string representing a target element, or a reference to a
|
||||
* single DOM element.
|
||||
*
|
||||
* The function is invoked as part of the `.dataset()` API, whenever a new item is added
|
||||
* to the dataset, or an item in the dataset changes (if `dataset.dirtyCheck` is enabled).
|
||||
*
|
||||
* The function receives the relevant dataset item as its first parameter.
|
||||
*
|
||||
* @example <caption>Example 1: Using string concatenation</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* render: {
|
||||
* target: function(item) {
|
||||
* return (
|
||||
* '<div class="mix">' +
|
||||
* '<h2>' + item.title + '</h2>' +
|
||||
* '</div>'
|
||||
* );
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 2: Using an ES2015 template literal</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* render: {
|
||||
* target: function(item) {
|
||||
* return (
|
||||
* `<div class="mix">
|
||||
* <h2>${item.title}</h2>
|
||||
* </div>`
|
||||
* );
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 3: Using a Handlebars template</caption>
|
||||
* {{{{raw}}}}
|
||||
* var targetTemplate = Handlebars.compile('<div class="mix"><h2>{{title}}</h2></div>');
|
||||
* {{{{/raw}}}}
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* render: {
|
||||
* target: targetTemplate
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 4: Returning a DOM element</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* render: {
|
||||
* target: function(item) {
|
||||
* // Create a single element using your framework's built-in renderer
|
||||
*
|
||||
* var el = ...
|
||||
*
|
||||
* return el;
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name target
|
||||
* @memberof mixitup.Config.render
|
||||
* @instance
|
||||
* @type {function}
|
||||
* @default 'null'
|
||||
*/
|
||||
|
||||
this.target = null;
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ConfigRender);
|
||||
|
||||
mixitup.ConfigRender.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ConfigRender.prototype.constructor = mixitup.ConfigRender;
|
||||
93
mixitup-3.3.1/src/config-selectors.js
Normal file
93
mixitup-3.3.1/src/config-selectors.js
Normal file
@@ -0,0 +1,93 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* A group of properties defining the selectors used to query elements within a mixitup container.
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup.Config
|
||||
* @name selectors
|
||||
* @namespace
|
||||
* @public
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.ConfigSelectors = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
/**
|
||||
* A selector string used to query and index target elements within the container.
|
||||
*
|
||||
* By default, the class selector `'.mix'` is used, but this can be changed to an
|
||||
* attribute or element selector to match the style of your project.
|
||||
*
|
||||
* @example <caption>Example 1: Changing the target selector</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* selectors: {
|
||||
* target: '.portfolio-item'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @example <caption>Example 2: Using an attribute selector as a target selector</caption>
|
||||
*
|
||||
* // The mixer will search for any children with the attribute `data-ref="mix"`
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* selectors: {
|
||||
* target: '[data-ref="mix"]'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @name target
|
||||
* @memberof mixitup.Config.selectors
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default '.mix'
|
||||
*/
|
||||
|
||||
this.target = '.mix';
|
||||
|
||||
/**
|
||||
* A optional selector string used to add further specificity to the querying of control elements,
|
||||
* in addition to their mandatory data attribute (e.g. `data-filter`, `data-toggle`, `data-sort`).
|
||||
*
|
||||
* This can be used if other elements in your document must contain the above attributes
|
||||
* (e.g. for use in third-party scripts), and would otherwise interfere with MixItUp. Adding
|
||||
* an additional `control` selector of your choice allows MixItUp to restrict event handling
|
||||
* to only those elements matching the defined selector.
|
||||
*
|
||||
* @name control
|
||||
* @memberof mixitup.Config.selectors
|
||||
* @instance
|
||||
* @type {string}
|
||||
* @default ''
|
||||
*
|
||||
* @example <caption>Example 1: Adding a `selectors.control` selector</caption>
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* selectors: {
|
||||
* control: '.mixitup-control'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // Will not be handled:
|
||||
* // <button data-filter=".category-a"></button>
|
||||
*
|
||||
* // Will be handled:
|
||||
* // <button class="mixitup-control" data-filter=".category-a"></button>
|
||||
*/
|
||||
|
||||
this.control = '';
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ConfigSelectors);
|
||||
|
||||
mixitup.ConfigSelectors.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ConfigSelectors.prototype.constructor = mixitup.ConfigSelectors;
|
||||
24
mixitup-3.3.1/src/config-templates.js
Normal file
24
mixitup-3.3.1/src/config-templates.js
Normal file
@@ -0,0 +1,24 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @memberof mixitup
|
||||
* @private
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
||||
mixitup.ConfigTemplates = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ConfigTemplates);
|
||||
|
||||
mixitup.ConfigTemplates.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ConfigTemplates.prototype.constructor = mixitup.ConfigTemplates;
|
||||
77
mixitup-3.3.1/src/config.js
Normal file
77
mixitup-3.3.1/src/config.js
Normal file
@@ -0,0 +1,77 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* `mixitup.Config` is an interface used for customising the functionality of a
|
||||
* mixer instance. It is organised into several semantically distinct sub-objects,
|
||||
* each one pertaining to a particular aspect of MixItUp functionality.
|
||||
*
|
||||
* An object literal containing any or all of the available properies,
|
||||
* known as the "configuration object", can be passed as the second parameter to
|
||||
* the `mixitup` factory function when creating a mixer instance to customise its
|
||||
* functionality as needed.
|
||||
*
|
||||
* If no configuration object is passed, the mixer instance will take on the default
|
||||
* configuration values detailed below.
|
||||
*
|
||||
* @example <caption>Example 1: Creating and passing the configuration object</caption>
|
||||
* // Create a configuration object with desired values
|
||||
*
|
||||
* var config = {
|
||||
* animation: {
|
||||
* enable: false
|
||||
* },
|
||||
* selectors: {
|
||||
* target: '.item'
|
||||
* }
|
||||
* };
|
||||
*
|
||||
* // Pass the configuration object to the mixitup factory function
|
||||
*
|
||||
* var mixer = mixitup(containerEl, config);
|
||||
*
|
||||
* @example <caption>Example 2: Passing the configuration object inline</caption>
|
||||
* // Typically, the configuration object is passed inline for brevity.
|
||||
*
|
||||
* var mixer = mixitup(containerEl, {
|
||||
* controls: {
|
||||
* live: true,
|
||||
* toggleLogic: 'and'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
*
|
||||
* @constructor
|
||||
* @memberof mixitup
|
||||
* @namespace
|
||||
* @public
|
||||
* @since 2.0.0
|
||||
*/
|
||||
|
||||
mixitup.Config = function() {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
this.animation = new mixitup.ConfigAnimation();
|
||||
this.behavior = new mixitup.ConfigBehavior();
|
||||
this.callbacks = new mixitup.ConfigCallbacks();
|
||||
this.controls = new mixitup.ConfigControls();
|
||||
this.classNames = new mixitup.ConfigClassNames();
|
||||
this.data = new mixitup.ConfigData();
|
||||
this.debug = new mixitup.ConfigDebug();
|
||||
this.layout = new mixitup.ConfigLayout();
|
||||
this.load = new mixitup.ConfigLoad();
|
||||
this.selectors = new mixitup.ConfigSelectors();
|
||||
this.render = new mixitup.ConfigRender();
|
||||
this.templates = new mixitup.ConfigTemplates();
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.Config);
|
||||
|
||||
mixitup.Config.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.Config.prototype.constructor = mixitup.Config;
|
||||
42
mixitup-3.3.1/src/control-definition.js
Normal file
42
mixitup-3.3.1/src/control-definition.js
Normal file
@@ -0,0 +1,42 @@
|
||||
/* global mixitup, h */
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @memberof mixitup
|
||||
* @private
|
||||
* @since 3.0.0
|
||||
* @param {string} type
|
||||
* @param {string} selector
|
||||
* @param {boolean} [live]
|
||||
* @param {string} [parent]
|
||||
* An optional string representing the name of the mixer.dom property containing a reference to a parent element.
|
||||
*/
|
||||
|
||||
mixitup.ControlDefinition = function(type, selector, live, parent) {
|
||||
mixitup.Base.call(this);
|
||||
|
||||
this.callActions('beforeConstruct');
|
||||
|
||||
this.type = type;
|
||||
this.selector = selector;
|
||||
this.live = live || false;
|
||||
this.parent = parent || '';
|
||||
|
||||
this.callActions('afterConstruct');
|
||||
|
||||
h.freeze(this);
|
||||
h.seal(this);
|
||||
};
|
||||
|
||||
mixitup.BaseStatic.call(mixitup.ControlDefinition);
|
||||
|
||||
mixitup.ControlDefinition.prototype = Object.create(mixitup.Base.prototype);
|
||||
|
||||
mixitup.ControlDefinition.prototype.constructor = mixitup.ControlDefinition;
|
||||
|
||||
mixitup.controlDefinitions = [];
|
||||
|
||||
mixitup.controlDefinitions.push(new mixitup.ControlDefinition('multimix', '[data-filter][data-sort]'));
|
||||
mixitup.controlDefinitions.push(new mixitup.ControlDefinition('filter', '[data-filter]'));
|
||||
mixitup.controlDefinitions.push(new mixitup.ControlDefinition('sort', '[data-sort]'));
|
||||
mixitup.controlDefinitions.push(new mixitup.ControlDefinition('toggle', '[data-toggle]'));
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user