Merge pull request #1738 from vogdb/issue-1738

Introduce external API to jquery.clipSlide.
cargomedia · Apr 21, 2015 · 21deb49 · 21deb49
2 parents 61df383 + 64a2a62
commit 21deb49
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 41 deletions.
diff --git a/client-vendor/after-body/jquery.clipSlide/jquery.clipSlide.css b/client-vendor/after-body/jquery.clipSlide/jquery.clipSlide.css
@@ -1,6 +1,17 @@
 .clipSlide {
-	overflow: hidden;
+  overflow: hidden;
 }
+
 .clipSlide-handle {
-	background-color: #ffffff;
+  background-color: #ffffff;
+}
+
+.clipSlide.clipSlide-enabled {
+  position: relative;
+}
+
+.clipSlide.clipSlide-enabled .clipSlide-handle {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
 }
diff --git a/client-vendor/after-body/jquery.clipSlide/jquery.clipSlide.js b/client-vendor/after-body/jquery.clipSlide/jquery.clipSlide.js
@@ -2,43 +2,94 @@
  * Author: CM
  */
 (function($) {
-	$.fn.clipSlide = function(speed) {
-		var speed = speed || 'fast';
-		return this.each(function() {
-			var $this = $(this);
-			if ($this.data('clipSlide')) {
-				return;
-			}
-
-			$this.addClass('clipSlide').data('clipSlide', true);
-			var $content = $this.children();
-			$content.css({display: 'block'});
-
-			$this.imagesLoaded().always(function() {
-				if ($this.height() < $content.outerHeight(true)) {
-					var $handle = $('<a href="javascript:;" class="clipSlide-handle"><div class="icon icon-arrow-down"></div></a>').appendTo($this);
-
-					$this.css({
-						position: 'relative'
-					});
-					$handle.css({
-						position: 'absolute',
-						bottom: '0',
-						width: '100%'
-					});
-
-					$handle.on("click.clipSlide", function() {
-						$this.height($this.height());
-						$this.css('max-height', 'none');
-						$this.animate({
-							'height': $content.outerHeight(true)
-						}, speed, function() {
-							$handle.remove();
-							$this.css('height', 'auto');
-						});
-					});
-				}
-			});
-		});
-	};
+  /**
+   * @param {jQuery} $elem
+   * @constructor
+   */
+  function ClipSlide($elem) {
+    /** @type {jQuery} */
+    this.$elem = $elem;
+    /** @type {jQuery} */
+    this.$content = this.$elem.children();
+    /** @type {jQuery} */
+    this.$handle = null;
+
+    this.$elem.addClass('clipSlide');
+    this.$content.css({display: 'block'});
+
+    var self = this;
+    if (this.$elem.find('img').length) {
+      this.$elem.find('img').on('load', function() {
+        self.toggle(false);
+      });
+    } else {
+      self.toggle(false);
+    }
+  }
+
+  /**
+   * @param {Boolean} [state]
+   */
+  ClipSlide.prototype.toggle = function(state) {
+    var $elem = this.$elem;
+    var self = this;
+
+    if (state) {
+      if ($elem.height() < this.$content.outerHeight(true)) {
+        if (!this.isEnabled()) {
+          this.enable();
+        }
+        $elem.height($elem.height());
+        $elem.css('max-height', 'none');
+        $elem.animate({
+          'height': this.$content.outerHeight(true)
+        }, 'fast', function() {
+          self.$handle.toggle(false);
+          $elem.css('height', 'auto');
+        });
+      }
+    } else {
+      if ($elem.height() < this.$content.outerHeight(true)) {
+        if (!this.isEnabled()) {
+          this.enable();
+        }
+        this.$handle.toggle(true);
+      } else {
+        $elem.trigger('toggle.clipSlide');
+      }
+    }
+  };
+
+  ClipSlide.prototype.isEnabled = function() {
+    return this.$elem.hasClass('clipSlide-enabled');
+  };
+
+  ClipSlide.prototype.enable = function() {
+    this.$elem.addClass('clipSlide-enabled');
+    this.$handle = $('<a href="javascript:;" class="clipSlide-handle"><div class="icon icon-arrow-down"></div></a>').appendTo(this.$elem);
+    var self = this;
+    this.$handle.on('click.clipSlide', function() {
+      self.toggle(true);
+      self.$elem.trigger('toggle.clipSlide');
+    });
+  };
+
+  $.fn.clipSlide = function(action, value) {
+    return this.each(function() {
+      var $self = $(this);
+      var instance = $self.data('clipSlide');
+      if (!instance) {
+        instance = new ClipSlide($self);
+        $self.data('clipSlide', instance);
+      }
+
+      switch (action) {
+        case 'toggle':
+          instance.toggle(value);
+          break;
+        default:
+          break;
+      }
+    });
+  };
 })(jQuery);