zebra_pin - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

package.json

 {
   "name": "zebra_pin",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "main": "public/javascript/zebra_pin.js",
@@ -30,15 +30,15 @@ "homepage": "https://github.com/stefangabos/Zebra_Pin",
   ],
-  "licenses": [
-    {
-      "type": "LGPL",
-      "url": "https://www.gnu.org/licenses/lgpl-3.0.txt"
-    }
-  ],
+  "license": "LGPL-3.0",
   "devDependencies": {
     "grunt": "*",
+    "grunt-cli": "*",
+    "grunt-contrib-copy": "*",
     "grunt-contrib-jshint": "*",
     "grunt-contrib-uglify": "*",
-    "grunt-cli": "*",
-    "grunt-contrib-watch": "*"
+    "grunt-contrib-watch": "*",
+    "grunt-eslint": "*",
+    "grunt-newer": "*",
+    "grunt-notify": "*",
+    "time-grunt": "*"
   }
 }

README.md

@@ -1,25 +0,29 @@
-##Zebra_Pin
+<img src="https://raw.githubusercontent.com/stefangabos/zebrajs/master/docs/images/logo.png" alt="zebrajs" align="right">
 
-####A lightweight jQuery plugin for pinning any element to the page or to a container element
+# Zebra_Pin
 
-Zebra_Pin is a lightweight (around 2KB minified) and adaptive (things work as expected when you manually resize the browser window) jQuery plugin for pinning elements to the page or to a container element, so that the element stays visible even if the user scrolls the page. This type of elements are also referred to as "fixed position elements" or "sticky elements".
+*A lightweight jQuery plugin for pinning any element to the page or to a container element*
 
