From 99ed4e37fe58276fc41deda90dfd40879e47c2d7 Mon Sep 17 00:00:00 2001 From: Glen Cheney Date: Mon, 18 Apr 2016 14:58:12 -0700 Subject: [PATCH] Add ability to customize styles. Rename filtered => visible and concealed => hidden. Prefix shuffle item state classes. Change ClassName => Classes because it's shorter. --- _includes/custom-styles.html | 50 +++++++++ _includes/public-methods.html | 2 +- dist/shuffle.js | 184 ++++++++++++++++++++-------------- dist/shuffle.min.js | 2 +- index.html | 10 ++ src/classes.js | 4 +- src/shuffle-item.js | 54 ++++++---- src/shuffle.js | 119 +++++++++++----------- test/test.js | 30 +++--- 9 files changed, 284 insertions(+), 171 deletions(-) create mode 100644 _includes/custom-styles.html diff --git a/_includes/custom-styles.html b/_includes/custom-styles.html new file mode 100644 index 0000000..64319d2 --- /dev/null +++ b/_includes/custom-styles.html @@ -0,0 +1,50 @@ +

Customizing Styles

+

You can customize the default styles which are applied to Shuffle items upon initialization, before layout, after layout, before hiding, and after hidden.

+

Here are the defaults:

+
+ 
ShuffleItem.Css = {
+  INITIAL: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    visibility: 'visible',
+    'will-change': 'transform',
+  },
+  VISIBLE: {
+    before: {
+      opacity: 1,
+      visibility: 'visible',
+    },
+    after: {},
+  },
+  HIDDEN: {
+    before: {
+      opacity: 0,
+    },
+    after: {
+      visibility: 'hidden',
+    },
+  },
+};
+
+ShuffleItem.Scale = {
+  VISIBLE: 1,
+  HIDDEN: 0.001,
+};
+
+ +

If you wanted to add a 50% red background to every item when they initialize, you could do this:

+
+ 
Shuffle.ShuffleItem.Css.INITIAL.backgroundColor = 'rgba(255, 0, 0, 0.5)';
+
+ +

To set the text color to teal after the item has finished moving:

+
+ 
Shuffle.ShuffleItem.Css.VISIBLE.after.color = 'teal';
+
+ +

You can also customize the scaling effect with visible or hidden items, however, the VISIBLE and HIDDEN values cannot be the exact same.

+ +
+ 
Shuffle.ShuffleItem.Scale.HIDDEN = 0.5;
+
diff --git a/_includes/public-methods.html b/_includes/public-methods.html index 8eb7ab1..48d0543 100644 --- a/_includes/public-methods.html +++ b/_includes/public-methods.html @@ -1,4 +1,4 @@ -

Public Methods

+

Public Methods

A list of the methods available to you and what they do.