v3.1.4

patrickkunka · Jan 4, 2017 · 2ff9173 · 2ff9173
2 parents 1d28237 + fde685a
commit 2ff9173
Show file tree

Hide file tree

Showing 15 changed files with 554 additions and 144 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,30 +1,37 @@
 Change Log
 ==========
 
-## 3.0.0
+## 3.1.4
 
-- Release
+- 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.0.1
+## 3.1.3
 
-- Fixed issue where `layout.containerClassName` is not reflected in state object after instantiation.
+- Exposed `.toggleOn()` and `.toggleOff()` API methods publicly via the mixer facade, as were accidently missed out previously.
 
-## 3.1.0
+## 3.1.2
 
-- Added `selectors.controls` configuration option to allow for further specificity of control querying
-in addition to the mandatory data attributes.
-- Fixed package.json issues.
+- 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.2
+## 3.1.0
 
-- 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"
+- 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.1.3
+## 3.0.1
+
+- Fixed issue where `layout.containerClassName` is not reflected in state object after instantiation.
+
+## 3.0.0
 
-- Exposed `.toggleOn()` and `.toggleOff()` API methods publicly via the mixer facade, as were accidently missed out previously.
+- Release
diff --git a/demos/index.html b/demos/index.html
@@ -10,7 +10,7 @@ <h1>MixItUp Demos</h1>
 
         <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 issues with an existing demo.</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>
 
@@ -44,6 +44,12 @@ <h2>Insertion</h2>
             <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>

diff --git a/demos/mixitup.min.js b/demos/mixitup.min.js
diff --git a/demos/removal-by-reference/index.html b/demos/removal-by-reference/index.html
@@ -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>
diff --git a/demos/removal-by-reference/style.css b/demos/removal-by-reference/style.css
@@ -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));
+    }
+}
+
+