Improve dimensions logic

Setup dimensions on resize Don't change button text when complete Use velocity instead of css transitions
harlows · Aug 3, 2017 · 43cef51 · 43cef51
1 parent 77d8ba9
commit 43cef51
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 44 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "adapt-stacklist",
   "description": "Items fly in one at a time, alternating from left to right, when the learner clicks a button. Demo available.",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "framework": "^2.0.0",
   "displayName": "Stack List",
   "component": "stacklist",

diff --git a/js/adapt-stacklist.js b/js/adapt-stacklist.js
@@ -5,13 +5,16 @@ define(function(require) {
 
 	var StackList = ComponentView.extend({
 
+	    TRANSITION_TIME: 250,
+
 		events: {
 			"click .stacklist-next": "nextItem"
 		},
 
 		preRender: function() {
 			this.model.set("_stage", -1);
 			this.setupButton();
+			this.listenTo(Adapt, "device:resize", this.setupListItems);
 		},
 
 		postRender: function() {
@@ -31,50 +34,67 @@ define(function(require) {
 		setupListItems: function() {
 
 			// Set item positions alternating R and L
-			var $stacklistItems = this.$(".stacklist-items");
-			$stacklistItems.height($stacklistItems.height());
+            this.$(".stacklist-items").height(this.$(".stacklist-items-inner").height());
 			var $items = this.$(".stacklist-item");
 			var wWin = $(window).width();
 			$items.each(function(i) {
 				var $el = $items.eq(i);
 				var even = i % 2 === 0;
 				var offset = $el.offset();
 				offset.left = even ? - ($el.outerWidth() + 10) : wWin + 10;
-				$el.offset(offset).hide();
+				$el.offset(offset);
 			});
 			this.$(".stacklist-button").show();
 		},
 
+        setupListHeight: function() {
+
+        },
+
 		nextItem: function() {
 			var stage = this.model.get("_stage") + 1;
 			this.setStage(stage);
 		},
 
 		setStage: function(stage) {
 			this.model.set("_stage", stage);
+
 			var continueText = this.model.get("_items")[stage].next || this.model.get("_button").continueText;
-			this.$(".stacklist-next").html(continueText);
+			var isComplete = this.model.get("_items").length - 1 === stage;
+
+			if (!isComplete) {
+                this.$(".stacklist-next").html(continueText);
+            }
+
 			var $item = this.$(".stacklist-item").eq(stage);
-			$item.show();
+            $item.removeClass("visibility-hidden");
 			var h = $item.outerHeight(true);
 
-			this.$(".stacklist-button").css({top: "+=" + h});
-			setTimeout(function() {
-				$item.css({left: 0});
-			}, 250);
+			this.$(".stacklist-button").velocity({top: "+=" + h}, this.TRANSITION_TIME);
+
+			$item.velocity({left: 0}, {
+			    delay: this.TRANSITION_TIME,
+                duration: this.TRANSITION_TIME,
+                complete: function() {
+			        $item.addClass("show");
+                }
+			});
 
-			if (this.model.get("_items").length - 1 === stage) {
+			if (isComplete) {
 				this.onComplete()
 			}
 		},
 
 		onComplete: function () {
 
 			var $button = this.$(".stacklist-button");
-			$button.css({top: $(window).height()});
-			setTimeout(function() {
-				$button.remove();
-			}, 500);
+			$button.velocity({opacity: 0}, {
+			    duration: this.TRANSITION_TIME,
+                queue: false,
+                complete: function() {
+                    $button.remove();
+                }
+			});
 
 			this.setCompletionStatus();
 		}

diff --git a/less/stacklist.less b/less/stacklist.less
@@ -1,27 +1,24 @@
-@stacklist-time: 0.25s;
-@stacklist-item-time: 0.25s;
-
-.stacklist-transition(@time) {
-	-webkit-transition: @time;
-	-moz-transition: @time;
-	-ms-transition: @time;
-	-o-transition: @time;
-	transition: @time;
-}
-
 .stacklist-items {
 	position: relative;
-	margin-bottom: -8px;
-	.stacklist-transition(@stacklist-time);
+	margin-bottom: -@item-margin;
+    height: 0;
+    -webkit-transition: 0.2s;
+    -moz-transition: 0.2s;
+    -ms-transition: 0.2s;
+    -o-transition: 0.2s;
+    transition: 0.2s;
 }
 
 .stacklist-item {
 	position: relative;
 	padding: 20px;
-	margin-bottom: 8px;
+	margin-bottom: @item-margin;
 	background-color: @primary-color;
 	color: @primary-color-inverted;
-	.stacklist-transition(@stacklist-item-time);
+
+    &.show {
+        position: static !important;
+    }
 }
 
 .stacklist-button {
@@ -31,7 +28,6 @@
 	height: 53px;
 	width: 100%;
 	text-align: center;
-	.stacklist-transition(@stacklist-time);
 
 	button {
 		width: 210px;

diff --git a/templates/stacklist.hbs b/templates/stacklist.hbs
@@ -3,19 +3,21 @@
 
     <div class="stacklist-widget component-widget">
         <div class="stacklist-items">
-            {{#each _items}}
-            <div class="stacklist-item">
-                {{#if this.length}}
-                    {{{a11y_text this}}}
-                {{else}}
-                    {{{a11y_text body}}}
-                {{/if}}
-            </div>
-            {{/each}}
-            <div class="stacklist-button">
-                <button class="stacklist-next" aria-label="{{_globals._accessibility._ariaLabels.next}}" role="button">
-	                {{{_button.startText}}}
-                </button>
+            <div class="stacklist-items-inner">
+                {{#each _items}}
+                    <div class="stacklist-item visibility-hidden">
+                        {{#if this.length}}
+                            {{{a11y_text this}}}
+                        {{else}}
+                            {{{a11y_text body}}}
+                        {{/if}}
+                    </div>
+                {{/each}}
+                <div class="stacklist-button">
+                    <button class="stacklist-next" aria-label="{{_globals._accessibility._ariaLabels.next}}" role="button">
+                        {{{_button.startText}}}
+                    </button>
+                </div>
             </div>
         </div>
     </div>