Release loading-lock component

cristiandouce · May 2, 2013 · cff89fe · cff89fe
commit cff89fe
Show file tree

Hide file tree

Showing 8 changed files with 220 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+components
+build
diff --git a/History.md b/History.md
diff --git a/Makefile b/Makefile
@@ -0,0 +1,11 @@
+
+build: components index.js loading-lock.css
+	@component build --dev
+
+components: component.json
+	@component install --dev
+
+clean:
+	rm -fr build components template.js
+
+.PHONY: clean
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,44 @@
+
+# loading-lock
+
+  Loading lock component. Locks element while loading and adds spinner with [component/spin](https://github.com/component/spin).
+
+  ![1]
+  [1](http://d.pr/i/hFQ8+)
+
+
+## Installation
+
+    $ component install cristiandouce/loading-lock
+
+## API
+```js
+  var loading = require('loading-lock');
+```
+
+### loading(el, options)
+  Returns a `LoadingLock` instance for given element with options.
+  Valid options are:
+  * `size`: Size (Number) `diameter` of loading spinner.
+
+```js
+  var locker = loading(document.getElementById('example'), { size: 80 });
+```
+
+### .lock()
+  Locks element adding 'locked' class and spinner.
+
+```js
+  locker.lock();
+```
+
+### .unlock()
+  Unlocks element removing 'locked' class and spinner.
+
+```js
+  locker.unlock();
+```
+
+## License
+
+  MIT
diff --git a/component.json b/component.json
@@ -0,0 +1,19 @@
+{
+  "name": "loading-lock",
+  "repo": "cristiandouce/loading-lock",
+  "description": "Loading lock component.",
+  "version": "0.0.1",
+  "keywords": [],
+  "dependencies": {
+    "component/spin": "*",
+    "component/classes": "*"
+  },
+  "development": {},
+  "license": "MIT",
+  "scripts": [
+    "index.js"
+  ],
+  "styles": [
+    "loading-lock.css"
+  ]
+}
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,48 @@
+<html>
+<head>
+  <title>spinn</title>
+  <link rel="stylesheet" type="text/css" href="../build/build.css">
+  <script type="text/javascript" src="../build/build.js"></script>
+  <style type="text/css">
+    body { background: #000 }
+    #example {
+      /* position:relative is REQUIRED! */
+      position: relative;
+
+      background: #ededed;
+      width:740px;
+      margin-left:auto;
+      margin-right:auto;
+      padding:5px 20px 10px 20px;
+    }
+  </style>
+</head>
+<body>
+  <div id="example">
+    <h4>Loading Lock example</h4>
+    <a id="action"href="#">Action Trigger</a>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu dui risus. Aliquam sit amet consequat magna. In velit dolor, placerat sed accumsan sit amet, euismod eget purus. Maecenas lacinia sem quis velit suscipit bibendum. Pellentesque turpis dolor, tincidunt sodales vulputate at, vulputate sit amet mauris. Phasellus accumsan volutpat mi congue dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla sed enim mauris, vitae tempus risus. Etiam vehicula vulputate nisl, in sodales nibh consectetur sit amet. Etiam placerat sodales nulla, mattis sodales velit vulputate id. Aliquam vehicula eros et justo feugiat a tincidunt arcu elementum. Nam ut turpis tellus, ut sodales mi. Vivamus suscipit ornare odio vitae dictum. Vestibulum ac augue tortor. Praesent nulla nunc, sagittis nec iaculis in, fermentum sit amet enim. Donec eu massa risus.</p>
+  </div>
+
+  <script type="text/javascript">
+    var loading = require('loading-lock');
+
+    var exampleLocker = loading(document.getElementById('example'));
+
+    document.getElementById('action').onclick = function(ev) {
+      ev.preventDefault();
+
+      // perform locking loading
+      exampleLocker.lock();
+
+      // simulate action
+      setTimeout(function() {
+        // unlock block
+        exampleLocker.unlock();
+      }, 1500);
+    };
+
+
+  </script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,73 @@
+/**
+ * Module dependencies.
+ */
+
+var spin = require('spin')
+  , classes = require('classes');
+
+/**
+ * Module expose.
+ */
+
+module.exports = LoadingLock;
+
+/**
+ * Return new `LoadingLock` instance.
+ *
+ * @param {DOMNode} el Document Object Model Node Element
+ * @param {Object} options Options object.
+ * @return {LoadingLock} `LoadingLock` instance.
+ * @api public
+ */
+
+function LoadingLock (el, options) {
+  if (!(this instanceof LoadingLock)) {
+    return new LoadingLock(el, options);
+  }
+
+  this.el = el;
+
+  this.classes = classes(el);
+  this.classes.add('loading-lock');
+
+  // create lock screen element
+  // with proper css classes
+  this.lockScreen = document.createElement('span');
+  this.lockScreen.classList.add('lock-spinner');
+
+  // insert lock screen element for
+  // `spin` height a width refs
+  this.el.appendChild(this.lockScreen);
+
+  // set size of spinner from el's size or options
+  // defaults to `25`
+  this.size = Math.min(this.el.offsetWidth / 5, this.el.offsetHeight / 5) || options.size || 25;
+
+}
+
+/**
+ * Locks element adding 'locked' class
+ *
+ * @return {LoadingLock} `LoadingLock` instance.
+ * @api public
+ */
+
+LoadingLock.prototype.lock = function() {
+  this.classes.add('locked');
+  this.spinner = spin(this.lockScreen, { delay: 1, size: this.size });
+  return this;
+}
+
+/**
+ * Unlocks element removing 'locked' class
+ *
+ * @return {LoadingLock} `LoadingLock` instance.
+ * @api public
+ */
+
+LoadingLock.prototype.unlock = function() {
+  this.classes.remove('locked');
+  this.spinner.remove();
+
+  return this;
+}
diff --git a/loading-lock.css b/loading-lock.css
@@ -0,0 +1,23 @@
+.loading-lock {
+  position:relative;
+}
+
+.loading-lock .lock-spinner {
+  z-index:2;
+  position:absolute;
+  top:0;
+  bottom:0;
+  left:0;
+  right:0;
+  content:"\0020";
+  filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+  opacity:0.7;
+  background-color:#fff;
+  background-position:center center;
+  background-repeat:no-repeat;
+  display:none;
+}
+
+.loading-lock.locked .lock-spinner {
+  display: block;
+}