-You can use it in your projects to create sticky sidebars, sticky navigation, sticky headers and footers, or anything else you feel the need to make it stick to the page while the user scrolls.
+[![npm](https://img.shields.io/npm/v/zebra_pin.svg)](https://www.npmjs.com/package/zebra_pin) [![Total](https://img.shields.io/npm/dt/zebra_pin.svg)](https://www.npmjs.com/package/zebra_pin) [![Monthly](https://img.shields.io/npm/dm/zebra_pin.svg)](https://www.npmjs.com/package/zebra_pin) [![License](https://img.shields.io/npm/l/zebra_pin.svg)](https://www.npmjs.com/package/zebra_pin)
 
-You can have "hard" pinned elements (elements are pinned to their initial position and stay there), elements that become pinned only when the user scrolls to them, pinned elements that move only inside their parent element.
+Zebra_Pin is a lightweight (2KB minified, ~1KB gzipped) and adaptive (things work as expected when the browser window is resized) jQuery plugin for pinning elements to the page or to a container element, so that the element stays visible even if the user scrolls the page. This type of elements are also referred to as *fixed position elements* or *sticky elements*.
 
-When elements become pinned a CSS class will be added to them, as specified by the plugin's "class_name" property.
+You can use it to create sticky sidebars, sticky navigation, sticky headers and footers, or anything else you feel the need to make it stick to the page while the user scrolls.
 
+You can have *hard* pinned elements - elements are pinned to their initial position and stay there, elements that become pinned only when the user scrolls to them and pinned elements whose movement is restricted to their container element's size.
+
+When elements become pinned a CSS class will be added to them, as specified by the plugin's *class_name* property.
+
 Also, custom events are fired when elements are pinned/unpinned giving you even more power for customizing the result.
 
-Note that this plugin will alter the target element(s) "position" property to "absolute" and/or "fixed", depending on the situation, so before calling the plugin make sure that this change will not affect your page's layout.
+Note that this plugin will alter the target element(s) "position" property to *absolute* and/or *fixed*, depending on the situation, so, before enabling the plugin, make sure that this will not affect your page's layout.
 
 Works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 7+)
 
-##Features
+## Features
 
  - elements can be pinned inside a container element, not just to the page
- - custom events are fired when pinning/unpinning elements offering even more control
- - it is small – it weights around 2KB minified offering the best ratio of features per used bytes
- - it’s cross-browser – works in every major browser and IE7+
+ - custom events are fired when pinning/unpinning elements for more control
+ - it is really small – it weights 2KB minified (~1.2KB gzipped) offering a very good ratio of features per used bytes
+ - it's cross-browser – works in every major browser and IE7+
 
@@ -30,21 +34,23 @@ ## Requirements
 
-## How to use
+## Installation
 
-Zebra_Pin is available as a [Bower package](http://bower.io/). To install it use:
+Zebra_Pin is available as a [npm package](https://www.npmjs.com/). To install it use:
 
 ```
-bower install zebra_pin
+npm install zebra_pin
 ```
 
-Zebra_Pin is also available as a [npm package](https://www.npmjs.com/package/zebra_pin). To install it use:
+Zebra_Pin is also available as a [Bower package](http://bower.io/). To install it use:
 
 ```
-npm install zebra_pin
+bower install zebra_pin
 ```
 
-Load the latest version of jQuery from a CDN and provide a fallback to a local source, like:
+## How to use
 
+First, load the latest version of jQuery from a CDN and provide a fallback to a local source, like:
+
 ```html
-<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
-<script>window.jQuery || document.write('<script src="path/to/jquery-1.12.0.js"><\/script>')</script>
+<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+<script>window.jQuery || document.write('<script src="path/to/jquery-3.2.1.js"><\/script>')</script>
 ```
@@ -55,3 +61,3 @@
 ```html
-<script src="path/to/zebra_pin.js"></script>
+<script src="path/to/zebra_pin.min.js"></script>
 ```
@@ -66,10 +72,8 @@
     // the element will become pinned (sticky) and will scroll with the page
+    new $.Zebra_Pin($('#element'));
 
-    new Zebra_Pin($('#myelement'));
-
     // in the example above, the element will be at the very top edge of the
     // screen. if you want to add some top margin simply set the "top_spacing"
     // property
-
-    new Zebra_Pin($('#myelement'), {
+    new $.Zebra_Pin($('#element'), {
         top_spacing: 10
@@ -82,4 +86,3 @@ });
     // "absolute")
-
-    new Zebra_Pin($('#myelement'), {
+    new $.Zebra_Pin($('#element'), {
         contained: true
@@ -90,4 +93,3 @@ });
     // and make it stay there no matter what (we'll call this a "hard" pin)
-
-    new Zebra_Pin($('#myelement'), {
+    new $.Zebra_Pin($('#element'), {
         hard: true
@@ -99,2 +101,132 @@ });
 
-Configuration options and demos on the **[project's homepage](http://stefangabos.ro/jquery/zebra-pin/)**
+## Configuration options
+
+## Properties
+
+<table width="100%">
+    <thead>
+    <tr>
+        <th>Property</th>
+        <th>Type</th>
+        <th>Default</th>
+        <th>Description</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td valign="top"><code>class_name</code></td>
+        <td valign="top"><em>string</em></td>
+        <td valign="top">Zebra_Pin</td>
+        <td valign="top">Class to add to the element when it is "sticky"</td>
+    </tr>
+    <tr>
+        <td valign="top"><code>contain</code></td>
+        <td valign="top"><em>boolean</em></td>
+        <td valign="top">FALSE</td>
+        <td valign="top">
+            Specifies whether the pinned element should be restrained to its parent element's boundaries or not.<br><br>
+            <blockquote>The container element <strong>must</strong> have the <code>position</code> CSS property set to
+            something other than <strong>static</strong></blockquote>
+        </td>
+    </tr>
+    <tr>
+        <td valign="top"><code>hard</code></td>
+        <td valign="top"><em>boolean</em></td>
+        <td valign="top">FALSE</td>
+        <td valign="top">
+            Specifies whether the element should be "hard" pinned (the element is pinned to its position from the
+            beginning), or become pinned only when it is about to be hidden.
+        </td>
+    </tr>
+    <tr>
+        <td valign="top"><code>top_spacing</code></td>
+        <td valign="top"><em>integer</em></td>
+        <td valign="top">0</td>
+        <td valign="top">
+            Margin, in pixels, from the container element's (or the browser window's) top.<br>
+            This only works if the "hard" property is set to FALSE.
+        </td>
+    </tr>
+    <tr>
+        <td valign="top"><code>bottom_spacing</code></td>
+        <td valign="top"><em>integer</em></td>
+        <td valign="top">0</td>
+        <td valign="top">
+            Margin, in pixels, from the container element's bottom<br>
+            This only works if the "hard" property is set to FALSE and it is used only if the "contain" property is TRUE
+        </td>
+    </tr>
+    <tr>
+        <td valign="top"><code>z_index</code></td>
+        <td valign="top"><em>integer</em></td>
+        <td valign="top">9999</td>
+        <td valign="top">
+            The value of zIndex CSS property to be set for pinned elements
+        </td>
+    </tr>
+    </tbody>
+</table>
+
+## Events
+
+<table width="100%">
+    <thead>
+    <tr>
+        <th>Event</th>
+        <th width="100%">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td valign="top"><code>onPin</code></td>
+        <td valign="top">
+            Callback function to be executed when an element is pinned<br>
+            The callback function receives 3 arguments:<br><br>
+            <ul>
+                <li>the vertical position, relative to the document, where the event occurred</li>
+                <li>a reference to the pinned element</li>
+                <li>the index of the element - if the plugin was attached to multiple elements (0 based)</li>
+            </ul>
+        </td>
+    </tr>
+    <tr>
+        <td valign="top"><code>onUnpin</code></td>
+        <td valign="top">
+            Callback function to be executed when an element is unpinned<br>
+            The callback function receives 3 arguments:<br><br>
+            <ul>
+                <li>the vertical position, relative to the document, where the event occurred</li>
+                <li>a reference to the unpinned element</li>
+                <li>the index of the element - if the plugin was attached to multiple elements (0 based)</li>
+            </ul>
+        </td>
+    </tr>
+    </tbody>
+</table>
+
+## Methods
+
+### `update()`
+
+Updates the pinned elements' positions in accordance with the scrolled amount and with the pinned elements' container elements (if any).
+
+*Useful if a pinned element's parent changes height.*
+
+```javascript
+// initialize the plugin
+var zp = new $.Zebra_Pin($('#element'), {
+
+    // element can move only inside
+    // the parent element
+    contain:  true
+
+});
+
+// if the parent element's height changes
+// update also the boundaries
+zp.update();
+```
+
+## Demo
+
+See the [demos](http://stefangabos.github.io/Zebra_Pin/)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Copyleft License

License

(Experimental) Copyleft license information was found

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found

Found 1 instance in 1 package

Fixed alerts

Copyleft License

License

(Experimental) Copyleft license information was found

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

226

increased by137.89%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

65454

decreased by-73.58%

Dev dependency count

10

increased by100%

Number of package files

10

decreased by-62.96%

Number of low license alerts

3

increased by50%

Lines of code

549

decreased by-84.51%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes