├── .gitignore ├── Makefile ├── History.md ├── loading-lock.css ├── package.json ├── component.json ├── Readme.md ├── index.js └── examples └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | components 2 | build 3 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | 2 | build: components index.js loading-lock.css 3 | @component build --dev 4 | 5 | components: component.json 6 | @component install --dev 7 | 8 | clean: 9 | rm -fr build components template.js 10 | 11 | .PHONY: clean 12 | -------------------------------------------------------------------------------- /History.md: -------------------------------------------------------------------------------- 1 | 2 | 0.1.0 / 2014-05-14 3 | ================== 4 | 5 | * Add options.size to override container's size. @slifszyc 6 | 7 | 0.0.2 / 2013-10-24 8 | ================== 9 | 10 | * Remove usage to support old browsers 11 | * Coding Style change 12 | * update README.md 13 | * update component.json 14 | 15 | 0.0.1 / 2013-05-02 16 | ================== 17 | 18 | * Release loading-lock component 19 | -------------------------------------------------------------------------------- /loading-lock.css: -------------------------------------------------------------------------------- 1 | .loading-lock { 2 | position:relative; 3 | } 4 | 5 | .loading-lock .lock-spinner { 6 | z-index:2; 7 | position:absolute; 8 | top:0; 9 | bottom:0; 10 | left:0; 11 | right:0; 12 | content:"\0020"; 13 | opacity:0.7; 14 | background-color:#fff; 15 | background-position:center center; 16 | background-repeat:no-repeat; 17 | display:none; 18 | } 19 | 20 | .loading-lock.locked .lock-spinner { 21 | display: block; 22 | } 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "democracyos-loading-lock", 3 | "repo": "DemocracyOS/loading-lock", 4 | "description": "Loading lock component.", 5 | "version": "0.1.0", 6 | "keywords": ["loading", "lock", "spin", "spinner", "UI"], 7 | "dependencies": { 8 | "component-spin": "*", 9 | "component-classes": "*" 10 | }, 11 | "browser": { 12 | "spin": "component-spin", 13 | "classes": "component-classes" 14 | }, 15 | "license": "MIT" 16 | } -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "loading-lock", 3 | "repo": "cristiandouce/loading-lock", 4 | "description": "Loading lock component.", 5 | "version": "0.1.0", 6 | "keywords": ["loading", "lock", "spin", "spinner", "UI"], 7 | "dependencies": { 8 | "component/spin": "*", 9 | "component/classes": "*" 10 | }, 11 | "development": {}, 12 | "license": "MIT", 13 | "scripts": [ 14 | "index.js" 15 | ], 16 | "styles": [ 17 | "loading-lock.css" 18 | ] 19 | } -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | 2 | # loading-lock 3 | 4 | Loading lock component. Locks element while loading and adds spinner with [component/spin](https://github.com/component/spin). 5 | 6 | ![](http://d.pr/i/hFQ8+) 7 | 8 | 9 | ## Installation 10 | 11 | $ component install cristiandouce/loading-lock 12 | 13 | ## API 14 | ```js 15 | var loading = require('loading-lock'); 16 | ``` 17 | 18 | ### loading(el, options) 19 | Returns a `LoadingLock` instance for given element with options. 20 | Valid options are: 21 | * `size`: Size (Number) `diameter` of loading spinner. 22 | 23 | ```js 24 | var locker = loading(document.getElementById('example'), { size: 80 }); 25 | ``` 26 | 27 | ### .lock() 28 | Locks element adding 'locked' class and spinner. 29 | 30 | ```js 31 | locker.lock(); 32 | ``` 33 | 34 | ### .unlock() 35 | Unlocks element removing 'locked' class and spinner. 36 | 37 | ```js 38 | locker.unlock(); 39 | ``` 40 | 41 | ## License 42 | 43 | MIT 44 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Module dependencies. 3 | */ 4 | 5 | var spin = require('spin'); 6 | var classes = require('classes'); 7 | 8 | /** 9 | * Module expose. 10 | */ 11 | 12 | module.exports = LoadingLock; 13 | 14 | /** 15 | * Return new `LoadingLock` instance. 16 | * 17 | * @param {DOMNode} el Document Object Model Node Element 18 | * @param {Object} options Options object. 19 | * @return {LoadingLock} `LoadingLock` instance. 20 | * @api public 21 | */ 22 | 23 | function LoadingLock (el, options) { 24 | if (!(this instanceof LoadingLock)) { 25 | return new LoadingLock(el, options); 26 | } 27 | 28 | this.el = el; 29 | 30 | this.classes = classes(el); 31 | this.classes.add('loading-lock'); 32 | 33 | // create lock screen element 34 | // with proper css classes 35 | this.lockScreen = document.createElement('span'); 36 | classes(this.lockScreen).add('lock-spinner'); 37 | 38 | // insert lock screen element for 39 | // `spin` height a width refs 40 | this.el.appendChild(this.lockScreen); 41 | 42 | // set size of spinner from el's size or options 43 | // defaults to `25` 44 | this.size = options.size || Math.min(this.el.offsetWidth / 5, this.el.offsetHeight / 5) || 25; 45 | 46 | } 47 | 48 | /** 49 | * Locks element adding 'locked' class 50 | * 51 | * @return {LoadingLock} `LoadingLock` instance. 52 | * @api public 53 | */ 54 | 55 | LoadingLock.prototype.lock = function() { 56 | this.classes.add('locked'); 57 | this.spinner = spin(this.lockScreen, { delay: 1, size: this.size }); 58 | return this; 59 | } 60 | 61 | /** 62 | * Unlocks element removing 'locked' class 63 | * 64 | * @return {LoadingLock} `LoadingLock` instance. 65 | * @api public 66 | */ 67 | 68 | LoadingLock.prototype.unlock = function() { 69 | this.classes.remove('locked'); 70 | this.spinner.remove(); 71 | 72 | return this; 73 | } -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | spinn 4 | 5 | 6 | 19 | 20 | 21 |
22 |

Loading Lock example

23 | Action Trigger 24 |

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.

25 |
26 | 27 | 47 | 48 | --------------------------------------------------------------------------------