snippet-box - npm Package Compare versions

Comparing version 0.2.0 to 0.4.0

bower.json

 {
   "name": "snippet",
-  "version": "0.2",
+  "version": "0.4.0",
   "authors": [
@@ -5,0 +5,0 @@ "Jamie Henson <[e-mail]>"

dist/js/snippet.js

@@ -0,16 +1,31 @@
+var appendCollapser, appendExpander, feedWords, feedWordsReverse, manipulateContent, removeCollapser, removeExpander, textContents, truncateContent;
+
+textContents = [];
+
 $(document).ready(function() {
-  var initialHeight, initialWidth;
+  var initialHeight, initialWidth, inlineCount;
   initialHeight = $('.snippet-content').css("max-height");
   initialWidth = $('.snippet-content').css("width");
   $('.snippet-reveal').css("line-height", initialHeight);
+  inlineCount = 0;
   $('.snippet-content').each(function() {
-    if ($(this)[0].scrollHeight <= parseInt($(this).css('max-height')) + 10) {
-      $(this).siblings('.snippet-expander').hide();
+    var expander;
+    expander = $(this).siblings('.snippet-expander');
+    if (expander.hasClass('snippet-inline') || expander.hasClass('snippet-inline-animated')) {
+      $(this).data("index", inlineCount);
+      inlineCount++;
+      $(this).css("max-height", "initial");
+      textContents.push($(this).text());
+      return manipulateContent(this);
+    } else {
+      if ($(this)[0].scrollHeight <= parseInt($(this).css('max-height')) + 10) {
+        expander.hide();
+      }
+      $(this).siblings('.snippet-shutter-vertical').css("border-width", parseInt(initialHeight) / 2 + " 0 ");
+      $(this).siblings('.snippet-shutter-horizontal').css("border-width", " 0 " + parseInt(initialWidth) / 2);
+      $(this).siblings('.snippet-shutter-horizontal').css("padding-top", parseInt(initialHeight) / 2);
+      return expander.addClass("closed-fully");
     }
-    $(this).siblings('.snippet-shutter-vertical').css("border-width", parseInt(initialHeight) / 2 + " 0 ");
-    $(this).siblings('.snippet-shutter-horizontal').css("border-width", " 0 " + parseInt(initialWidth) / 2);
-    $(this).siblings('.snippet-shutter-horizontal').css("padding-top", parseInt(initialHeight) / 2);
-    return $(this).siblings('.snippet-expander').addClass("closed-fully");
   });
-  return $('.snippet-expander').click(function() {
+  $('.snippet-expander').click(function() {
     var boxSize, element, openHeight;
@@ -35,6 +50,94 @@ if ($(this).hasClass('open')) {
     $(this).siblings('.snippet-content').css('max-height', boxSize);
-    if ($(this).hasClass("snippet-reveal") || $(this).hasClass("snippet-shutter-horizontal")) {
+    if ($(this).hasClass("snippet-shutter-horizontal")) {
       return $(this).toggleClass("initial");
     }
   });
+  $(document).on("click", ".snippet-inline-collapser", function() {
+    if ($(this).parent().siblings(".snippet-expander").hasClass('snippet-inline-animated')) {
+      return manipulateContent($(this).parent(), true);
+    } else {
+      return manipulateContent($(this).parent());
+    }
+  });
+  return $(document).on("click", ".snippet-inline-expander", function() {
+    if ($(this).parent().siblings(".snippet-expander").hasClass('snippet-inline-animated')) {
+      return manipulateContent($(this).parent(), true, true);
+    } else {
+      return manipulateContent($(this).parent(), false, true);
+    }
+  });
 });
+
+manipulateContent = function(element, animated, expand) {
+  var content, index, lessText, moreText, speed, truncationLength;
+  content = $(element).text();
+  index = $(element).data("index");
+  moreText = $(element).siblings('.snippet-expander').attr("data-expand") || "more";
+  lessText = $(element).siblings(".snippet-expander").attr("data-collapse") || "less";
+  truncationLength = parseInt($(element).siblings('.snippet-expander').attr("data-length")) || 50;
+  speed = parseInt($(element).siblings('.snippet-expander').attr("data-speed")) || 20;
+  if (content.split(" ").length <= truncationLength) {
+    return;
+  }
+  if (animated && expand) {
+    removeExpander(element);
+    return feedWords(element, truncationLength, textContents[index].split(" "), lessText, speed);
+  } else if (expand) {
+    removeExpander(element);
+    $(element).text(textContents[index]);
+    return appendCollapser(element, lessText);
+  } else if (animated) {
+    removeCollapser(element);
+    return feedWordsReverse(element, truncationLength, moreText, speed, index);
+  } else {
+    removeCollapser(element);
+    return truncateContent(element, truncationLength, moreText, index);
+  }
+};
+
+feedWords = function(element, offset, words, label, speed) {
+  if (offset >= words.length - 1) {
+    appendCollapser(element, label);
+    return;
+  }
+  return setTimeout((function() {
+    $(element).append(" " + words.slice(offset + 1, +(offset + speed) + 1 || 9e9).join(" "));
+    return feedWords(element, offset + speed, words, label, speed);
+  }), 1);
+};
+
+feedWordsReverse = function(element, limit, label, speed, index) {
+  var words;
+  words = $(element).text().split(" ");
+  if (words.length <= limit) {
+    truncateContent(element, limit, label, index);
+    return;
+  }
+  return setTimeout((function() {
+    var reduced;
+    reduced = words.slice(0, +(-speed) + 1 || 9e9).join(" ");
+    $(element).text(reduced);
+    return feedWordsReverse(element, limit, label, speed, index);
+  }), 1);
+};
+
+truncateContent = function(element, truncationLength, label, index) {
+  $(element).text(textContents[index].split(" ").slice(0, +truncationLength + 1 || 9e9).join(" "));
+  return appendExpander(element, label);
+};
+
+appendExpander = function(element, label) {
+  return $(element).append("<span class='snippet-inline-expander'>... <a>(" + label + ")</a></span>");
+};
+
+appendCollapser = function(element, label) {
+  return $(element).append("<span class='snippet-inline-collapser'> <a>(" + label + ")</a></span>");
+};
+
+removeExpander = function(element) {
+  return $(element).find(".snippet-inline-expander").remove();
+};
+
+removeCollapser = function(element) {
+  return $(element).find(".snippet-inline-collapser").remove();
+};

example/example.js

@@ -1,2 +0,2 @@
-var style = ["pulldown", "reveal", "shutter-vertical", "shutter-horizontal"];
+var style = ["pulldown", "reveal", "shutter-vertical", "shutter-horizontal", "inline", "inline-animated"];
 var colour = ["text", "default", "primary", "success", "warning", "danger"];
@@ -38,2 +38,12 @@ var size = ["xs", "sm", "md", "lg"];
 
+  $( "#length" ).keyup(function() {
+    $(".snippet-expander").attr("data-length", $(this).val());
+    redoCodebox();
+  });
+
+  $( "#speed" ).keyup(function() {
+    $(".snippet-expander").attr("data-speed", $(this).val());
+    redoCodebox();
+  });
+
   $('.snippet-content').each(function() {
@@ -58,3 +68,2 @@ if ($(this)[0].scrollHeight <= parseInt($(this).css('max-height')) + 10) {
     if (type == "style") {
-
       if (variant == "reveal") {
@@ -83,2 +92,26 @@ $('.snippet-expander').css("line-height", initialHeight);
       }
+
+      if (variant == "inline" || variant == "inline-animated") {
+        $(".demo-wrapper-inline").show();
+        $(".demo-wrapper").hide();
+        $(".style-group").addClass("col-xs-12").removeClass("col-xs-6").removeClass("col-sm-4")
+        $(".alignment-group").hide();
+        $(".colour-group").hide();
+        $(".size-group").hide();
+        $(".tint-group").hide();
+        $(".height-field").hide();
+        $(".length-field").show();
+        $(".speed-field").show();
+      } else {
+        $(".demo-wrapper").show();
+        $(".demo-wrapper-inline").hide();
+        $(".style-group").addClass("col-xs-6").addClass("col-sm-4").removeClass("col-xs-12")
+        $(".alignment-group").show();
+        $(".colour-group").show();
+        $(".size-group").show();
+        $(".tint-group").show();
+        $(".height-field").show();
+        $(".length-field").hide();
+        $(".speed-field").hide();
+      }
     }
@@ -98,2 +131,4 @@
     "\' data-collapse=\'" + $(".snippet-expander").attr("data-collapse") +
+    "\' data-length=\'" + $(".snippet-expander").attr("data-length") +
+    "\' data-speed=\'" + $(".snippet-expander").attr("data-speed") +
     "\'></div>" +
@@ -100,0 +135,0 @@ "\n</div>"

package.json

 {
   "name": "snippet-box",
   "description": "An easy way to glam up your truncated comments/reviews/whatever!",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "main": "Gulpfile.js",
@@ -6,0 +6,0 @@ "directories": {

README.md

 # snippet
+[![Bower](https://img.shields.io/bower/v/snippet.svg)](https://github.com/jamiehenson/snippet)
+[![NPM](https://img.shields.io/npm/v/snippet-box.svg)](https://github.com/jamiehenson/snippet)
+
 An easy way to glam up your truncated comments/reviews/whatever!
+
+For a nice interactive demo, visit: http://jh47.com/snippet/
+
+### Installation
+```
+bower install snippet
+```
+
+```
+npm install snippet-box
+```
+
+Alternatively, download the latest release from here, and include snippet.css and snippet.js from /dist in an appropriate place within your project.
+
+### Usage
+
+It's very easy to set up one of these boxes. Just include snippet.css (or the supplied SASS version) and snippet.js (or the CoffeeScript version) in your page, and then use the following markup:
+
+```
+<div class="snippet-box">
+  <div class="snippet-content" style="max-height: CUSTOM-BOX-HEIGHT-VALUE">
+    CONTENT GOES HERE
+  </div>
+  <div class="snippet-expander"></div>
+</div>
+```
+  
+Append whatever styling classes and data attributes you like to the *snippet-expander* element. Additionally, you can always style the key divs however you like with your own CSS. More information on the provided stuff below:
+
+### Classes
+#### Styles
+- snippet-pulldown
+- snippet-reveal
+- snippet-shutter-vertical
+- snippet-shutter-horizontal
+- snippet-inline
+- snippet-inline-animated
+
+#### Data Attributes
+- data-expand - _(the text used for the "more" button, defaults to "more")_
+- data-collapse - _(the text used for the "less" button, defaults to "less")_
+- data-length - _(the number of characters to shorten to in inline mode, defaults to 50)_
+- data-speed - _(the speed of animation in animated inline mode, defaults to 20 words per frame)_
+
+#### Sizes
+- snippet-xs
+- snippet-sm
+- snippet-md
+- snippet-lg
+
+#### Colours
+- snippet-text
+- snippet-default
+- snippet-primary
+- snippet-success
+- snippet-warning
+- snippet-danger
+
+#### Alignment
+- snippet-left
+- snippet-center
+- snippet-right
+- snippet-full
+
+#### Tint
+- snippet-tint-dark
+- snippet-tint-light
+- snippet-tint-solid
+
+### Dependencies
+Snippet needs jQuery to run. Bower will pull down at least version 2.2.1, but this version isn't a hard requirement.
+
+### Feedback
+This is quite a young project so any contributions or bits of feedback are certainly welcome!

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67354

increased by31.05%

Lines of code

671

increased by26.13%

Number of lines in readme file

80

increased by2566.67%

No dependency changes