Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 77 KiB |
Before Width: | Height: | Size: 712 KiB |
After Width: | Height: | Size: 257 KiB |
Before Width: | Height: | Size: 86 KiB |
Before Width: | Height: | Size: 74 KiB |
@ -1,47 +0,0 @@ |
|||
/* |
|||
* DOM element rendering detection |
|||
* https://davidwalsh.name/detect-node-insertion |
|||
*/ |
|||
@keyframes chartjs-render-animation { |
|||
from { opacity: 0.99; } |
|||
to { opacity: 1; } |
|||
} |
|||
|
|||
.chartjs-render-monitor { |
|||
animation: chartjs-render-animation 0.001s; |
|||
} |
|||
|
|||
/* |
|||
* DOM element resizing detection |
|||
* https://github.com/marcj/css-element-queries |
|||
*/ |
|||
.chartjs-size-monitor, |
|||
.chartjs-size-monitor-expand, |
|||
.chartjs-size-monitor-shrink { |
|||
position: absolute; |
|||
direction: ltr; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
overflow: hidden; |
|||
pointer-events: none; |
|||
visibility: hidden; |
|||
z-index: -1; |
|||
} |
|||
|
|||
.chartjs-size-monitor-expand > div { |
|||
position: absolute; |
|||
width: 1000000px; |
|||
height: 1000000px; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.chartjs-size-monitor-shrink > div { |
|||
position: absolute; |
|||
width: 200%; |
|||
height: 200%; |
|||
left: 0; |
|||
top: 0; |
|||
} |
@ -1 +0,0 @@ |
|||
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0} |
@ -1,37 +0,0 @@ |
|||
module.exports = function(grunt) { |
|||
'use strict'; |
|||
|
|||
grunt.initConfig({ |
|||
clean: ['dist'], |
|||
uglify: { |
|||
options: { |
|||
preserveComments: 'some', |
|||
sourceMap: true |
|||
}, |
|||
build: { |
|||
expand: true, |
|||
cwd: 'js', |
|||
src: ['**/*.js', ['!**/*.min.js']], |
|||
dest: 'js', |
|||
ext: '.min.js', |
|||
} |
|||
}, |
|||
cssmin: { |
|||
options: { |
|||
keepBreaks: true |
|||
}, |
|||
build: { |
|||
expand: true, |
|||
cwd: 'css', |
|||
src: ['**/*.css', ['!**/*.min.css']], |
|||
dest: 'css', |
|||
ext: '.min.css', |
|||
} |
|||
} |
|||
}); |
|||
grunt.loadNpmTasks('grunt-contrib-clean'); |
|||
grunt.loadNpmTasks('grunt-contrib-uglify'); |
|||
grunt.loadNpmTasks('grunt-contrib-cssmin'); |
|||
grunt.registerTask('default', ['clean', 'uglify', 'cssmin']); |
|||
|
|||
}; |
@ -1,21 +0,0 @@ |
|||
The MIT License (MIT) |
|||
|
|||
Copyright (c) 2011-2014 Min Hur, The New York Times Company |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy |
|||
of this software and associated documentation files (the "Software"), to deal |
|||
in the Software without restriction, including without limitation the rights |
|||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|||
copies of the Software, and to permit persons to whom the Software is |
|||
furnished to do so, subject to the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be included in |
|||
all copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
|||
THE SOFTWARE. |
@ -1,175 +0,0 @@ |
|||
# Bootstrap Toggle |
|||
Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles. |
|||
|
|||
Visit http://www.bootstraptoggle.com for demos. |
|||
|
|||
## Getting Started |
|||
|
|||
### Installation |
|||
You can [download](https://github.com/minhur/bootstrap-toggle/archive/master.zip) the latest version of Bootstrap Toggle or use CDN to load the library. |
|||
|
|||
`Warning` If you are using Bootstrap v2.3.2, use `bootstrap2-toggle.min.js` and `bootstrap2-toggle.min.css` instead. |
|||
|
|||
```html |
|||
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> |
|||
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> |
|||
``` |
|||
|
|||
### Bower Install |
|||
```bash |
|||
bower install bootstrap-toggle |
|||
``` |
|||
|
|||
## Usage |
|||
|
|||
### Basic example |
|||
Simply add `data-toggle="toggle"` to convert checkboxes into toggles. |
|||
|
|||
```html |
|||
<input type="checkbox" checked data-toggle="toggle"> |
|||
``` |
|||
|
|||
### Stacked checkboxes |
|||
Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add `data-toggle="toggle"` to convert checkboxes into toggles. |
|||
|
|||
```html |
|||
<div class="checkbox"> |
|||
<label> |
|||
<input type="checkbox" data-toggle="toggle"> |
|||
Option one is enabled |
|||
</label> |
|||
</div> |
|||
<div class="checkbox disabled"> |
|||
<label> |
|||
<input type="checkbox" disabled data-toggle="toggle"> |
|||
Option two is disabled |
|||
</label> |
|||
</div> |
|||
``` |
|||
|
|||
### Inline Checkboxes |
|||
Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add `data-toggle="toggle"` to a convert checkboxes into toggles. |
|||
|
|||
```html |
|||
<label class="checkbox-inline"> |
|||
<input type="checkbox" checked data-toggle="toggle"> First |
|||
</label> |
|||
<label class="checkbox-inline"> |
|||
<input type="checkbox" data-toggle="toggle"> Second |
|||
</label> |
|||
<label class="checkbox-inline"> |
|||
<input type="checkbox" data-toggle="toggle"> Third |
|||
</label> |
|||
``` |
|||
|
|||
## API |
|||
|
|||
### Initialize by JavaScript |
|||
Initialize toggles with id `toggle-one` with a single line of JavaScript. |
|||
|
|||
```html |
|||
<input id="toggle-one" checked type="checkbox"> |
|||
<script> |
|||
$(function() { |
|||
$('#toggle-one').bootstrapToggle(); |
|||
}) |
|||
</script> |
|||
``` |
|||
|
|||
### Options |
|||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-on="Enabled"`. |
|||
|
|||
```html |
|||
<input type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled"> |
|||
<input type="checkbox" id="toggle-two"> |
|||
<script> |
|||
$(function() { |
|||
$('#toggle-two').bootstrapToggle({ |
|||
on: 'Enabled', |
|||
off: 'Disabled' |
|||
}); |
|||
}) |
|||
</script> |
|||
``` |
|||
|
|||
Name|Type|Default|Description| |
|||
---|---|---|--- |
|||
on|string/html|"On"|Text of the on toggle |
|||
off|string/html|"Off"|Text of the off toggle |
|||
size|string|"normal"|Size of the toggle. Possible values are `large`, `normal`, `small`, `mini`. |
|||
onstyle|string|"primary"|Style of the on toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger` |
|||
offstyle|string|"default"|Style of the off toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger` |
|||
style|string| |Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference. |
|||
width|integer|*null*|Sets the width of the toggle. if set to *null*, width will be calculated. |
|||
height|integer|*null*|Sets the height of the toggle. if set to *null*, height will be calculated. |
|||
|
|||
### Methods |
|||
Methods can be used to control toggles directly. |
|||
|
|||
```html |
|||
<input id="toggle-demo" type="checkbox" data-toggle="toggle"> |
|||
``` |
|||
|
|||
Method|Example|Description |
|||
---|---|--- |
|||
initialize|$('#toggle-demo').bootstrapToggle()|Initializes the toggle plugin with options |
|||
destroy|$('#toggle-demo').bootstrapToggle('destroy')|Destroys the toggle |
|||
on|$('#toggle-demo').bootstrapToggle('on')|Sets the toggle to 'On' state |
|||
off|$('#toggle-demo').bootstrapToggle('off')|Sets the toggle to 'Off' state |
|||
toggle|$('#toggle-demo').bootstrapToggle('toggle')|Toggles the state of the toggle |
|||
enable|$('#toggle-demo').bootstrapToggle('enable')|Enables the toggle |
|||
disable|$('#toggle-demo').bootstrapToggle('disable')|Disables the toggle |
|||
|
|||
## Events |
|||
|
|||
### Event Propagation |
|||
Note All events are propagated to and from input element to the toggle. |
|||
|
|||
You should listen to events from the `<input type="checkbox">` directly rather than look for custom events. |
|||
|
|||
```html |
|||
<input id="toggle-event" type="checkbox" data-toggle="toggle"> |
|||
<div id="console-event"></div> |
|||
<script> |
|||
$(function() { |
|||
$('#toggle-event').change(function() { |
|||
$('#console-event').html('Toggle: ' + $(this).prop('checked')) |
|||
}) |
|||
}) |
|||
</script> |
|||
``` |
|||
|
|||
### API vs Input |
|||
This also means that using the API or Input to trigger events will work both ways. |
|||
|
|||
```html |
|||
<input id="toggle-trigger" type="checkbox" data-toggle="toggle"> |
|||
<button class="btn btn-success" onclick="toggleOn()">On by API</button> |
|||
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button> |
|||
<button class="btn btn-success" onclick="toggleOnByInput()">On by Input</button> |
|||
<button class="btn btn-danger" onclick="toggleOffByInput()">Off by Input</button> |
|||
<script> |
|||
function toggleOn() { |
|||
$('#toggle-trigger').bootstrapToggle('on') |
|||
} |
|||
function toggleOff() { |
|||
$('#toggle-trigger').bootstrapToggle('off') |
|||
} |
|||
function toggleOnByInput() { |
|||
$('#toggle-trigger').prop('checked', true).change() |
|||
} |
|||
function toggleOffByInput() { |
|||
$('#toggle-trigger').prop('checked', false).change() |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
### Integration |
|||
|
|||
#### [KnockoutJS](http://knockoutjs.com) |
|||
|
|||
A binding for knockout is available here: [aAXEe/knockout-bootstrap-toggle](https://github.com/aAXEe/knockout-bootstrap-toggle) |
|||
|
|||
## Demos |
|||
|
|||
Visit http://www.bootstraptoggle.com for demos. |
@ -1,2 +0,0 @@ |
|||
.DS_Store |
|||
node_modules |
@ -1,32 +0,0 @@ |
|||
{ |
|||
"name": "bootstrap-toggle", |
|||
"description": "Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles", |
|||
"version": "2.2.1", |
|||
"keywords": [ |
|||
"bootstrap", |
|||
"toggle", |
|||
"bootstrap-toggle", |
|||
"switch", |
|||
"bootstrap-switch" |
|||
], |
|||
"homepage": "http://www.bootstraptoggle.com", |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "https://github.com/minhur/bootstrap-toggle.git" |
|||
}, |
|||
"license": "MIT", |
|||
"authors": [ |
|||
"Min Hur <min.hur@gmail.com>" |
|||
], |
|||
"main": [ |
|||
"./js/bootstrap-toggle.min.js", |
|||
"./css/bootstrap-toggle.min.css" |
|||
], |
|||
"ignore": [ |
|||
"**/.*", |
|||
"node_modules", |
|||
"bower_components", |
|||
"test", |
|||
"tests" |
|||
] |
|||
} |
@ -1,83 +0,0 @@ |
|||
/*! ======================================================================== |
|||
* Bootstrap Toggle: bootstrap-toggle.css v2.2.0 |
|||
* http://www.bootstraptoggle.com |
|||
* ======================================================================== |
|||
* Copyright 2014 Min Hur, The New York Times Company |
|||
* Licensed under MIT |
|||
* ======================================================================== */ |
|||
|
|||
|
|||
.checkbox label .toggle, |
|||
.checkbox-inline .toggle { |
|||
margin-left: -20px; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.toggle { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
.toggle input[type="checkbox"] { |
|||
display: none; |
|||
} |
|||
.toggle-group { |
|||
position: absolute; |
|||
width: 200%; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
transition: left 0.35s; |
|||
-webkit-transition: left 0.35s; |
|||
-moz-user-select: none; |
|||
-webkit-user-select: none; |
|||
} |
|||
.toggle.off .toggle-group { |
|||
left: -100%; |
|||
} |
|||
.toggle-on { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 50%; |
|||
margin: 0; |
|||
border: 0; |
|||
border-radius: 0; |
|||
} |
|||
.toggle-off { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 50%; |
|||
right: 0; |
|||
margin: 0; |
|||
border: 0; |
|||
border-radius: 0; |
|||
} |
|||
.toggle-handle { |
|||
position: relative; |
|||
margin: 0 auto; |
|||
padding-top: 0px; |
|||
padding-bottom: 0px; |
|||
height: 100%; |
|||
width: 0px; |
|||
border-width: 0 1px; |
|||
} |
|||
|
|||
.toggle.btn { min-width: 59px; min-height: 34px; } |
|||
.toggle-on.btn { padding-right: 24px; } |
|||
.toggle-off.btn { padding-left: 24px; } |
|||
|
|||
.toggle.btn-lg { min-width: 79px; min-height: 45px; } |
|||
.toggle-on.btn-lg { padding-right: 31px; } |
|||
.toggle-off.btn-lg { padding-left: 31px; } |
|||
.toggle-handle.btn-lg { width: 40px; } |
|||
|
|||
.toggle.btn-sm { min-width: 50px; min-height: 30px;} |
|||
.toggle-on.btn-sm { padding-right: 20px; } |
|||
.toggle-off.btn-sm { padding-left: 20px; } |
|||
|
|||
.toggle.btn-xs { min-width: 35px; min-height: 22px;} |
|||
.toggle-on.btn-xs { padding-right: 12px; } |
|||
.toggle-off.btn-xs { padding-left: 12px; } |
|||
|
@ -1,28 +0,0 @@ |
|||
/*! ======================================================================== |
|||
* Bootstrap Toggle: bootstrap-toggle.css v2.2.0 |
|||
* http://www.bootstraptoggle.com |
|||
* ======================================================================== |
|||
* Copyright 2014 Min Hur, The New York Times Company |
|||
* Licensed under MIT |
|||
* ======================================================================== */ |
|||
.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px} |
|||
.toggle{position:relative;overflow:hidden} |
|||
.toggle input[type=checkbox]{display:none} |
|||
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none} |
|||
.toggle.off .toggle-group{left:-100%} |
|||
.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0} |
|||
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0} |
|||
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px} |
|||
.toggle.btn{min-width:59px;min-height:34px} |
|||
.toggle-on.btn{padding-right:24px} |
|||
.toggle-off.btn{padding-left:24px} |
|||
.toggle.btn-lg{min-width:79px;min-height:45px} |
|||
.toggle-on.btn-lg{padding-right:31px} |
|||
.toggle-off.btn-lg{padding-left:31px} |
|||
.toggle-handle.btn-lg{width:40px} |
|||
.toggle.btn-sm{min-width:50px;min-height:30px} |
|||
.toggle-on.btn-sm{padding-right:20px} |
|||
.toggle-off.btn-sm{padding-left:20px} |
|||
.toggle.btn-xs{min-width:35px;min-height:22px} |
|||
.toggle-on.btn-xs{padding-right:12px} |
|||
.toggle-off.btn-xs{padding-left:12px} |
@ -1,85 +0,0 @@ |
|||
/*! ======================================================================== |
|||
* Bootstrap Toggle: bootstrap2-toggle.css v2.2.0 |
|||
* http://www.bootstraptoggle.com |
|||
* ======================================================================== |
|||
* Copyright 2014 Min Hur, The New York Times Company |
|||
* Licensed under MIT |
|||
* ======================================================================== */ |
|||
|
|||
|
|||
label.checkbox .toggle, |
|||
label.checkbox.inline .toggle { |
|||
margin-left: -20px; |
|||
margin-right: 5px; |
|||
} |
|||
.toggle { |
|||
min-width: 40px; |
|||
height: 20px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
.toggle input[type="checkbox"] { |
|||
display: none; |
|||
} |
|||
.toggle-group { |
|||
position: absolute; |
|||
width: 200%; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
transition: left 0.35s; |
|||
-webkit-transition: left 0.35s; |
|||
-moz-user-select: none; |
|||
-webkit-user-select: none; |
|||
} |
|||
.toggle.off .toggle-group { |
|||
left: -100%; |
|||
} |
|||
.toggle-on { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 50%; |
|||
margin: 0; |
|||
border: 0; |
|||
border-radius: 0; |
|||
} |
|||
.toggle-off { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 50%; |
|||
right: 0; |
|||
margin: 0; |
|||
border: 0; |
|||
border-radius: 0; |
|||
} |
|||
.toggle-handle { |
|||
position: relative; |
|||
margin: 0 auto; |
|||
padding-top: 0px; |
|||
padding-bottom: 0px; |
|||
height: 100%; |
|||
width: 0px; |
|||
border-width: 0 1px; |
|||
} |
|||
.toggle-handle.btn-mini { |
|||
top: -1px; |
|||
} |
|||
.toggle.btn { min-width: 30px; } |
|||
.toggle-on.btn { padding-right: 24px; } |
|||
.toggle-off.btn { padding-left: 24px; } |
|||
|
|||
.toggle.btn-large { min-width: 40px; } |
|||
.toggle-on.btn-large { padding-right: 35px; } |
|||
.toggle-off.btn-large { padding-left: 35px; } |
|||
|
|||
.toggle.btn-small { min-width: 25px; } |
|||
.toggle-on.btn-small { padding-right: 20px; } |
|||
.toggle-off.btn-small { padding-left: 20px; } |
|||
|
|||
.toggle.btn-mini { min-width: 20px; } |
|||
.toggle-on.btn-mini { padding-right: 12px; } |
|||
.toggle-off.btn-mini { padding-left: 12px; } |
|||
|
@ -1,28 +0,0 @@ |
|||
/*! ======================================================================== |
|||
* Bootstrap Toggle: bootstrap2-toggle.css v2.2.0 |
|||
* http://www.bootstraptoggle.com |
|||
* ======================================================================== |
|||
* Copyright 2014 Min Hur, The New York Times Company |
|||
* Licensed under MIT |
|||
* ======================================================================== */ |
|||
label.checkbox .toggle,label.checkbox.inline .toggle{margin-left:-20px;margin-right:5px} |
|||
.toggle{min-width:40px;height:20px;position:relative;overflow:hidden} |
|||
.toggle input[type=checkbox]{display:none} |
|||
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none} |
|||
.toggle.off .toggle-group{left:-100%} |
|||
.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0} |
|||
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0} |
|||
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px} |
|||
.toggle-handle.btn-mini{top:-1px} |
|||
.toggle.btn{min-width:30px} |
|||
.toggle-on.btn{padding-right:24px} |
|||
.toggle-off.btn{padding-left:24px} |
|||
.toggle.btn-large{min-width:40px} |
|||
.toggle-on.btn-large{padding-right:35px} |
|||
.toggle-off.btn-large{padding-left:35px} |
|||
.toggle.btn-small{min-width:25px} |
|||
.toggle-on.btn-small{padding-right:20px} |
|||
.toggle-off.btn-small{padding-left:20px} |
|||
.toggle.btn-mini{min-width:20px} |
|||
.toggle-on.btn-mini{padding-right:12px} |
|||
.toggle-off.btn-mini{padding-left:12px} |
Before Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 20 KiB |
@ -1,49 +0,0 @@ |
|||
+function ($) { |
|||
'use strict'; |
|||
|
|||
$('.example:not(.skip)').each(function() { |
|||
// fetch & encode html
|
|||
var html = $('<div>').text($(this).html()).html() |
|||
// find number of space/tabs on first line (minus line break)
|
|||
var count = html.match(/^(\s+)/)[0].length - 1 |
|||
// replace tabs/spaces on each lines with
|
|||
var regex = new RegExp('\\n\\s{'+count+'}', 'g') |
|||
var code = html.replace(regex, '\n').replace(/\t/g, ' ').trim() |
|||
// other cleanup
|
|||
code = code.replace(/=""/g,'') |
|||
// add code block to dom
|
|||
$(this).after( $('<code class="highlight html">').html(code) ) |
|||
}); |
|||
|
|||
$('code.highlight').each(function() { |
|||
hljs.highlightBlock(this) |
|||
}); |
|||
|
|||
}(jQuery); |
|||
|
|||
var Demo = function () {} |
|||
|
|||
Demo.prototype.init = function(selector) { |
|||
$(selector).bootstrapToggle(selector) |
|||
} |
|||
Demo.prototype.destroy = function(selector) { |
|||
$(selector).bootstrapToggle('destroy') |
|||
} |
|||
Demo.prototype.on = function(selector) { |
|||
$(selector).bootstrapToggle('on') |
|||
} |
|||
Demo.prototype.off = function(selector) { |
|||
$(selector).bootstrapToggle('off') |
|||
} |
|||
Demo.prototype.toggle = function(selector) { |
|||
$(selector).bootstrapToggle('toggle') |
|||
} |
|||
Demo.prototype.enable = function(selector) { |
|||
$(selector).bootstrapToggle('enable') |
|||
} |
|||
Demo.prototype.disable = function(selector) { |
|||
$(selector).bootstrapToggle('disable') |
|||
} |
|||
|
|||
|
|||
demo = new Demo() |
@ -1,112 +0,0 @@ |
|||
header, footer { |
|||
padding: 20px; |
|||
background-image: url('header.png'); |
|||
background-size: 256px 256px; |
|||
} |
|||
footer { |
|||
color: #fff; |
|||
text-align: center; |
|||
} |
|||
.nyt-logo { |
|||
max-height: 40px; |
|||
margin-top: 5px; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
nav.navbar { |
|||
margin-bottom: 10px; |
|||
background-color: #fff; |
|||
border: 0px; |
|||
border-radius: 2px; |
|||
} |
|||
#navbar { |
|||
margin: 0px; |
|||
} |
|||
#navbar .navbar-nav li iframe { |
|||
margin-top: 15px; |
|||
} |
|||
#navbar .navbar-nav li:last-child iframe { |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
@media screen and (max-width: 767px) { |
|||
#navbar .navbar-nav li iframe { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
.mast-head { |
|||
margin: 10px 0; |
|||
} |
|||
.mast-head h1 { |
|||
margin-bottom: 15px; |
|||
color: #fff; |
|||
} |
|||
.mast-head p { |
|||
color: #fff; |
|||
} |
|||
|
|||
.mast-links { |
|||
padding-top: 10px; |
|||
} |
|||
|
|||
.mast-links > * { |
|||
vertical-align: middle; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.mast-links > .btn { |
|||
margin-right: 30px; |
|||
} |
|||
main { |
|||
margin: 10px 20px; |
|||
} |
|||
main .container { |
|||
margin-bottom: 40px; |
|||
} |
|||
|
|||
code.hljs { |
|||
border: 1px solid #ccc; |
|||
padding: 1em; |
|||
white-space: pre; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.example { |
|||
position: relative; |
|||
border: 1px solid #ccc; |
|||
padding: 1em 1em 0.5em 1em; |
|||
border-radius: 4px 4px 0 0; |
|||
} |
|||
|
|||
.example:after { |
|||
content: "Example"; |
|||
position: absolute; |
|||
top: 0px; |
|||
right: 0px; |
|||
padding: 3px 7px; |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
background-color: #f5f5f5; |
|||
border: 1px solid #ccc; |
|||
color: #9da0a4; |
|||
border-radius: 0px 4px 0px 4px; |
|||
border-width: 0px 0px 1px 1px; |
|||
} |
|||
|
|||
.example + code.hljs { |
|||
border-top: 0; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
|
|||
.example > * { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.example > div.toggle { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.table-striped code { |
|||
background-color: inherit; |
|||
} |
@ -1,449 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<script> if (window.location.href.indexOf('minhur.github.io') > 0) window.location.replace('http://www.bootstraptoggle.com') </script> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<meta name="msvalidate.01" content="3638AEFC99423BA5CB586805286C39AA" /> |
|||
<meta name="description" content="Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles." /> |
|||
<meta name="keywords" content="bootstrap, toggle, switch, bootstrap-toggle, bootstrap-switch" /> |
|||
<meta name="author" content="metatags generator"> |
|||
<meta name="robots" content="index, follow"> |
|||
<meta name="revisit-after" content="1 month"> |
|||
<title>Bootstrap Toggle</title> |
|||
<link rel="canonical" href="http://www.bootstraptoggle.com"> |
|||
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css" rel="stylesheet" > |
|||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> |
|||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> |
|||
<link href="css/bootstrap-toggle.css" rel="stylesheet"> |
|||
<link href="doc/stylesheet.css" rel="stylesheet"> |
|||
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> |
|||
</head> |
|||
<body> |
|||
<header> |
|||
<nav class="navbar navbar-default container" role="navigation"> |
|||
<div class="container"> |
|||
<div class="navbar-header"> |
|||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> |
|||
<span class="sr-only">Toggle navigation</span> |
|||
<span class="icon-bar"></span> |
|||
<span class="icon-bar"></span> |
|||
<span class="icon-bar"></span> |
|||
</button> |
|||
<a class="navbar-brand" href="#">Bootstrap Toggle</a> |
|||
</div> |
|||
<div id="navbar" class="collapse navbar-collapse"> |
|||
<ul class="nav navbar-nav navbar-right"> |
|||
<li><a href="#usage">Usage</a></li> |
|||
<li><a href="#api">API</a></li> |
|||
<li><a href="#events">Events</a></li> |
|||
<li><a href="#demos">Demos</a></li> |
|||
<li><a href="https://github.com/minhur/bootstrap-toggle/issues">Issues</a></li> |
|||
<li><a href="https://github.com/minhur/bootstrap-toggle/archive/master.zip">Download</a></li> |
|||
<li> |
|||
<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=watch" allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> |
|||
</li> |
|||
<li> |
|||
<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
<div class="mast-head"> |
|||
<div class="container"> |
|||
<h1>Bootstrap Toggle</h1> |
|||
<p>Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles</p> |
|||
<div class="mast-links"> |
|||
<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="150" height="30"></iframe> |
|||
<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=fork&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="150" height="30"></iframe> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
|
|||
<main> |
|||
<div class="container"> |
|||
<h2>Getting Started</h2> |
|||
<hr> |
|||
<h3>Installation</h3> |
|||
<p>You can <a href="https://github.com/minhur/bootstrap-toggle/archive/master.zip">download</a> the latest version of Bootstrap Toggle or use CDN to load the library.</p> |
|||
<p><span class="label label-warning">Warning</span> If you are using Bootstrap v2.3.2, use <code>bootstrap2-toggle.min.js</code> and <code>bootstrap2-toggle.min.css</code> instead.</p> |
|||
<code class="highlight"><link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> |
|||
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script></code> |
|||
|
|||
<h3>Bower Install</h3> |
|||
<p></p> |
|||
<code class="highlight bash">bower install bootstrap-toggle</code> |
|||
</div> |
|||
<div id="usage" class="container"> |
|||
<h2>Usage</h2> |
|||
<hr> |
|||
|
|||
<h3>Basic example</h3> |
|||
<p>Simply add <code>data-toggle="toggle"</code> to convert checkboxes into toggles.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle"> |
|||
</div> |
|||
|
|||
<h3>Stacked checkboxes</h3> |
|||
<p>Refer to Bootstrap <a href="http://getbootstrap.com/css/#forms-controls" target="_blank">Form Controls</a> documentation to create stacked checkboxes. Simply add <code>data-toggle="toggle"</code> to convert checkboxes into toggles.</p> |
|||
<div class="example"> |
|||
<div class="checkbox"> |
|||
<label> |
|||
<input type="checkbox" data-toggle="toggle"> |
|||
Option one is enabled |
|||
</label> |
|||
</div> |
|||
<div class="checkbox disabled"> |
|||
<label> |
|||
<input type="checkbox" disabled data-toggle="toggle"> |
|||
Option two is disabled |
|||
</label> |
|||
</div> |
|||
</div> |
|||
|
|||
<h3>Inline Checkboxes</h3> |
|||
<p>Refer to Bootstrap <a href="http://getbootstrap.com/css/#forms-controls" target="_blank">Form Controls</a> documentation to create inline checkboxes. Simply add <code>data-toggle="toggle"</code> to a convert checkboxes into toggles.</p> |
|||
<div class="example"> |
|||
<label class="checkbox-inline"> |
|||
<input type="checkbox" checked data-toggle="toggle"> First |
|||
</label> |
|||
<label class="checkbox-inline"> |
|||
<input type="checkbox" data-toggle="toggle"> Second |
|||
</label> |
|||
<label class="checkbox-inline"> |
|||
<input type="checkbox" data-toggle="toggle"> Third |
|||
</label> |
|||
</div> |
|||
</div> |
|||
|
|||
<div id="api" class="container"> |
|||
<h2>API</h2> |
|||
<hr> |
|||
|
|||
<h3>Initialize by JavaScript</h3> |
|||
<p>Initialize toggles with id <code>toggle-one</code> with a single line of JavaScript.</p> |
|||
<div class="example"> |
|||
<input id="toggle-one" checked type="checkbox"> |
|||
<script> |
|||
$(function() { |
|||
$('#toggle-one').bootstrapToggle(); |
|||
}) |
|||
</script> |
|||
</div> |
|||
|
|||
<h3>Options</h3> |
|||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-on="Enabled"</code>.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled"> |
|||
<input type="checkbox" id="toggle-two"> |
|||
<script> |
|||
$(function() { |
|||
$('#toggle-two').bootstrapToggle({ |
|||
on: 'Enabled', |
|||
off: 'Disabled' |
|||
}); |
|||
}) |
|||
</script> |
|||
</div> |
|||
<div class="table-responsive"> |
|||
<table class="table table-striped table-condensed"> |
|||
<thead> |
|||
<tr> |
|||
<th>Name</th> |
|||
<th>Type</th> |
|||
<th>Default</th> |
|||
<th>Description</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>on</td> |
|||
<td>string | html</td> |
|||
<td><code>"On"</code></td> |
|||
<td>Text of the <em>on</em> toggle</td> |
|||
</tr> |
|||
<tr> |
|||
<td>off</td> |
|||
<td>string | html</td> |
|||
<td><code>"Off"</code></td> |
|||
<td>Text of the <em>off</em> toggle</td> |
|||
</tr> |
|||
<tr> |
|||
<td>size</td> |
|||
<td>string</td> |
|||
<td><code>"normal"</code></td> |
|||
<td> |
|||
Size of the toggle. Possible values are:<code>large</code>,<code>normal</code>,<code>small</code>,<code>mini</code><br> |
|||
Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-sizes" target="_blank">Button Sizes</a> documentation for more information. |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onstyle</td> |
|||
<td>string</td> |
|||
<td><code>"primary"</code></td> |
|||
<td> |
|||
Style of the <em>on</em> toggle.<br>Possible values are:<code>default</code>,<code>primary</code>,<code>success</code>,<code>info</code>,<code>warning</code>,<code>danger</code><br> |
|||
Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-options" target="_blank">Button Options</a> documentation for more information. |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>offstyle</td> |
|||
<td>string</td> |
|||
<td><code>"default"</code></td> |
|||
<td> |
|||
Style of the <em>off</em> toggle.<br>Possible values are:<code>default</code>,<code>primary</code>,<code>success</code>,<code>info</code>,<code>warning</code>,<code>danger</code><br> |
|||
Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-options" target="_blank">Button Options</a> documentation for more information. |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>style</td> |
|||
<td>string</td> |
|||
<td></td> |
|||
<td> |
|||
Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference. |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>width</td> |
|||
<td>integer</td> |
|||
<td><em>null</em></td> |
|||
<td> |
|||
Sets the width of the toggle. if set to <em>null</em>, width will be calculated. |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>height</td> |
|||
<td>integer</td> |
|||
<td><em>null</em></td> |
|||
<td> |
|||
Sets the height of the toggle. if set to <em>null</em>, height will be calculated. |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<h3>Methods</h3> |
|||
<p>Methods can be used to control toggles directly.</p> |
|||
<div class="example"> |
|||
<input id="toggle-demo" type="checkbox" data-toggle="toggle"> |
|||
</div> |
|||
<div class="table-responsive"> |
|||
<table class="table table-striped table-condensed"> |
|||
<thead> |
|||
<tr> |
|||
<th>Method</th> |
|||
<th>Example</th> |
|||
<th>Description</th> |
|||
<th>Demo</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td><em>initialize</em></td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle()</code></td> |
|||
<td>Initializes the toggle plugin with options</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.init('#toggle-demo')">Initialize</button></td> |
|||
</tr> |
|||
<tr> |
|||
<td>destroy</td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle('destroy')</code></td> |
|||
<td>Destroys the toggle</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.destroy('#toggle-demo')">Destroy</button></td> |
|||
</tr> |
|||
<tr> |
|||
<td>on</td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle('on')</code></td> |
|||
<td>Sets the toggle to 'On' state</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.on('#toggle-demo')">On</button></td> |
|||
</tr> |
|||
<tr> |
|||
<td>off</td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle('off')</code></td> |
|||
<td>Sets the toggle to 'Off' state</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.off('#toggle-demo')">Off</button></td> |
|||
</tr> |
|||
<tr> |
|||
<td>toggle</td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle('toggle')</code></td> |
|||
<td>Toggles the state of the toggle</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.toggle('#toggle-demo')">Toggle</button></td> |
|||
</tr> |
|||
<tr> |
|||
<td>enable</td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle('enable')</code></td> |
|||
<td>Enables the toggle</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.enable('#toggle-demo')">Enable</button></td> |
|||
</tr> |
|||
<tr> |
|||
<td>disable</td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle('disable')</code></td> |
|||
<td>Disables the toggle</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.disable('#toggle-demo')">Disable</button></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div id="events" class="container"> |
|||
<h2>Events</h2> |
|||
<hr> |
|||
|
|||
<h3>Event Propagation</h3> |
|||
<p><span class="label label-primary">Note</span> All events are propagated to and from input element to the toggle. </p> |
|||
<p>You should listen to events from the <code><input type="checkbox"></code> directly rather than look for custom events.</p> |
|||
<div class="example"> |
|||
<input id="toggle-event" type="checkbox" data-toggle="toggle"> |
|||
<div id="console-event"></div> |
|||
<script> |
|||
$(function() { |
|||
$('#toggle-event').change(function() { |
|||
$('#console-event').html('Toggle: ' + $(this).prop('checked')) |
|||
}) |
|||
}) |
|||
</script> |
|||
</div> |
|||
|
|||
<h3>API vs Input</h3> |
|||
<p>This also means that using the API or Input to trigger events will work both ways.</p> |
|||
<div class="example"> |
|||
<input id="toggle-trigger" type="checkbox" data-toggle="toggle"> |
|||
<button class="btn btn-success" onclick="toggleOn()">On by API</button> |
|||
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button> |
|||
<button class="btn btn-success" onclick="toggleOnByInput()">On by Input</button> |
|||
<button class="btn btn-danger" onclick="toggleOffByInput()">Off by Input</button> |
|||
<script> |
|||
function toggleOn() { |
|||
$('#toggle-trigger').bootstrapToggle('on') |
|||
} |
|||
function toggleOff() { |
|||
$('#toggle-trigger').bootstrapToggle('off') |
|||
} |
|||
function toggleOnByInput() { |
|||
$('#toggle-trigger').prop('checked', true).change() |
|||
} |
|||
function toggleOffByInput() { |
|||
$('#toggle-trigger').prop('checked', false).change() |
|||
} |
|||
</script> |
|||
</div> |
|||
</div> |
|||
|
|||
<div id="demos" class="container"> |
|||
<h2>Demos</h2> |
|||
<hr> |
|||
|
|||
<h3>Sizes</h3> |
|||
<p>Bootstrap toggle is available in different sizes. Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-sizes" target="_blank">Button Sizes</a> documentation for more information.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-size="large"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-size="normal"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-size="small"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-size="mini"> |
|||
</div> |
|||
|
|||
<h3>Custom Sizes</h3> |
|||
<p>Bootstrap toggle can handle custom sizes by <code>data-width</code> and <code>data-height</code> options.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-width="100" data-height="75"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-height="75"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-width="100"> |
|||
</div> |
|||
|
|||
<h3>Colors</h3> |
|||
<p>Bootstrap Toggle supports various colors. Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-options" target="_blank">Button Options</a> documentation for more information.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="primary"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="info"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="danger"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="default"> |
|||
</div> |
|||
|
|||
<h3>Colors Mix</h3> |
|||
<p>You can style on state as well as the off state.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"> |
|||
</div> |
|||
|
|||
<h3>Custom Style</h3> |
|||
<p>Customized styles can be applied as easily.</p> |
|||
<div class="example"> |
|||
<style> |
|||
.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20px; } |
|||
.toggle.ios .toggle-handle { border-radius: 20px; } |
|||
</style> |
|||
<input type="checkbox" checked data-toggle="toggle" data-style="ios"> |
|||
<style> |
|||
.toggle.android { border-radius: 0px;} |
|||
.toggle.android .toggle-handle { border-radius: 0px; } |
|||
</style> |
|||
<input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="info"> |
|||
</div> |
|||
|
|||
<h3>Custom Text</h3> |
|||
<p>The text can be changed easily with attributes or options.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger"> |
|||
</div> |
|||
|
|||
<h3>Icons/Html Text</h3> |
|||
<p>You can easily add icons or images since html is supported for on/off text.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-on="<i class='fa fa-play'></i> Play" data-off="<i class='fa fa-pause'></i> Pause"> |
|||
</div> |
|||
|
|||
<h3>Multiple Lines of Text</h3> |
|||
<p>Toggles with multiple lines will adjust its heights.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-on="Hello<br>World" data-off="Goodbye<br>World"> |
|||
</div> |
|||
|
|||
<h3>Animation Speed</h3> |
|||
<p>Transition speed can be easily controlled with css <code>transition</code> property on <code>.toggle-group</code>. You can also turn animation off completely.</p> |
|||
<div class="example"> |
|||
<style> |
|||
.slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; } |
|||
.fast .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; } |
|||
.quick .toggle-group { transition: none; -webkit-transition: none; } |
|||
</style> |
|||
<input type="checkbox" checked data-toggle="toggle" data-style="slow"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-class="fast"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-style="quick"> |
|||
</div> |
|||
<div> |
|||
</main> |
|||
<footer> |
|||
<div class="container"> |
|||
<p> |
|||
<img class="nyt-logo" src="doc/nyt.png"> |
|||
<img class="nyt-logo" src="doc/nytdev.svg"> |
|||
</p> |
|||
<p>Designed and built by <a href="https://github.com/minhur" target="_blank">Min Hur</a> for <a href="http://developers.nytimes.com" target="_blank">The New York Times Company</a></p> |
|||
<p>Latest Version: 2.2.0 | Code licensed under MIT</p> |
|||
<p> |
|||
<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe> |
|||
<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe> |
|||
</p> |
|||
</div> |
|||
</footer> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script> |
|||
<script src="doc/script.js"></script> |
|||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> |
|||
<script src="js/bootstrap-toggle.js"></script> |
|||
<script> |
|||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
|||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
|||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
|||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
|||
ga('create', 'UA-55669452-1', 'auto'); |
|||
ga('send', 'pageview'); |
|||
</script> |
|||
</body> |
|||
</html> |
@ -1,180 +0,0 @@ |
|||
/*! ======================================================================== |
|||
* Bootstrap Toggle: bootstrap-toggle.js v2.2.0 |
|||
* http://www.bootstraptoggle.com
|
|||
* ======================================================================== |
|||
* Copyright 2014 Min Hur, The New York Times Company |
|||
* Licensed under MIT |
|||
* ======================================================================== */ |
|||
|
|||
|
|||
+function ($) { |
|||
'use strict'; |
|||
|
|||
// TOGGLE PUBLIC CLASS DEFINITION
|
|||
// ==============================
|
|||
|
|||
var Toggle = function (element, options) { |
|||
this.$element = $(element) |
|||
this.options = $.extend({}, this.defaults(), options) |
|||
this.render() |
|||
} |
|||
|
|||
Toggle.VERSION = '2.2.0' |
|||
|
|||
Toggle.DEFAULTS = { |
|||
on: 'On', |
|||
off: 'Off', |
|||
onstyle: 'primary', |
|||
offstyle: 'default', |
|||
size: 'normal', |
|||
style: '', |
|||
width: null, |
|||
height: null |
|||
} |
|||
|
|||
Toggle.prototype.defaults = function() { |
|||
return { |
|||
on: this.$element.attr('data-on') || Toggle.DEFAULTS.on, |
|||
off: this.$element.attr('data-off') || Toggle.DEFAULTS.off, |
|||
onstyle: this.$element.attr('data-onstyle') || Toggle.DEFAULTS.onstyle, |
|||
offstyle: this.$element.attr('data-offstyle') || Toggle.DEFAULTS.offstyle, |
|||
size: this.$element.attr('data-size') || Toggle.DEFAULTS.size, |
|||
style: this.$element.attr('data-style') || Toggle.DEFAULTS.style, |
|||
width: this.$element.attr('data-width') || Toggle.DEFAULTS.width, |
|||
height: this.$element.attr('data-height') || Toggle.DEFAULTS.height |
|||
} |
|||
} |
|||
|
|||
Toggle.prototype.render = function () { |
|||
this._onstyle = 'btn-' + this.options.onstyle |
|||
this._offstyle = 'btn-' + this.options.offstyle |
|||
var size = this.options.size === 'large' ? 'btn-lg' |
|||
: this.options.size === 'small' ? 'btn-sm' |
|||
: this.options.size === 'mini' ? 'btn-xs' |
|||
: '' |
|||
var $toggleOn = $('<label class="btn">').html(this.options.on) |
|||
.addClass(this._onstyle + ' ' + size) |
|||
var $toggleOff = $('<label class="btn">').html(this.options.off) |
|||
.addClass(this._offstyle + ' ' + size + ' active') |
|||
var $toggleHandle = $('<span class="toggle-handle btn btn-default">') |
|||
.addClass(size) |
|||
var $toggleGroup = $('<div class="toggle-group">') |
|||
.append($toggleOn, $toggleOff, $toggleHandle) |
|||
var $toggle = $('<div class="toggle btn" data-toggle="toggle">') |
|||
.addClass( this.$element.prop('checked') ? this._onstyle : this._offstyle+' off' ) |
|||
.addClass(size).addClass(this.options.style) |
|||
|
|||
this.$element.wrap($toggle) |
|||
$.extend(this, { |
|||
$toggle: this.$element.parent(), |
|||
$toggleOn: $toggleOn, |
|||
$toggleOff: $toggleOff, |
|||
$toggleGroup: $toggleGroup |
|||
}) |
|||
this.$toggle.append($toggleGroup) |
|||
|
|||
var width = this.options.width || Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth())+($toggleHandle.outerWidth()/2) |
|||
var height = this.options.height || Math.max($toggleOn.outerHeight(), $toggleOff.outerHeight()) |
|||
$toggleOn.addClass('toggle-on') |
|||
$toggleOff.addClass('toggle-off') |
|||
this.$toggle.css({ width: width, height: height }) |
|||
if (this.options.height) { |
|||
$toggleOn.css('line-height', $toggleOn.height() + 'px') |
|||
$toggleOff.css('line-height', $toggleOff.height() + 'px') |
|||
} |
|||
this.update(true) |
|||
this.trigger(true) |
|||
} |
|||
|
|||
Toggle.prototype.toggle = function () { |
|||
if (this.$element.prop('checked')) this.off() |
|||
else this.on() |
|||
} |
|||
|
|||
Toggle.prototype.on = function (silent) { |
|||
if (this.$element.prop('disabled')) return false |
|||
this.$toggle.removeClass(this._offstyle + ' off').addClass(this._onstyle) |
|||
this.$element.prop('checked', true) |
|||
if (!silent) this.trigger() |
|||
} |
|||
|
|||
Toggle.prototype.off = function (silent) { |
|||
if (this.$element.prop('disabled')) return false |
|||
this.$toggle.removeClass(this._onstyle).addClass(this._offstyle + ' off') |
|||
this.$element.prop('checked', false) |
|||
if (!silent) this.trigger() |
|||
} |
|||
|
|||
Toggle.prototype.enable = function () { |
|||
this.$toggle.removeAttr('disabled') |
|||
this.$element.prop('disabled', false) |
|||
} |
|||
|
|||
Toggle.prototype.disable = function () { |
|||
this.$toggle.attr('disabled', 'disabled') |
|||
this.$element.prop('disabled', true) |
|||
} |
|||
|
|||
Toggle.prototype.update = function (silent) { |
|||
if (this.$element.prop('disabled')) this.disable() |
|||
else this.enable() |
|||
if (this.$element.prop('checked')) this.on(silent) |
|||
else this.off(silent) |
|||
} |
|||
|
|||
Toggle.prototype.trigger = function (silent) { |
|||
this.$element.off('change.bs.toggle') |
|||
if (!silent) this.$element.change() |
|||
this.$element.on('change.bs.toggle', $.proxy(function() { |
|||
this.update() |
|||
}, this)) |
|||
} |
|||
|
|||
Toggle.prototype.destroy = function() { |
|||
this.$element.off('change.bs.toggle') |
|||
this.$toggleGroup.remove() |
|||
this.$element.removeData('bs.toggle') |
|||
this.$element.unwrap() |
|||
} |
|||
|
|||
// TOGGLE PLUGIN DEFINITION
|
|||
// ========================
|
|||
|
|||
function Plugin(option) { |
|||
return this.each(function () { |
|||
var $this = $(this) |
|||
var data = $this.data('bs.toggle') |
|||
var options = typeof option == 'object' && option |
|||
|
|||
if (!data) $this.data('bs.toggle', (data = new Toggle(this, options))) |
|||
if (typeof option == 'string' && data[option]) data[option]() |
|||
}) |
|||
} |
|||
|
|||
var old = $.fn.bootstrapToggle |
|||
|
|||
$.fn.bootstrapToggle = Plugin |
|||
$.fn.bootstrapToggle.Constructor = Toggle |
|||
|
|||
// TOGGLE NO CONFLICT
|
|||
// ==================
|
|||
|
|||
$.fn.toggle.noConflict = function () { |
|||
$.fn.bootstrapToggle = old |
|||
return this |
|||
} |
|||
|
|||
// TOGGLE DATA-API
|
|||
// ===============
|
|||
|
|||
$(function() { |
|||
$('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle() |
|||
}) |
|||
|
|||
$(document).on('click.bs.toggle', 'div[data-toggle^=toggle]', function(e) { |
|||
var $checkbox = $(this).find('input[type=checkbox]') |
|||
$checkbox.bootstrapToggle('toggle') |
|||
e.preventDefault() |
|||
}) |
|||
|
|||
}(jQuery); |
@ -1,9 +0,0 @@ |
|||
/*! ======================================================================== |
|||
* Bootstrap Toggle: bootstrap-toggle.js v2.2.0 |
|||
* http://www.bootstraptoggle.com
|
|||
* ======================================================================== |
|||
* Copyright 2014 Min Hur, The New York Times Company |
|||
* Licensed under MIT |
|||
* ======================================================================== */ |
|||
+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-lg":"small"===this.options.size?"btn-sm":"mini"===this.options.size?"btn-xs":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-default">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.outerWidth(),d.outerWidth())+e.outerWidth()/2,i=this.options.height||Math.max(c.outerHeight(),d.outerHeight());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery); |
|||
//# sourceMappingURL=bootstrap-toggle.min.js.map
|
@ -1 +0,0 @@ |
|||
{"version":3,"file":"bootstrap-toggle.min.js","sources":["bootstrap-toggle.js"],"names":["$","Plugin","option","this","each","$this","data","options","Toggle","element","$element","extend","defaults","render","VERSION","DEFAULTS","on","off","onstyle","offstyle","size","style","width","height","prototype","attr","_onstyle","_offstyle","$toggleOn","html","addClass","$toggleOff","$toggleHandle","$toggleGroup","append","$toggle","prop","wrap","parent","Math","max","outerWidth","outerHeight","css","update","trigger","toggle","silent","removeClass","enable","removeAttr","disable","change","proxy","destroy","remove","removeData","unwrap","old","fn","bootstrapToggle","Constructor","noConflict","document","e","$checkbox","find","preventDefault","jQuery"],"mappings":"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"} |
@ -1,180 +0,0 @@ |
|||
/*! ======================================================================== |
|||
* Bootstrap Toggle: bootstrap2-toggle.js v2.2.0 |
|||
* http://www.bootstraptoggle.com
|
|||
* ======================================================================== |
|||
* Copyright 2014 Min Hur, The New York Times Company |
|||
* Licensed under MIT |
|||
* ======================================================================== */ |
|||
|
|||
|
|||
+function ($) { |
|||
'use strict'; |
|||
|
|||
// TOGGLE PUBLIC CLASS DEFINITION
|
|||
// ==============================
|
|||
|
|||
var Toggle = function (element, options) { |
|||
this.$element = $(element) |
|||
this.options = $.extend({}, this.defaults(), options) |
|||
this.render() |
|||
} |
|||
|
|||
Toggle.VERSION = '2.2.0' |
|||
|
|||
Toggle.DEFAULTS = { |
|||
on: 'On', |
|||
off: 'Off', |
|||
onstyle: 'primary', |
|||
offstyle: 'default', |
|||
size: 'normal', |
|||
style: '', |
|||
width: null, |
|||
height: null |
|||
} |
|||
|
|||
Toggle.prototype.defaults = function() { |
|||
return { |
|||
on: this.$element.attr('data-on') || Toggle.DEFAULTS.on, |
|||
off: this.$element.attr('data-off') || Toggle.DEFAULTS.off, |
|||
onstyle: this.$element.attr('data-onstyle') || Toggle.DEFAULTS.onstyle, |
|||
offstyle: this.$element.attr('data-offstyle') || Toggle.DEFAULTS.offstyle, |
|||
size: this.$element.attr('data-size') || Toggle.DEFAULTS.size, |
|||
style: this.$element.attr('data-style') || Toggle.DEFAULTS.style, |
|||
width: this.$element.attr('data-width') || Toggle.DEFAULTS.width, |
|||
height: this.$element.attr('data-height') || Toggle.DEFAULTS.height |
|||
} |
|||
} |
|||
|
|||
Toggle.prototype.render = function () { |
|||
this._onstyle = 'btn-' + this.options.onstyle |
|||
this._offstyle = 'btn-' + this.options.offstyle |
|||
var size = this.options.size === 'large' ? 'btn-large' |
|||
: this.options.size === 'small' ? 'btn-small' |
|||
: this.options.size === 'mini' ? 'btn-mini' |
|||
: '' |
|||
var $toggleOn = $('<label class="btn">').html(this.options.on) |
|||
.addClass(this._onstyle + ' ' + size) |
|||
var $toggleOff = $('<label class="btn">').html(this.options.off) |
|||
.addClass(this._offstyle + ' ' + size + ' active') |
|||
var $toggleHandle = $('<span class="toggle-handle btn btn-default">') |
|||
.addClass(size) |
|||
var $toggleGroup = $('<div class="toggle-group">') |
|||
.append($toggleOn, $toggleOff, $toggleHandle) |
|||
var $toggle = $('<div class="toggle btn" data-toggle="toggle">') |
|||
.addClass( this.$element.prop('checked') ? this._onstyle : this._offstyle+' off' ) |
|||
.addClass(size).addClass(this.options.style) |
|||
|
|||
this.$element.wrap($toggle) |
|||
$.extend(this, { |
|||
$toggle: this.$element.parent(), |
|||
$toggleOn: $toggleOn, |
|||
$toggleOff: $toggleOff, |
|||
$toggleGroup: $toggleGroup |
|||
}) |
|||
this.$toggle.append($toggleGroup) |
|||
|
|||
var width = this.options.width || Math.max($toggleOn.width(), $toggleOff.width())+($toggleHandle.outerWidth()/2) |
|||
var height = this.options.height || Math.max($toggleOn.height(), $toggleOff.height()) |
|||
$toggleOn.addClass('toggle-on') |
|||
$toggleOff.addClass('toggle-off') |
|||
this.$toggle.css({ width: width, height: height }) |
|||
if (this.options.height) { |
|||
$toggleOn.css('line-height', $toggleOn.height() + 'px') |
|||
$toggleOff.css('line-height', $toggleOff.height() + 'px') |
|||
} |
|||
this.update(true) |
|||
this.trigger(true) |
|||
} |
|||
|
|||
Toggle.prototype.toggle = function () { |
|||
if (this.$element.prop('checked')) this.off() |
|||
else this.on() |
|||
} |
|||
|
|||
Toggle.prototype.on = function (silent) { |
|||
if (this.$element.prop('disabled')) return false |
|||
this.$toggle.removeClass(this._offstyle + ' off').addClass(this._onstyle) |
|||
this.$element.prop('checked', true) |
|||
if (!silent) this.trigger() |
|||
} |
|||
|
|||
Toggle.prototype.off = function (silent) { |
|||
if (this.$element.prop('disabled')) return false |
|||
this.$toggle.removeClass(this._onstyle).addClass(this._offstyle + ' off') |
|||
this.$element.prop('checked', false) |
|||
if (!silent) this.trigger() |
|||
} |
|||
|
|||
Toggle.prototype.enable = function () { |
|||
this.$toggle.removeAttr('disabled') |
|||
this.$element.prop('disabled', false) |
|||
} |
|||
|
|||
Toggle.prototype.disable = function () { |
|||
this.$toggle.attr('disabled', 'disabled') |
|||
this.$element.prop('disabled', true) |
|||
} |
|||
|
|||
Toggle.prototype.update = function (silent) { |
|||
if (this.$element.prop('disabled')) this.disable() |
|||
else this.enable() |
|||
if (this.$element.prop('checked')) this.on(silent) |
|||
else this.off(silent) |
|||
} |
|||
|
|||
Toggle.prototype.trigger = function (silent) { |
|||
this.$element.off('change.bs.toggle') |
|||
if (!silent) this.$element.change() |
|||
this.$element.on('change.bs.toggle', $.proxy(function() { |
|||
this.update() |
|||
}, this)) |
|||
} |
|||
|
|||
Toggle.prototype.destroy = function() { |
|||
this.$element.off('change.bs.toggle') |
|||
this.$toggleGroup.remove() |
|||
this.$element.removeData('bs.toggle') |
|||
this.$element.unwrap() |
|||
} |
|||
|
|||
// TOGGLE PLUGIN DEFINITION
|
|||
// ========================
|
|||
|
|||
function Plugin(option) { |
|||
return this.each(function () { |
|||
var $this = $(this) |
|||
var data = $this.data('bs.toggle') |
|||
var options = typeof option == 'object' && option |
|||
|
|||
if (!data) $this.data('bs.toggle', (data = new Toggle(this, options))) |
|||
if (typeof option == 'string' && data[option]) data[option]() |
|||
}) |
|||
} |
|||
|
|||
var old = $.fn.bootstrapToggle |
|||
|
|||
$.fn.bootstrapToggle = Plugin |
|||
$.fn.bootstrapToggle.Constructor = Toggle |
|||
|
|||
// TOGGLE NO CONFLICT
|
|||
// ==================
|
|||
|
|||
$.fn.toggle.noConflict = function () { |
|||
$.fn.bootstrapToggle = old |
|||
return this |
|||
} |
|||
|
|||
// TOGGLE DATA-API
|
|||
// ===============
|
|||
|
|||
$(function() { |
|||
$('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle() |
|||
}) |
|||
|
|||
$(document).on('click.bs.toggle', 'div[data-toggle^=toggle]', function(e) { |
|||
var $checkbox = $(this).find('input[type=checkbox]') |
|||
$checkbox.bootstrapToggle('toggle') |
|||
e.preventDefault() |
|||
}) |
|||
|
|||
}(jQuery); |
@ -1,9 +0,0 @@ |
|||
/*! ======================================================================== |
|||
* Bootstrap Toggle: bootstrap2-toggle.js v2.2.0 |
|||
* http://www.bootstraptoggle.com
|
|||
* ======================================================================== |
|||
* Copyright 2014 Min Hur, The New York Times Company |
|||
* Licensed under MIT |
|||
* ======================================================================== */ |
|||
+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-large":"small"===this.options.size?"btn-small":"mini"===this.options.size?"btn-mini":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-default">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.width(),d.width())+e.outerWidth()/2,i=this.options.height||Math.max(c.height(),d.height());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery); |
|||
//# sourceMappingURL=bootstrap2-toggle.min.js.map
|
@ -1 +0,0 @@ |
|||
{"version":3,"file":"bootstrap2-toggle.min.js","sources":["bootstrap2-toggle.js"],"names":["$","Plugin","option","this","each","$this","data","options","Toggle","element","$element","extend","defaults","render","VERSION","DEFAULTS","on","off","onstyle","offstyle","size","style","width","height","prototype","attr","_onstyle","_offstyle","$toggleOn","html","addClass","$toggleOff","$toggleHandle","$toggleGroup","append","$toggle","prop","wrap","parent","Math","max","outerWidth","css","update","trigger","toggle","silent","removeClass","enable","removeAttr","disable","change","proxy","destroy","remove","removeData","unwrap","old","fn","bootstrapToggle","Constructor","noConflict","document","e","$checkbox","find","preventDefault","jQuery"],"mappings":"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"} |
@ -1,28 +0,0 @@ |
|||
{ |
|||
"name": "bootstrap-toggle", |
|||
"description": "Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles", |
|||
"version": "2.2.2", |
|||
"main": "js/bootstrap-toggle.js", |
|||
"keywords": [ |
|||
"bootstrap", |
|||
"toggle", |
|||
"bootstrap-toggle", |
|||
"switch", |
|||
"bootstrap-switch" |
|||
], |
|||
"homepage": "http://www.bootstraptoggle.com", |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "https://github.com/minhur/bootstrap-toggle.git" |
|||
}, |
|||
"license": "MIT", |
|||
"author": "Min Hur <min.hur@gmail.com>", |
|||
"bugs": { |
|||
"url": "https://github.com/minhur/bootstrap-toggle/issues" |
|||
}, |
|||
"devDependencies": { |
|||
"grunt-contrib-clean": "^0.6.0", |
|||
"grunt-contrib-cssmin": "^0.10.0", |
|||
"grunt-contrib-uglify": "^0.6.0" |
|||
} |
|||
} |
@ -1,21 +0,0 @@ |
|||
The MIT License (MIT) |
|||
|
|||
Copyright (c) 2017, loading.io |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy |
|||
of this software and associated documentation files (the "Software"), to deal |
|||
in the Software without restriction, including without limitation the rights |
|||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|||
copies of the Software, and to permit persons to whom the Software is |
|||
furnished to do so, subject to the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be included in |
|||
all copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
|||
THE SOFTWARE. |
@ -1,49 +0,0 @@ |
|||
loading-Bar |
|||
============= |
|||
|
|||
loading-Bar is a highly flexible, open sourced progress bar library based on SVG. For demo and documentation, check out the official website: [https://loading.io/progress/](https://loading.io/progress/) |
|||
|
|||
|
|||
|
|||
Example |
|||
============= |
|||
|
|||
 |
|||
|
|||
|
|||
|
|||
Usage |
|||
============= |
|||
|
|||
download and include the required [JS](https://raw.githubusercontent.com/loadingio/loading-bar/master/dist/loading-bar.js) and [CSS](https://raw.githubusercontent.com/loadingio/loading-bar/master/dist/loading-bar.css) files: |
|||
|
|||
<link rel="stylesheet" type="text/css" href="loading-bar.css"/> |
|||
<script type="text/javascript" src="loading-bar.js"></script> |
|||
<div class="ldBar"></div> |
|||
|
|||
|
|||
Building |
|||
============= |
|||
|
|||
### Install prerequisites |
|||
|
|||
``` |
|||
sudo npm install -g gulp |
|||
``` |
|||
|
|||
### Build |
|||
|
|||
``` |
|||
git clone https://github.com/loadingio/loading-bar |
|||
cd loading-bar |
|||
npm install |
|||
gulp |
|||
``` |
|||
|
|||
Built files will be written into `./build` directory |
|||
|
|||
|
|||
LICENSE |
|||
============= |
|||
|
|||
MIT License |
@ -1,3 +0,0 @@ |
|||
build |
|||
.*.swp |
|||
node_modules |
@ -1,24 +0,0 @@ |
|||
#!/usr/bin/env bash |
|||
mkdir -p dist |
|||
echo "build src/loading-bar.ls ..." |
|||
./node_modules/.bin/lsc -cbp src/loading-bar.ls > dist/loading-bar-raw.js |
|||
echo "build src/presets.ls ..." |
|||
./node_modules/.bin/lsc -cbp src/presets.ls > dist/presets.js |
|||
echo "build src/loading-bar.styl -> dist/loading-bar.css ..." |
|||
./node_modules/.bin/stylus -p src/loading-bar.styl > dist/loading-bar.css |
|||
echo "bundle loading-bar ..." |
|||
./node_modules/.bin/browserify dist/loading-bar-raw.js > dist/loading-bar.js |
|||
rm -f dist/loading-bar-raw.js |
|||
rm -f dist/presets.js |
|||
|
|||
echo "minifying loading-bar.js ..." |
|||
./node_modules/.bin/uglifyjs dist/loading-bar.js > dist/loading-bar.min.js |
|||
echo "minifying loading-bar.css ..." |
|||
./node_modules/.bin/uglifycss dist/loading-bar.css > dist/loading-bar.min.css |
|||
|
|||
echo "zip loading-bar.js and loading-bar.css ..." |
|||
rm -f dist/loading-bar.zip |
|||
zip -r dist/loading-bar.zip dist/loading-bar.js dist/loading-bar.css dist/loading-bar.min.js dist/loading-bar.min.css |
|||
|
|||
echo "done." |
|||
|
@ -1,148 +0,0 @@ |
|||
argv = require 'yargs' .argv |
|||
only-compile = false |
|||
|
|||
|
|||
require! <[ watchify gulp browserify glob path fs globby touch gulp-livescript]> |
|||
require! 'prelude-ls': {union, join, keys, map, unique} |
|||
require! 'vinyl-source-stream': source |
|||
require! 'vinyl-buffer': buffer |
|||
require! 'gulp-watch': watch |
|||
require! 'gulp-pug': pug |
|||
require! 'gulp-stylus': stylus |
|||
require! 'node-notifier': notifier |
|||
require! 'gulp-concat': cat |
|||
require! 'gulp-uglify': uglify |
|||
require! 'gulp-flatten': flatten |
|||
require! 'gulp-tap': tap |
|||
require! 'gulp-cached': cache |
|||
require! 'gulp-sourcemaps': sourcemaps |
|||
require! 'browserify-livescript' |
|||
require! 'run-sequence' |
|||
require! 'through2':through |
|||
require! 'optimize-js' |
|||
require! 'gulp-if-else': if-else |
|||
require! 'gulp-rename': rename |
|||
require! 'gulp-zip': zip |
|||
require! 'gulp-remove-files': remove-files |
|||
|
|||
# Build Settings |
|||
notification-enabled = yes |
|||
|
|||
# Project Folder Structure |
|||
src-path = "#{__dirname}/src" |
|||
build-path = "#{__dirname}/build" |
|||
out-dir = argv.out-dir or build-path |
|||
|
|||
on-error = (source, msg) -> |
|||
msg = try |
|||
msg.to-string! |
|||
catch |
|||
"unknown message: #{e}" |
|||
console-msg = "GULP ERROR: #{source} : #{msg}" |
|||
console.log console-msg |
|||
|
|||
log-info = (source, msg) -> |
|||
msg = try |
|||
msg.to-string! |
|||
catch |
|||
"unknown message: #{e}" |
|||
console-msg = "GULP INFO: #{source} : #{msg}" |
|||
console.log console-msg |
|||
|
|||
ls-entry-file = "#{src-path}/loading-bar.ls" |
|||
|
|||
for-browserify = |
|||
"#{src-path}/*.ls" |
|||
... |
|||
|
|||
|
|||
# Organize Tasks |
|||
gulp.task \default, -> |
|||
do function run-all |
|||
gulp.start do |
|||
\lib |
|||
\browserify |
|||
\css |
|||
\zip |
|||
\compressjs |
|||
... |
|||
|
|||
watch for-browserify, -> |
|||
gulp.start \browserify |
|||
watch ["#{src-path}/*.styl"], -> |
|||
gulp.start \css |
|||
watch ["#{src-path}/*.ls"], -> |
|||
gulp.start \lib |
|||
watch ["#{out-dir}/*.js", "#{out-dir}/*.css"], -> |
|||
gulp.start \zip |
|||
watch ["#{out-dir}/loading-bar.js"], -> |
|||
gulp.start \compressjs |
|||
|
|||
|
|||
browserify-cache = {} |
|||
bundler = browserify do |
|||
entries: ls-entry-file |
|||
debug: true |
|||
paths: |
|||
src-path |
|||
... |
|||
extensions: <[ .ls ]> |
|||
cache: browserify-cache |
|||
package-cache: {} |
|||
plugin: |
|||
watchify unless only-compile |
|||
... |
|||
|
|||
bundler.transform browserify-livescript |
|||
|
|||
first-browserify-done = no |
|||
|
|||
function bundle |
|||
bundler |
|||
.bundle! |
|||
.on \error, (err) -> |
|||
msg = try |
|||
err.message |
|||
catch |
|||
err |
|||
on-error \browserify, msg |
|||
@emit \end |
|||
.pipe source "loading-bar.js" |
|||
.pipe buffer! |
|||
#.pipe sourcemaps.init {+load-maps, +large-files} |
|||
.pipe if-else only-compile, uglify |
|||
#.pipe rename basename: 'app' |
|||
#.pipe sourcemaps.write '.' |
|||
.pipe gulp.dest out-dir |
|||
.pipe tap (file) -> |
|||
log-info \browserify, "Browserify finished #{if out-dir isnt build-path then "out-dir: #{out-dir}"}" |
|||
console.log "------------------------------------------" |
|||
first-browserify-done := yes |
|||
|
|||
gulp.task \browserify, -> |
|||
bundle! |
|||
|
|||
gulp.task \lib, -> |
|||
gulp.src \src/*.ls |
|||
.pipe gulp-livescript bare: true |
|||
.pipe gulp.dest 'lib' |
|||
|
|||
gulp.task \css, -> |
|||
gulp.src \src/loading-bar.styl |
|||
.pipe stylus({compress: true}) |
|||
.pipe gulp.dest out-dir |
|||
.pipe tap (file) -> |
|||
log-info \css, "Stylus -> CSS finished #{if out-dir isnt build-path then "out-dir: #{out-dir}"}" |
|||
console.log "------------------------------------------" |
|||
|
|||
gulp.task \zip, -> |
|||
gulp.src ["#out-dir/*.js","#out-dir/*.css", "!build/*.min.*"] |
|||
.pipe zip("loading-bar.zip") |
|||
.pipe gulp.dest out-dir |
|||
|
|||
|
|||
gulp.task \compressjs, -> |
|||
gulp.src ["#out-dir/*.js", "!build/*.min.*"] |
|||
.pipe uglify! |
|||
.pipe rename suffix: \.min |
|||
.pipe gulp.dest out-dir |
Before Width: | Height: | Size: 331 KiB |
@ -1 +0,0 @@ |
|||
loading bar |
@ -1,22 +0,0 @@ |
|||
var x$; |
|||
x$ = angular.module('loadingio', []); |
|||
x$.directive('ldbar', ['$compile', '$timeout'].concat(function($compile, $timeout){ |
|||
return { |
|||
restrict: 'A', |
|||
scope: { |
|||
model: '=ngModel', |
|||
config: '=config' |
|||
}, |
|||
link: function(s, e, a, c){ |
|||
var bar; |
|||
if (e[0]) { |
|||
bar = !e[0].ldBar |
|||
? new ldBar(e[0], s.config || {}) |
|||
: e[0].ldBar; |
|||
} |
|||
return s.$watch('model', function(n, o){ |
|||
return bar.set(n); |
|||
}); |
|||
} |
|||
}; |
|||
})); |
@ -1,5 +0,0 @@ |
|||
export = ldBar; |
|||
declare class ldBar { |
|||
constructor(element: any, options: object); |
|||
set(value: number): void; |
|||
} |
@ -1,712 +0,0 @@ |
|||
var presets, simpleStr, wrap, slice$ = [].slice, toString$ = {}.toString; |
|||
presets = require('./presets').presets; |
|||
simpleStr = function(arr){ |
|||
return arr.join(''); |
|||
}; |
|||
wrap = function(content){ |
|||
return "data:image/svg+xml;base64," + btoa(content); |
|||
}; |
|||
(function(){ |
|||
var make, handler, ldBar; |
|||
make = { |
|||
head: function(viewBox){ |
|||
return "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"" + viewBox + "\">"; |
|||
}, |
|||
gradient: function(dir, dur){ |
|||
var colors, ret, len, gx, gy, x, y, i$, i, idx; |
|||
dir == null && (dir = 45); |
|||
dur == null && (dur = 1); |
|||
colors = slice$.call(arguments, 2); |
|||
ret = [this.head("0 0 100 100")]; |
|||
len = colors.length * 4 + 1; |
|||
dir = dir * Math.PI / 180; |
|||
gx = Math.pow(Math.cos(dir), 2); |
|||
gy = Math.sqrt(gx - Math.pow(gx, 2)); |
|||
if (dir > Math.PI * 0.25) { |
|||
gy = Math.pow(Math.sin(dir), 2); |
|||
gx = Math.sqrt(gy - Math.pow(gy, 2)); |
|||
} |
|||
x = gx * 100; |
|||
y = gy * 100; |
|||
ret.push("<defs><linearGradient id=\"gradient\" x1=\"0\" x2=\"" + gx + "\" y1=\"0\" y2=\"" + gy + "\">"); |
|||
for (i$ = 0; i$ < len; ++i$) { |
|||
i = i$; |
|||
idx = i * 100 / (len - 1); |
|||
ret.push("<stop offset=\"" + idx + "%\" stop-color=\"" + colors[i % colors.length] + "\"/>"); |
|||
} |
|||
ret.push("</linearGradient></defs>\n<rect x=\"0\" y=\"0\" width=\"400\" height=\"400\" fill=\"url(#gradient)\">\n<animateTransform attributeName=\"transform\" type=\"translate\" from=\"-" + x + ",-" + y + "\"\nto=\"0,0\" dur=\"" + dur + "s\" repeatCount=\"indefinite\"/></rect></svg>"); |
|||
return wrap(ret.join("")); |
|||
}, |
|||
stripe: function(c1, c2, dur){ |
|||
var ret, i; |
|||
c1 == null && (c1 = '#b4b4b4'); |
|||
c2 == null && (c2 = '#e6e6e6'); |
|||
dur == null && (dur = 1); |
|||
ret = [this.head("0 0 100 100")]; |
|||
ret = ret.concat([ |
|||
"<rect fill=\"" + c2 + "\" width=\"100\" height=\"100\"/>", "<g><g>", (function(){ |
|||
var i$, results$ = []; |
|||
for (i$ = 0; i$ < 13; ++i$) { |
|||
i = i$; |
|||
results$.push(("<polygon fill=\"" + c1 + "\" ") + ("points=\"" + (-90 + i * 20) + ",100 " + (-100 + i * 20) + ",") + ("100 " + (-60 + i * 20) + ",0 " + (-50 + i * 20) + ",0 \"/>")); |
|||
} |
|||
return results$; |
|||
}()).join(""), "</g><animateTransform attributeName=\"transform\" type=\"translate\" ", "from=\"0,0\" to=\"20,0\" dur=\"" + dur + "s\" repeatCount=\"indefinite\"/></g></svg>" |
|||
].join("")); |
|||
return wrap(ret); |
|||
}, |
|||
bubble: function(c1, c2, count, dur, size, sw){ |
|||
var ret, i$, i, idx, x, r, d; |
|||
c1 == null && (c1 = '#39d'); |
|||
c2 == null && (c2 = '#9cf'); |
|||
count == null && (count = 15); |
|||
dur == null && (dur = 1); |
|||
size == null && (size = 6); |
|||
sw == null && (sw = 1); |
|||
ret = [this.head("0 0 200 200"), "<rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" fill=\"" + c1 + "\"/>"]; |
|||
for (i$ = 0; i$ < count; ++i$) { |
|||
i = i$; |
|||
idx = -(i / count) * dur; |
|||
x = Math.random() * 184 + 8; |
|||
r = (Math.random() * 0.7 + 0.3) * size; |
|||
d = dur * (1 + Math.random() * 0.5); |
|||
ret.push(["<circle cx=\"" + x + "\" cy=\"0\" r=\"" + r + "\" fill=\"none\" stroke=\"" + c2 + "\" stroke-width=\"" + sw + "\">", "<animate attributeName=\"cy\" values=\"190;-10\" times=\"0;1\" ", "dur=\"" + d + "s\" begin=\"" + idx + "s\" repeatCount=\"indefinite\"/>", "</circle>", "<circle cx=\"" + x + "\" cy=\"0\" r=\"" + r + "\" fill=\"none\" stroke=\"" + c2 + "\" stroke-width=\"" + sw + "\">", "<animate attributeName=\"cy\" values=\"390;190\" times=\"0;1\" ", "dur=\"" + d + "s\" begin=\"" + idx + "s\" repeatCount=\"indefinite\"/>", "</circle>"].join("")); |
|||
} |
|||
return wrap(ret.join("") + "</svg>"); |
|||
} |
|||
}; |
|||
handler = { |
|||
queue: {}, |
|||
running: false, |
|||
main: function(timestamp){ |
|||
var keepon, removed, k, ref$, func, ret, this$ = this; |
|||
keepon = false; |
|||
removed = []; |
|||
for (k in ref$ = this.queue) { |
|||
func = ref$[k]; |
|||
ret = func(timestamp); |
|||
if (!ret) { |
|||
removed.push(func); |
|||
} |
|||
keepon = keepon || ret; |
|||
} |
|||
for (k in ref$ = this.queue) { |
|||
func = ref$[k]; |
|||
if (removed.indexOf(func) >= 0) { |
|||
delete this.queue[k]; |
|||
} |
|||
} |
|||
if (keepon) { |
|||
return requestAnimationFrame(function(it){ |
|||
return this$.main(it); |
|||
}); |
|||
} else { |
|||
return this.running = false; |
|||
} |
|||
}, |
|||
add: function(key, f){ |
|||
var this$ = this; |
|||
if (!this.queue[key]) { |
|||
this.queue[key] = f; |
|||
} |
|||
if (!this.running) { |
|||
this.running = true; |
|||
return requestAnimationFrame(function(it){ |
|||
return this$.main(it); |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
window.ldBar = ldBar = function(selector, option){ |
|||
var xmlns, root, cls, idPrefix, id, domTree, newNode, x$, config, attr, that, isStroke, parseRes, dom, svg, text, group, length, path0, path1, patimg, img, ret, size, this$ = this; |
|||
option == null && (option = {}); |
|||
xmlns = { |
|||
xlink: "http://www.w3.org/1999/xlink" |
|||
}; |
|||
root = toString$.call(selector).slice(8, -1) === 'String' ? document.querySelector(selector) : selector; |
|||
if (!root.ldBar) { |
|||
root.ldBar = this; |
|||
} else { |
|||
return root.ldBar; |
|||
} |
|||
cls = root.getAttribute('class') || ''; |
|||
if (!~cls.indexOf('ldBar')) { |
|||
root.setAttribute('class', cls + " ldBar"); |
|||
} |
|||
idPrefix = "ldBar-" + Math.random().toString(16).substring(2); |
|||
id = { |
|||
key: idPrefix, |
|||
clip: idPrefix + "-clip", |
|||
filter: idPrefix + "-filter", |
|||
pattern: idPrefix + "-pattern", |
|||
mask: idPrefix + "-mask", |
|||
maskPath: idPrefix + "-mask-path" |
|||
}; |
|||
domTree = function(n, o){ |
|||
var k, v; |
|||
n = newNode(n); |
|||
for (k in o) { |
|||
v = o[k]; |
|||
if (k !== 'attr') { |
|||
n.appendChild(domTree(k, v || {})); |
|||
} |
|||
} |
|||
n.attrs(o.attr || {}); |
|||
return n; |
|||
}; |
|||
newNode = function(n){ |
|||
return document.createElementNS("http://www.w3.org/2000/svg", n); |
|||
}; |
|||
x$ = document.body.__proto__.__proto__.__proto__; |
|||
x$.text = function(t){ |
|||
return this.appendChild(document.createTextNode(t)); |
|||
}; |
|||
x$.attrs = function(o){ |
|||
var k, v, ret, results$ = []; |
|||
for (k in o) { |
|||
v = o[k]; |
|||
ret = /([^:]+):([^:]+)/.exec(k); |
|||
if (!ret || !xmlns[ret[1]]) { |
|||
results$.push(this.setAttribute(k, v)); |
|||
} else { |
|||
results$.push(this.setAttributeNS(xmlns[ret[1]], k, v)); |
|||
} |
|||
} |
|||
return results$; |
|||
}; |
|||
x$.styles = function(o){ |
|||
var k, v, results$ = []; |
|||
for (k in o) { |
|||
v = o[k]; |
|||
results$.push(this.style[k] = v); |
|||
} |
|||
return results$; |
|||
}; |
|||
x$.append = function(n){ |
|||
var r; |
|||
return this.appendChild(r = document.createElementNS("http://www.w3.og/2000/svg", n)); |
|||
}; |
|||
x$.attr = function(n, v){ |
|||
if (v != null) { |
|||
return this.setAttribute(n, v); |
|||
} else { |
|||
return this.getAttribute(n); |
|||
} |
|||
}; |
|||
config = { |
|||
"type": 'stroke', |
|||
"img": '', |
|||
"path": 'M10 10L90 10M90 8M90 12', |
|||
"fill-dir": 'btt', |
|||
"fill": '#25b', |
|||
"fill-background": '#ddd', |
|||
"fill-background-extrude": 3, |
|||
"pattern-size": null, |
|||
"stroke-dir": 'normal', |
|||
"stroke": '#25b', |
|||
"stroke-width": '3', |
|||
"stroke-trail": '#ddd', |
|||
"stroke-trail-width": 0.5, |
|||
"duration": 1, |
|||
"easing": 'linear', |
|||
"value": 0, |
|||
"img-size": null, |
|||
"bbox": null, |
|||
"set-dim": true, |
|||
"aspect-ratio": "xMidYMid", |
|||
"transition-in": false, |
|||
"min": 0, |
|||
"max": 100, |
|||
"precision": 0, |
|||
"padding": undefined |
|||
}; |
|||
config["preset"] = root.attr("data-preset") || option["preset"]; |
|||
if (config.preset != null) { |
|||
import$(config, presets[config.preset]); |
|||
} |
|||
for (attr in config) { |
|||
if (that = that = root.attr("data-" + attr)) { |
|||
config[attr] = that; |
|||
} |
|||
} |
|||
import$(config, option); |
|||
if (config.img) { |
|||
config.path = null; |
|||
} |
|||
isStroke = config.type === 'stroke'; |
|||
parseRes = function(v){ |
|||
var parser, ret; |
|||
parser = /data:ldbar\/res,([^()]+)\(([^)]+)\)/; |
|||
ret = parser.exec(v); |
|||
if (!ret) { |
|||
return v; |
|||
} |
|||
return ret = make[ret[1]].apply(make, ret[2].split(',')); |
|||
}; |
|||
config.fill = parseRes(config.fill); |
|||
config.stroke = parseRes(config.stroke); |
|||
if (config["set-dim"] === 'false') { |
|||
config["set-dim"] = false; |
|||
} |
|||
dom = { |
|||
attr: { |
|||
"xmlns:xlink": 'http://www.w3.org/1999/xlink', |
|||
preserveAspectRatio: config["aspect-ratio"], |
|||
width: "100%", |
|||
height: "100%" |
|||
}, |
|||
defs: { |
|||
filter: { |
|||
attr: { |
|||
id: id.filter, |
|||
x: -1, |
|||
y: -1, |
|||
width: 3, |
|||
height: 3 |
|||
}, |
|||
feMorphology: { |
|||
attr: { |
|||
operator: +config["fill-background-extrude"] >= 0 ? 'dilate' : 'erode', |
|||
radius: Math.abs(+config["fill-background-extrude"]) |
|||
} |
|||
}, |
|||
feColorMatrix: { |
|||
attr: { |
|||
values: '0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0', |
|||
result: "cm" |
|||
} |
|||
} |
|||
}, |
|||
mask: { |
|||
attr: { |
|||
id: id.mask |
|||
}, |
|||
image: { |
|||
attr: { |
|||
"xlink:href": config.img, |
|||
filter: "url(#" + id.filter + ")", |
|||
x: 0, |
|||
y: 0, |
|||
width: 100, |
|||
height: 100, |
|||
preserveAspectRatio: config["aspect-ratio"] |
|||
} |
|||
} |
|||
}, |
|||
g: { |
|||
mask: { |
|||
attr: { |
|||
id: id.maskPath |
|||
}, |
|||
path: { |
|||
attr: { |
|||
d: config.path || "", |
|||
fill: '#fff', |
|||
stroke: '#fff', |
|||
filter: "url(#" + id.filter + ")" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
clipPath: { |
|||
attr: { |
|||
id: id.clip |
|||
}, |
|||
rect: { |
|||
attr: { |
|||
'class': 'mask', |
|||
fill: '#000' |
|||
} |
|||
} |
|||
}, |
|||
pattern: { |
|||
attr: { |
|||
id: id.pattern, |
|||
patternUnits: 'userSpaceOnUse', |
|||
x: 0, |
|||
y: 0, |
|||
width: 300, |
|||
height: 300 |
|||
}, |
|||
image: { |
|||
attr: { |
|||
x: 0, |
|||
y: 0, |
|||
width: 300, |
|||
height: 300 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
svg = domTree('svg', dom); |
|||
text = document.createElement('div'); |
|||
text.setAttribute('class', 'ldBar-label'); |
|||
root.appendChild(svg); |
|||
root.appendChild(text); |
|||
group = [0, 0]; |
|||
length = 0; |
|||
this.fit = function(){ |
|||
var that, box, d, rect; |
|||
if (that = config["bbox"]) { |
|||
box = that.split(' ').map(function(it){ |
|||
return +it.trim(); |
|||
}); |
|||
box = { |
|||
x: box[0], |
|||
y: box[1], |
|||
width: box[2], |
|||
height: box[3] |
|||
}; |
|||
} else { |
|||
box = group[1].getBBox(); |
|||
} |
|||
if (!box || box.width === 0 || box.height === 0) { |
|||
box = { |
|||
x: 0, |
|||
y: 0, |
|||
width: 100, |
|||
height: 100 |
|||
}; |
|||
} |
|||
d = Math.max.apply(null, ['stroke-width', 'stroke-trail-width', 'fill-background-extrude'].map(function(it){ |
|||
return config[it]; |
|||
})) * 1.5; |
|||
if (config["padding"] != null) { |
|||
d = +config["padding"]; |
|||
} |
|||
svg.attrs({ |
|||
viewBox: [box.x - d, box.y - d, box.width + d * 2, box.height + d * 2].join(" ") |
|||
}); |
|||
if (config["set-dim"]) { |
|||
['width', 'height'].map(function(it){ |
|||
if (!root.style[it] || this$.fit[it]) { |
|||
root.style[it] = (box[it] + d * 2) + "px"; |
|||
return this$.fit[it] = true; |
|||
} |
|||
}); |
|||
} |
|||
rect = group[0].querySelector('rect'); |
|||
if (rect) { |
|||
return rect.attrs({ |
|||
x: box.x - d, |
|||
y: box.y - d, |
|||
width: box.width + d * 2, |
|||
height: box.height + d * 2 |
|||
}); |
|||
} |
|||
}; |
|||
if (config.path) { |
|||
if (isStroke) { |
|||
group[0] = domTree('g', { |
|||
path: { |
|||
attr: { |
|||
d: config.path, |
|||
fill: 'none', |
|||
'class': 'baseline' |
|||
} |
|||
} |
|||
}); |
|||
} else { |
|||
group[0] = domTree('g', { |
|||
rect: { |
|||
attr: { |
|||
x: 0, |
|||
y: 0, |
|||
width: 100, |
|||
height: 100, |
|||
mask: "url(#" + id.maskPath + ")", |
|||
fill: config["fill-background"], |
|||
'class': 'frame' |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
svg.appendChild(group[0]); |
|||
group[1] = domTree('g', { |
|||
path: { |
|||
attr: { |
|||
d: config.path, |
|||
'class': isStroke ? 'mainline' : 'solid', |
|||
"clip-path": config.type === 'fill' ? "url(#" + id.clip + ")" : '' |
|||
} |
|||
} |
|||
}); |
|||
svg.appendChild(group[1]); |
|||
path0 = group[0].querySelector(isStroke ? 'path' : 'rect'); |
|||
path1 = group[1].querySelector('path'); |
|||
if (isStroke) { |
|||
path1.attrs({ |
|||
fill: 'none' |
|||
}); |
|||
} |
|||
patimg = svg.querySelector('pattern image'); |
|||
img = new Image(); |
|||
img.addEventListener('load', function(){ |
|||
var box, that; |
|||
box = (that = config["pattern-size"]) |
|||
? { |
|||
width: +that, |
|||
height: +that |
|||
} |
|||
: img.width && img.height |
|||
? { |
|||
width: img.width, |
|||
height: img.height |
|||
} |
|||
: { |
|||
width: 300, |
|||
height: 300 |
|||
}; |
|||
svg.querySelector('pattern').attrs({ |
|||
width: box.width, |
|||
height: box.height |
|||
}); |
|||
return patimg.attrs({ |
|||
width: box.width, |
|||
height: box.height |
|||
}); |
|||
}); |
|||
if (/.+\..+|^data:/.exec(!isStroke |
|||
? config.fill |
|||
: config.stroke)) { |
|||
img.src = !isStroke |
|||
? config.fill |
|||
: config.stroke; |
|||
patimg.attrs({ |
|||
"xlink:href": img.src |
|||
}); |
|||
} |
|||
if (isStroke) { |
|||
path0.attrs({ |
|||
stroke: config["stroke-trail"], |
|||
"stroke-width": config["stroke-trail-width"] |
|||
}); |
|||
path1.attrs({ |
|||
"stroke-width": config["stroke-width"], |
|||
stroke: /.+\..+|^data:/.exec(config.stroke) |
|||
? "url(#" + id.pattern + ")" |
|||
: config.stroke |
|||
}); |
|||
} |
|||
if (config.fill && !isStroke) { |
|||
path1.attrs({ |
|||
fill: /.+\..+|^data:/.exec(config.fill) |
|||
? "url(#" + id.pattern + ")" |
|||
: config.fill |
|||
}); |
|||
} |
|||
length = path1.getTotalLength(); |
|||
this.fit(); |
|||
this.inited = true; |
|||
} else if (config.img) { |
|||
if (config["img-size"]) { |
|||
ret = config["img-size"].split(','); |
|||
size = { |
|||
width: +ret[0], |
|||
height: +ret[1] |
|||
}; |
|||
} else { |
|||
size = { |
|||
width: 100, |
|||
height: 100 |
|||
}; |
|||
} |
|||
group[0] = domTree('g', { |
|||
rect: { |
|||
attr: { |
|||
x: 0, |
|||
y: 0, |
|||
width: 100, |
|||
height: 100, |
|||
mask: "url(#" + id.mask + ")", |
|||
fill: config["fill-background"] |
|||
} |
|||
} |
|||
}); |
|||
svg.querySelector('mask image').attrs({ |
|||
width: size.width, |
|||
height: size.height |
|||
}); |
|||
group[1] = domTree('g', { |
|||
image: { |
|||
attr: { |
|||
width: size.width, |
|||
height: size.height, |
|||
x: 0, |
|||
y: 0, |
|||
preserveAspectRatio: config["aspect-ratio"], |
|||
"clip-path": config.type === 'fill' ? "url(#" + id.clip + ")" : '', |
|||
"xlink:href": config.img, |
|||
'class': 'solid' |
|||
} |
|||
} |
|||
}); |
|||
img = new Image(); |
|||
img.addEventListener('load', function(){ |
|||
var ret, size; |
|||
if (config["img-size"]) { |
|||
ret = config["img-size"].split(','); |
|||
size = { |
|||
width: +ret[0], |
|||
height: +ret[1] |
|||
}; |
|||
} else if (img.width && img.height) { |
|||
size = { |
|||
width: img.width, |
|||
height: img.height |
|||
}; |
|||
} else { |
|||
size = { |
|||
width: 100, |
|||
height: 100 |
|||
}; |
|||
} |
|||
svg.querySelector('mask image').attrs({ |
|||
width: size.width, |
|||
height: size.height |
|||
}); |
|||
group[1].querySelector('image').attrs({ |
|||
width: size.width, |
|||
height: size.height |
|||
}); |
|||
this$.fit(); |
|||
this$.set(undefined, false); |
|||
return this$.inited = true; |
|||
}); |
|||
img.src = config.img; |
|||
svg.appendChild(group[0]); |
|||
svg.appendChild(group[1]); |
|||
} |
|||
svg.attrs({ |
|||
width: '100%', |
|||
height: '100%' |
|||
}); |
|||
this.transition = { |
|||
value: { |
|||
src: 0, |
|||
des: 0 |
|||
}, |
|||
time: {}, |
|||
ease: function(t, b, c, d){ |
|||
t = t / (d * 0.5); |
|||
if (t < 1) { |
|||
return c * 0.5 * t * t + b; |
|||
} |
|||
t = t - 1; |
|||
return -c * 0.5 * (t * (t - 2) - 1) + b; |
|||
}, |
|||
handler: function(time, doTransition){ |
|||
var ref$, min, max, prec, dv, dt, dur, v, p, node, style, box, dir; |
|||
doTransition == null && (doTransition = true); |
|||
if (this.time.src == null) { |
|||
this.time.src = time; |
|||
} |
|||
ref$ = [config["min"], config["max"], 1 / config["precision"]], min = ref$[0], max = ref$[1], prec = ref$[2]; |
|||
ref$ = [this.value.des - this.value.src, (time - this.time.src) * 0.001, +config["duration"] || 1], dv = ref$[0], dt = ref$[1], dur = ref$[2]; |
|||
v = doTransition |
|||
? this.ease(dt, this.value.src, dv, dur) |
|||
: this.value.des; |
|||
if (config.precision) { |
|||
v = Math.round(v * prec) / prec; |
|||
} else if (doTransition) { |
|||
v = Math.round(v); |
|||
} |
|||
v >= min || (v = min); |
|||
v <= max || (v = max); |
|||
text.textContent = v; |
|||
p = 100.0 * (v - min) / (max - min); |
|||
if (isStroke) { |
|||
node = path1; |
|||
style = { |
|||
"stroke-dasharray": config["stroke-dir"] === 'reverse' |
|||
? "0 " + length * (100 - p) * 0.01 + " " + length * p * 0.01 + " 0" |
|||
: p * 0.01 * length + " " + ((100 - p) * 0.01 * length + 1) |
|||
}; |
|||
} else { |
|||
box = group[1].getBBox(); |
|||
dir = config["fill-dir"]; |
|||
style = dir === 'btt' || !dir |
|||
? { |
|||
y: box.y + box.height * (100 - p) * 0.01, |
|||
height: box.height * p * 0.01, |
|||
x: box.x, |
|||
width: box.width |
|||
} |
|||
: dir === 'ttb' |
|||
? { |
|||
y: box.y, |
|||
height: box.height * p * 0.01, |
|||
x: box.x, |
|||
width: box.width |
|||
} |
|||
: dir === 'ltr' |
|||
? { |
|||
y: box.y, |
|||
height: box.height, |
|||
x: box.x, |
|||
width: box.width * p * 0.01 |
|||
} |
|||
: dir === 'rtl' ? { |
|||
y: box.y, |
|||
height: box.height, |
|||
x: box.x + box.width * (100 - p) * 0.01, |
|||
width: box.width * p * 0.01 |
|||
} : void 8; |
|||
node = svg.querySelector('rect'); |
|||
} |
|||
node.attrs(style); |
|||
if (dt >= dur) { |
|||
delete this.time.src; |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
start: function(src, des, doTransition){ |
|||
var ref$, this$ = this; |
|||
ref$ = this.value; |
|||
ref$.src = src; |
|||
ref$.des = des; |
|||
!!(root.offsetWidth || root.offsetHeight || root.getClientRects().length); |
|||
if (!doTransition || !(root.offsetWidth || root.offsetHeight || root.getClientRects().length)) { |
|||
this.time.src = 0; |
|||
this.handler(1000, false); |
|||
return; |
|||
} |
|||
return handler.add(id.key, function(time){ |
|||
return this$.handler(time); |
|||
}); |
|||
} |
|||
}; |
|||
this.set = function(v, doTransition){ |
|||
var src, des; |
|||
doTransition == null && (doTransition = true); |
|||
src = this.value || 0; |
|||
if (v != null) { |
|||
this.value = v; |
|||
} else { |
|||
v = this.value; |
|||
} |
|||
des = this.value; |
|||
return this.transition.start(src, des, doTransition); |
|||
}; |
|||
this.set(+config.value || 0, config["transition-in"]) || false; |
|||
return this; |
|||
}; |
|||
return window.addEventListener('load', function(){ |
|||
var i$, ref$, len$, node, results$ = []; |
|||
for (i$ = 0, len$ = (ref$ = document.querySelectorAll('.ldBar')).length; i$ < len$; ++i$) { |
|||
node = ref$[i$]; |
|||
if (!node.ldBar) { |
|||
results$.push(node.ldBar = new ldBar(node)); |
|||
} |
|||
} |
|||
return results$; |
|||
}, false); |
|||
})(); |
|||
module.exports = ldBar; |
|||
function import$(obj, src){ |
|||
var own = {}.hasOwnProperty; |
|||
for (var key in src) if (own.call(src, key)) obj[key] = src[key]; |
|||
return obj; |
|||
} |
@ -1,90 +0,0 @@ |
|||
var presets, out$ = typeof exports != 'undefined' && exports || this; |
|||
out$.presets = presets = { |
|||
rainbow: { |
|||
"type": 'stroke', |
|||
"path": 'M10 10L90 10', |
|||
"stroke": 'data:ldbar/res,gradient(0,1,#a551df,#fd51ad,#ff7f82,#ffb874,#ffeb90)', |
|||
"bbox": "10 10 80 10" |
|||
}, |
|||
energy: { |
|||
"type": 'fill', |
|||
"path": 'M15 5L85 5A5 5 0 0 1 85 15L15 15A5 5 0 0 1 15 5', |
|||
"stroke": '#f00', |
|||
"fill": 'data:ldbar/res,gradient(45,2,#4e9,#8fb,#4e9)', |
|||
"fill-dir": "ltr", |
|||
"fill-background": '#444', |
|||
"fill-background-extrude": 1, |
|||
"bbox": "10 5 80 10" |
|||
}, |
|||
stripe: { |
|||
"type": 'fill', |
|||
"path": 'M15 5L85 5A5 5 0 0 1 85 15L15 15A5 5 0 0 1 15 5', |
|||
"stroke": '#f00', |
|||
"fill": 'data:ldbar/res,stripe(#25b,#58e,1)', |
|||
"fill-dir": "ltr", |
|||
"fill-background": '#ddd', |
|||
"fill-background-extrude": 1, |
|||
"bbox": "10 5 80 10" |
|||
}, |
|||
text: { |
|||
"type": 'fill', |
|||
"img": "data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"20\" viewBox=\"0 0 70 20\"><text x=\"35\" y=\"10\" text-anchor=\"middle\" dominant-baseline=\"central\" font-family=\"arial\">LOADING</text></svg>", |
|||
"fill-background-extrude": 1.3, |
|||
"pattern-size": 100, |
|||
"fill-dir": "ltr", |
|||
"img-size": "70,20", |
|||
"bbox": "0 0 70 20" |
|||
}, |
|||
line: { |
|||
"type": 'stroke', |
|||
"path": 'M10 10L90 10', |
|||
"stroke": '#25b', |
|||
"stroke-width": 3, |
|||
"stroke-trail": '#ddd', |
|||
"stroke-trail-width": 1, |
|||
"bbox": "10 10 80 10" |
|||
}, |
|||
fan: { |
|||
"type": 'stroke', |
|||
"path": 'M10 90A40 40 0 0 1 90 90', |
|||
"fill-dir": 'btt', |
|||
"fill": '#25b', |
|||
"fill-background": '#ddd', |
|||
"fill-background-extrude": 3, |
|||
"stroke-dir": 'normal', |
|||
"stroke": '#25b', |
|||
"stroke-width": '3', |
|||
"stroke-trail": '#ddd', |
|||
"stroke-trail-width": 0.5, |
|||
"bbox": "10 50 80 40" |
|||
}, |
|||
circle: { |
|||
"type": 'stroke', |
|||
"path": 'M50 10A40 40 0 0 1 50 90A40 40 0 0 1 50 10', |
|||
"fill-dir": 'btt', |
|||
"fill": '#25b', |
|||
"fill-background": '#ddd', |
|||
"fill-background-extrude": 3, |
|||
"stroke-dir": 'normal', |
|||
"stroke": '#25b', |
|||
"stroke-width": '3', |
|||
"stroke-trail": '#ddd', |
|||
"stroke-trail-width": 0.5, |
|||
"bbox": "10 10 80 80" |
|||
}, |
|||
bubble: { |
|||
"type": 'fill', |
|||
"path": 'M50 10A40 40 0 0 1 50 90A40 40 0 0 1 50 10', |
|||
"fill-dir": 'btt', |
|||
"fill": 'data:ldbar/res,bubble(#39d,#cef)', |
|||
"pattern-size": "150", |
|||
"fill-background": '#ddd', |
|||
"fill-background-extrude": 2, |
|||
"stroke-dir": 'normal', |
|||
"stroke": '#25b', |
|||
"stroke-width": '3', |
|||
"stroke-trail": '#ddd', |
|||
"stroke-trail-width": 0.5, |
|||
"bbox": "10 10 80 80" |
|||
} |
|||
}; |
@ -1,54 +0,0 @@ |
|||
{ |
|||
"name": "@loadingio/loading-bar", |
|||
"version": "0.1.1", |
|||
"description": " ====== Progress Bar Library by loading.io ====== ", |
|||
"main": "lib/loading-bar.js", |
|||
"scripts": { |
|||
"test": "echo \"Error: no test specified\" && exit 1" |
|||
}, |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git+https://github.com/loadingio/loading-bar.git" |
|||
}, |
|||
"keywords": [ |
|||
"progress-bar" |
|||
], |
|||
"author": "tkirby", |
|||
"license": "MIT", |
|||
"bugs": { |
|||
"url": "https://github.com/loadingio/loading-bar/issues" |
|||
}, |
|||
"devDependencies": { |
|||
"LiveScript": ">=1.2.0", |
|||
"browserify": "^13.1.1", |
|||
"browserify-livescript": "git+https://github.com/ceremcem/browserify-livescript.git", |
|||
"globby": "^6.1.0", |
|||
"gulp": "^3.9.1", |
|||
"gulp-cached": "^1.1.1", |
|||
"gulp-concat": "^2.6.1", |
|||
"gulp-flatten": "^0.3.1", |
|||
"gulp-if-else": "^1.0.3", |
|||
"gulp-pug": "^3.3.0", |
|||
"gulp-stylus": "^2.6.0", |
|||
"gulp-rename": "^1.2.2", |
|||
"gulp-sourcemaps": "^2.6.1", |
|||
"gulp-tap": "^1.0.1", |
|||
"gulp-uglify": "^3.0.0", |
|||
"gulp-watch": "^4.3.11", |
|||
"node-notifier": "^5.1.2", |
|||
"optimize-js": "^1.0.3", |
|||
"run-sequence": "^2.1.0", |
|||
"touch": "^3.1.0", |
|||
"vinyl-buffer": "^1.0.0", |
|||
"vinyl-source-stream": "^1.1.0", |
|||
"gulp-livescript": "^3.0.1", |
|||
"gulp-zip": "^4.0.0", |
|||
"uglify-js": "=3.2.0", |
|||
"uglifycss": "0.0.29", |
|||
"watchify": "^3.9.0" |
|||
}, |
|||
"homepage": "https://github.com/loadingio/loading-bar#readme", |
|||
"dependencies": { |
|||
"gulp-remove-files": "0.0.3" |
|||
} |
|||
} |
@ -1,10 +0,0 @@ |
|||
angular.module \loadingio, [] |
|||
..directive \ldbar, <[$compile $timeout]> ++ ($compile, $timeout) -> do |
|||
restrict: \A |
|||
scope: do |
|||
model: \=ngModel |
|||
config: \=config |
|||
link: (s,e,a,c) -> |
|||
if e.0 => bar = if !e.0.ldBar => new ldBar(e.0, s.config or {}) else e.0.ldBar |
|||
s.$watch 'model', (n,o) -> bar.set n |
|||
|
@ -1,400 +0,0 @@ |
|||
require! "./presets": {presets} |
|||
|
|||
simple-str = (arr) -> arr.join '' |
|||
wrap = (content) -> "data:image/svg+xml;base64," + btoa(content) |
|||
|
|||
do -> |
|||
make = |
|||
head: (viewBox) -> """ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="#viewBox"> |
|||
""" |
|||
|
|||
gradient: (dir = 45, dur = 1, ...colors) -> |
|||
ret = [@head "0 0 100 100"] |
|||
len = colors.length * 4 + 1 |
|||
dir = dir * Math.PI / 180 |
|||
gx = Math.cos(dir) ** 2 |
|||
gy = Math.sqrt(gx - gx ** 2) |
|||
if dir > Math.PI * 0.25 => |
|||
gy = Math.sin(dir) ** 2 |
|||
gx = Math.sqrt(gy - gy ** 2) |
|||
x = gx * 100 |
|||
y = gy * 100 |
|||
ret.push """<defs><linearGradient id="gradient" x1="0" x2="#gx" y1="0" y2="#gy">""" |
|||
for i from 0 til len => |
|||
idx = i * 100 / (len - 1) |
|||
ret.push """<stop offset="#{idx}%" stop-color="#{colors[i % colors.length]}"/>""" |
|||
ret.push """ |
|||
</linearGradient></defs> |
|||
<rect x="0" y="0" width="400" height="400" fill="url(\#gradient)"> |
|||
<animateTransform attributeName="transform" type="translate" from="-#x,-#y" |
|||
to="0,0" dur="#{dur}s" repeatCount="indefinite"/></rect></svg> |
|||
""" |
|||
wrap ret.join("") |
|||
|
|||
stripe: (c1=\#b4b4b4, c2=\#e6e6e6, dur = 1) -> |
|||
ret = [@head "0 0 100 100"] |
|||
ret ++= [ |
|||
"""<rect fill="#c2" width="100" height="100"/>""" |
|||
"""<g><g>""" |
|||
["""<polygon fill="#c1" """ + |
|||
"""points="#{-90 + i * 20},100 #{-100 + i * 20},""" + |
|||
"""100 #{-60 + i * 20},0 #{-50 + i * 20},0 "/>""" for i from 0 til 13].join("") |
|||
"""</g><animateTransform attributeName="transform" type="translate" """ |
|||
"""from="0,0" to="20,0" dur="#{dur}s" repeatCount="indefinite"/></g></svg>""" |
|||
].join("") |
|||
wrap ret |
|||
|
|||
bubble: (c1 = \#39d, c2 = \#9cf, count = 15, dur = 1, size = 6, sw=1) -> |
|||
ret = [@head("0 0 200 200"), """<rect x="0" y="0" width="200" height="200" fill="#c1"/>"""] |
|||
for i from 0 til count => |
|||
idx = -(i / count) * dur |
|||
x = Math.random! * 184 + 8 |
|||
r = ( Math.random! * 0.7 + 0.3 ) * size |
|||
d = dur * (1 + Math.random! * 0.5) |
|||
ret.push [ |
|||
"""<circle cx="#x" cy="0" r="#r" fill="none" stroke="#c2" stroke-width="#sw">""" |
|||
"""<animate attributeName="cy" values="190;-10" times="0;1" """ |
|||
"""dur="#{d}s" begin="#{idx}s" repeatCount="indefinite"/>""" |
|||
"""</circle>""" |
|||
"""<circle cx="#x" cy="0" r="#r" fill="none" stroke="#c2" stroke-width="#sw">""" |
|||
"""<animate attributeName="cy" values="390;190" times="0;1" """ |
|||
"""dur="#{d}s" begin="#{idx}s" repeatCount="indefinite"/>""" |
|||
"""</circle>""" |
|||
].join("") |
|||
wrap(ret.join("") + "</svg>") |
|||
|
|||
handler = |
|||
queue: {} |
|||
running: false |
|||
main: (timestamp) -> |
|||
keepon = false |
|||
removed = [] |
|||
for k,func of @queue => |
|||
ret = func timestamp |
|||
if !ret => removed.push func |
|||
keepon = keepon or ret |
|||
for k,func of @queue => if removed.indexOf(func) >= 0 => delete @queue[k] |
|||
if keepon => requestAnimationFrame (~> @main it) |
|||
else @running = false |
|||
add: (key, f) -> |
|||
if !@queue[key] => @queue[key] = f |
|||
if !@running => |
|||
@running = true |
|||
requestAnimationFrame (~> @main it) |
|||
|
|||
|
|||
window.ldBar = ldBar = (selector, option = {}) -> |
|||
xmlns = xlink: "http://www.w3.org/1999/xlink" |
|||
root = if typeof! selector is \String |
|||
document.querySelector selector |
|||
else |
|||
selector |
|||
|
|||
if !root.ldBar => root.ldBar = @ |
|||
else return root.ldBar |
|||
|
|||
cls = root.getAttribute(\class) or '' |
|||
if !~cls.indexOf('ldBar') => root.setAttribute \class, "#cls ldBar" |
|||
id-prefix = "ldBar-#{Math.random!toString 16 .substring 2}" |
|||
id = |
|||
key: id-prefix |
|||
clip: "#{id-prefix}-clip" |
|||
filter: "#{id-prefix}-filter" |
|||
pattern: "#{id-prefix}-pattern" |
|||
mask: "#{id-prefix}-mask" |
|||
mask-path: "#{id-prefix}-mask-path" |
|||
domTree = (n,o) -> |
|||
n = newNode n |
|||
for k,v of o => if k != \attr => n.appendChild domTree(k, v or {}) |
|||
n.attrs(o.attr or {}) |
|||
n |
|||
newNode = (n) -> document.createElementNS "http://www.w3.org/2000/svg", n |
|||
document.body.__proto__.__proto__.__proto__ |
|||
..text = (t) -> @appendChild document.createTextNode(t) |
|||
..attrs = (o) -> for k,v of o => |
|||
ret = /([^:]+):([^:]+)/.exec(k) |
|||
if !ret or !xmlns[ret.1] => @setAttribute k, v |
|||
else @setAttributeNS xmlns[ret.1], k, v |
|||
..styles = (o) -> for k,v of o => @style[k] = v |
|||
..append = (n) -> @appendChild r = document.createElementNS "http://www.w3.og/2000/svg", n |
|||
..attr = (n,v) -> if v? => @setAttribute n, v else @getAttribute n |
|||
config = |
|||
"type": 'stroke' |
|||
"img": '' |
|||
"path": 'M10 10L90 10M90 8M90 12' |
|||
"fill-dir": \btt |
|||
"fill": \#25b |
|||
"fill-background": \#ddd |
|||
"fill-background-extrude": 3 |
|||
"pattern-size": null |
|||
"stroke-dir": \normal |
|||
"stroke": \#25b |
|||
"stroke-width": \3 |
|||
"stroke-trail": \#ddd |
|||
"stroke-trail-width": 0.5 |
|||
"duration": 1 |
|||
"easing": \linear |
|||
"value": 0 |
|||
"img-size": null |
|||
"bbox": null |
|||
"set-dim": true |
|||
"aspect-ratio": "xMidYMid" |
|||
"transition-in": false |
|||
"min": 0 |
|||
"max": 100 |
|||
"precision": 0 |
|||
"padding": undefined |
|||
|
|||
config["preset"] = root.attr("data-preset") or option["preset"] |
|||
|
|||
if config.preset? |
|||
# use the default preset |
|||
config <<< presets[config.preset] |
|||
|
|||
# overwrite if there are arguments passed via data-* attributes |
|||
for attr of config |
|||
if that = root.attr "data-#{attr}" |
|||
config[attr] = that |
|||
|
|||
config <<< option |
|||
if config.img => config.path = null |
|||
|
|||
is-stroke = config.type == \stroke |
|||
parse-res = (v) -> |
|||
parser = /data:ldbar\/res,([^()]+)\(([^)]+)\)/ |
|||
ret = parser.exec(v) |
|||
if !ret => return v |
|||
ret = make[ret.1].apply make, ret.2.split(\,) |
|||
config.fill = parse-res config.fill |
|||
config.stroke = parse-res config.stroke |
|||
if config["set-dim"] == \false => config["set-dim"] = false |
|||
|
|||
dom = |
|||
attr: |
|||
"xmlns:xlink": \http://www.w3.org/1999/xlink |
|||
preserveAspectRatio: config["aspect-ratio"] |
|||
width: "100%", height: "100%" |
|||
defs: |
|||
filter: |
|||
attr: id: id.filter, x: -1, y: -1, width: 3, height: 3 |
|||
feMorphology: attr: |
|||
operator: (if +config["fill-background-extrude"]>=0 => \dilate else \erode) |
|||
radius: Math.abs(+config["fill-background-extrude"]) |
|||
feColorMatrix: attr: {values: '0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0', result: "cm"} |
|||
mask: |
|||
attr: id: id.mask |
|||
image: attr: |
|||
"xlink:href": config.img |
|||
filter: "url(\##{id.filter})" |
|||
x: 0, y: 0, width: 100, height: 100, preserveAspectRatio: config["aspect-ratio"] |
|||
|
|||
g: |
|||
mask: |
|||
attr: id: id.mask-path |
|||
path: attr: |
|||
d: config.path or "" |
|||
fill: \#fff |
|||
stroke: \#fff |
|||
filter: "url(\##{id.filter})" |
|||
|
|||
clipPath: |
|||
attr: id: id.clip |
|||
rect: {attr: class: \mask, fill: \#000} |
|||
pattern: |
|||
attr: |
|||
id: id.pattern, patternUnits: \userSpaceOnUse |
|||
x:0, y: 0, width: 300, height: 300 |
|||
image: attr: x: 0, y: 0, width: 300, height: 300 |
|||
|
|||
svg = domTree \svg, dom |
|||
text = document.createElement \div |
|||
text.setAttribute \class, \ldBar-label |
|||
root.appendChild svg |
|||
root.appendChild text |
|||
|
|||
group = [0,0] |
|||
length = 0 |
|||
|
|||
@fit = ~> |
|||
if config["bbox"] => |
|||
box = that.split(' ').map(->+(it.trim!)) |
|||
box = {x: box.0, y: box.1, width: box.2, height: box.3} |
|||
else box = group.1.getBBox! |
|||
if !box or box.width == 0 or box.height == 0 => box = {x: 0, y: 0, width: 100, height: 100} |
|||
d = (Math.max.apply( |
|||
null, <[stroke-width stroke-trail-width fill-background-extrude]>.map(->config[it])) |
|||
) * 1.5 |
|||
if config["padding"]? => d = +config["padding"] |
|||
|
|||
svg.attrs viewBox: [box.x - d, box.y - d, box.width + d * 2, box.height + d * 2].join(" ") |
|||
if config["set-dim"] => <[width height]>.map ~> if !root.style[it] or @fit[it] => |
|||
root.style[it] = "#{box[it] + d * 2}px" |
|||
@fit[it] = true |
|||
|
|||
rect = group.0.querySelector \rect |
|||
if rect => rect.attrs do |
|||
x: box.x - d, y: box.y - d, width: box.width + d * 2, height: box.height + d * 2 |
|||
|
|||
if config.path => |
|||
if is-stroke => |
|||
group.0 = domTree \g, path: attr: |
|||
d: config.path |
|||
fill: \none |
|||
class: \baseline |
|||
else |
|||
group.0 = domTree \g, rect: attr: |
|||
x: 0, y: 0, width: 100, height: 100 |
|||
mask: "url(\##{id.mask-path})", fill: config["fill-background"] |
|||
class: \frame |
|||
|
|||
svg.appendChild group.0 |
|||
group.1 = domTree \g, path: attr: |
|||
d: config.path, class: if is-stroke => \mainline else \solid |
|||
"clip-path": if config.type == \fill => "url(\##{id.clip})" else '' |
|||
svg.appendChild group.1 |
|||
path0 = group.0.querySelector (if is-stroke => \path else \rect) |
|||
path1 = group.1.querySelector \path |
|||
if is-stroke => path1.attrs fill: \none |
|||
|
|||
patimg = svg.querySelector 'pattern image' |
|||
img = new Image! |
|||
img.addEventListener \load, -> |
|||
box = if config["pattern-size"] => {width: +that, height: +that} |
|||
else if img.width and img.height => {width: img.width, height: img.height} |
|||
else {width: 300, height: 300} |
|||
svg.querySelector \pattern .attrs {width: box.width, height: box.height} |
|||
patimg.attrs {width: box.width, height: box.height} |
|||
if /.+\..+|^data:/.exec(if !is-stroke => config.fill else config.stroke) => |
|||
img.src = if !is-stroke => config.fill else config.stroke |
|||
patimg.attrs "xlink:href": img.src #if !is-stroke => config.fill else config.stroke |
|||
|
|||
if is-stroke => |
|||
path0.attrs stroke: config["stroke-trail"], "stroke-width": config["stroke-trail-width"] |
|||
path1.attrs do |
|||
"stroke-width": config["stroke-width"] |
|||
stroke: if /.+\..+|^data:/.exec(config.stroke) => "url(\##{id.pattern})" else config.stroke |
|||
if config.fill and !is-stroke => |
|||
path1.attrs do |
|||
fill: if /.+\..+|^data:/.exec(config.fill) => "url(\##{id.pattern})" else config.fill |
|||
|
|||
length = path1.getTotalLength! |
|||
@fit! |
|||
@inited = true |
|||
else if config.img => |
|||
if config["img-size"] => |
|||
ret = config["img-size"].split(\,) |
|||
size = {width: +ret.0, height: +ret.1} |
|||
else size = {width: 100, height: 100} |
|||
|
|||
group.0 = domTree \g, rect: attr: |
|||
x: 0, y: 0, width: 100, height: 100, mask: "url(\##{id.mask})", fill: config["fill-background"] |
|||
svg.querySelector 'mask image' .attrs do |
|||
width: size.width, height: size.height |
|||
group.1 = domTree \g, image: attr: |
|||
width: size.width, height: size.height, x: 0, y: 0, preserveAspectRatio: config["aspect-ratio"] |
|||
#width: 100, height: 100, x: 0, y: 0, preserveAspectRatio: "xMidYMid" |
|||
"clip-path": if config.type == \fill => "url(\##{id.clip})" else '' |
|||
"xlink:href": config.img, class: \solid |
|||
img = new Image! |
|||
img.addEventListener \load, ~> |
|||
if config["img-size"] => |
|||
ret = config["img-size"].split(\,) |
|||
size = {width: +ret.0, height: +ret.1} |
|||
else if img.width and img.height => size = {width: img.width, height: img.height} |
|||
else size = {width: 100, height: 100} |
|||
svg.querySelector 'mask image' .attrs do |
|||
width: size.width, height: size.height |
|||
group.1.querySelector 'image' .attrs do |
|||
width: size.width, height: size.height |
|||
|
|||
@fit! |
|||
|
|||
# image is load, so we set value again. |
|||
# if we need transition - we have to clean value so it will be treated as 0. |
|||
v = @value |
|||
@value = undefined |
|||
@set v, true |
|||
@inited = true |
|||
img.src = config.img |
|||
svg.appendChild group.0 |
|||
svg.appendChild group.1 |
|||
svg.attrs width: \100%, height: \100% #, viewBox: '0 0 100 100' |
|||
|
|||
@transition = |
|||
value: |
|||
src: 0 |
|||
des: 0 |
|||
time: {} |
|||
|
|||
ease: (t,b,c,d) -> |
|||
t = t / (d * 0.5) |
|||
if t < 1 => return c * 0.5 * t * t + b |
|||
t = t - 1 |
|||
return -c * 0.5 * (t*(t - 2) - 1) + b |
|||
|
|||
handler: (time, doTransition = true) -> |
|||
if !@time.src? => @time.src = time |
|||
[min,max,prec] = [config["min"], config["max"],1/config["precision"]] |
|||
[dv, dt, dur] = [@value.des - @value.src, (time - @time.src) * 0.001, +config["duration"] or 1] |
|||
v = if doTransition => @ease(dt, @value.src, dv, dur) else @value.des |
|||
if config.precision => v = Math.round(v * prec) / prec |
|||
else if doTransition => v = Math.round(v) |
|||
v >?= min |
|||
v <?= max |
|||
text.textContent = v |
|||
p = 100.0 * (v - min ) / ( max - min ) |
|||
if is-stroke => |
|||
node = path1 |
|||
style = |
|||
"stroke-dasharray": ( |
|||
if config["stroke-dir"] == \reverse => |
|||
"0 #{length * (100 - p) * 0.01} #{length * p * 0.01} 0" |
|||
else => "#{p * 0.01 * length} #{(100 - p) * 0.01 * length + 1}" |
|||
) |
|||
else |
|||
box = group.1.getBBox! |
|||
dir = config["fill-dir"] |
|||
style = if dir == \btt or !dir => do |
|||
y: box.y + box.height * (100 - p) * 0.01 |
|||
height: box.height * p * 0.01 |
|||
x: box.x, width: box.width |
|||
else if dir == \ttb => do |
|||
y: box.y, height: box.height * p * 0.01 |
|||
x: box.x, width: box.width |
|||
else if dir == \ltr => do |
|||
y: box.y, height: box.height |
|||
x: box.x, width: box.width * p * 0.01 |
|||
else if dir == \rtl => do |
|||
y: box.y, height: box.height |
|||
x: box.x + box.width * (100 - p) * 0.01 |
|||
width: box.width * p * 0.01 |
|||
node = svg.querySelector \rect |
|||
node.attrs style |
|||
if dt >= dur => delete @time.src; return false |
|||
return true |
|||
start: (src, des, doTransition) -> |
|||
@value <<< {src, des} |
|||
!!( root.offsetWidth || root.offsetHeight || root.getClientRects!length ) |
|||
if !doTransition or !( root.offsetWidth || root.offsetHeight || root.getClientRects!length ) => |
|||
@time.src = 0 |
|||
@handler 1000, false |
|||
return |
|||
handler.add id.key, (time) ~> return @handler time |
|||
|
|||
@set = (v,doTransition = true) -> |
|||
src = @value or 0 |
|||
if v? => @value = v else v = @value |
|||
des = @value |
|||
@transition.start src, des, doTransition |
|||
|
|||
@set (+config.value or 0), config["transition-in"] or false |
|||
@ |
|||
|
|||
window.addEventListener \load, (-> |
|||
for node in document.querySelectorAll(\.ldBar) => |
|||
if !node.ldBar => node.ldBar = new ldBar node |
|||
), false |
|||
|
|||
module.exports = ldBar |
@ -1,19 +0,0 @@ |
|||
|
|||
transform() |
|||
-webkit-transform arguments |
|||
transform arguments |
|||
|
|||
.ldBar |
|||
position: relative |
|||
&.label-center > .ldBar-label |
|||
position: absolute |
|||
top: 50% |
|||
left: 50% |
|||
transform(translate(-50%,-50%)) |
|||
text-shadow: 0 0 3px rgba(255,255,255,1) |
|||
.ldBar-label:after |
|||
content: "%" |
|||
display: inline |
|||
.ldBar.no-percent |
|||
.ldBar-label:after |
|||
content: "" |
@ -1,80 +0,0 @@ |
|||
export presets = |
|||
rainbow: |
|||
"type": 'stroke' |
|||
"path": 'M10 10L90 10' |
|||
"stroke": 'data:ldbar/res,gradient(0,1,#a551df,#fd51ad,#ff7f82,#ffb874,#ffeb90)' |
|||
"bbox": "10 10 80 10" |
|||
energy: |
|||
"type": 'fill' |
|||
"path": 'M15 5L85 5A5 5 0 0 1 85 15L15 15A5 5 0 0 1 15 5' |
|||
"stroke": \#f00 |
|||
"fill": 'data:ldbar/res,gradient(45,2,#4e9,#8fb,#4e9)' |
|||
"fill-dir": "ltr" |
|||
"fill-background": \#444 |
|||
"fill-background-extrude": 1 |
|||
"bbox": "10 5 80 10" |
|||
stripe: |
|||
"type": 'fill' |
|||
"path": 'M15 5L85 5A5 5 0 0 1 85 15L15 15A5 5 0 0 1 15 5' |
|||
"stroke": \#f00 |
|||
"fill": 'data:ldbar/res,stripe(#25b,#58e,1)' |
|||
"fill-dir": "ltr" |
|||
"fill-background": \#ddd |
|||
"fill-background-extrude": 1 |
|||
"bbox": "10 5 80 10" |
|||
text: |
|||
"type": 'fill' |
|||
"img": """data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="70" height="20" viewBox="0 0 70 20"><text x="35" y="10" text-anchor="middle" dominant-baseline="central" font-family="arial">LOADING</text></svg>""" |
|||
"fill-background-extrude": 1.3 |
|||
"pattern-size": 100 |
|||
"fill-dir": "ltr" |
|||
"img-size": "70,20" |
|||
"bbox": "0 0 70 20" |
|||
line: |
|||
"type": 'stroke' |
|||
"path": 'M10 10L90 10' |
|||
"stroke": \#25b |
|||
"stroke-width": 3 |
|||
"stroke-trail": \#ddd |
|||
"stroke-trail-width": 1 |
|||
"bbox": "10 10 80 10" |
|||
fan: |
|||
"type": 'stroke' |
|||
"path": 'M10 90A40 40 0 0 1 90 90' |
|||
"fill-dir": \btt |
|||
"fill": \#25b |
|||
"fill-background": \#ddd |
|||
"fill-background-extrude": 3 |
|||
"stroke-dir": \normal |
|||
"stroke": \#25b |
|||
"stroke-width": \3 |
|||
"stroke-trail": \#ddd |
|||
"stroke-trail-width": 0.5 |
|||
"bbox": "10 50 80 40" |
|||
circle: |
|||
"type": 'stroke' |
|||
"path": 'M50 10A40 40 0 0 1 50 90A40 40 0 0 1 50 10' |
|||
"fill-dir": \btt |
|||
"fill": \#25b |
|||
"fill-background": \#ddd |
|||
"fill-background-extrude": 3 |
|||
"stroke-dir": \normal |
|||
"stroke": \#25b |
|||
"stroke-width": \3 |
|||
"stroke-trail": \#ddd |
|||
"stroke-trail-width": 0.5 |
|||
"bbox": "10 10 80 80" |
|||
bubble: |
|||
"type": 'fill' |
|||
"path": 'M50 10A40 40 0 0 1 50 90A40 40 0 0 1 50 10' |
|||
"fill-dir": \btt |
|||
"fill": 'data:ldbar/res,bubble(#39d,#cef)' |
|||
"pattern-size": "150" |
|||
"fill-background": \#ddd |
|||
"fill-background-extrude": 2 |
|||
"stroke-dir": \normal |
|||
"stroke": \#25b |
|||
"stroke-width": \3 |
|||
"stroke-trail": \#ddd |
|||
"stroke-trail-width": 0.5 |
|||
"bbox": "10 10 80 80" |
@ -1,324 +0,0 @@ |
|||
<?xml version="1.0" encoding="UTF-8" ?> |
|||
<templates id="template" xml:space="preserve"> |
|||
<t t-name="Invoicedashboard"> |
|||
<div class="accounts-dashboard-wrap"> |
|||
<div class="o_dashboards col-xs-12 col-sm-12 col-lg-12 col-md-12" style="background-color: #e1e1e1;overflow: scroll; !important; "> |
|||
<div class="content-header"> |
|||
<div class="container-fluid"> |
|||
<div class="row mb-2"> |
|||
<div class="col-sm-12"> |
|||
<div class="dash-header"> |
|||
<h1 class="custom-h1 dashboard-h1">Dashboard </h1> |
|||
<input type="checkbox" style="display:none" data-toggle="toggle" data-on="" data-off=""> |
|||
<input type="checkbox" id="toggle-two"></input> |
|||
</input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row" style="margin:0px"> |
|||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12"> |
|||
<div class=""> |
|||
<div class="row account-details" style="margin:0px"> |
|||
<div class="col-md-3"> |
|||
<!-- Net Profit or Loss --> |
|||
<div class="tile wide invoice box-1"> |
|||
<div class="headers"> |
|||
<div class="main-title">Net Profit or Loss</div> |
|||
<div id="monthly_invoice"> |
|||
<div class="left"> |
|||
<div class="count"> |
|||
<span id="net_profit_current_year" /> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="count"> |
|||
<span id="net_profit_current_months" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- Total Income --> |
|||
<div class="col-md-3"> |
|||
<div class="tile wide invoice box-2"> |
|||
<div class="header"> |
|||
<div class="main-title">Total Income</div> |
|||
<div id="monthly_income"> |
|||
<div class="left"> |
|||
<div class="count"> |
|||
<span id="total_incomes_this_year" /> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="count"> |
|||
<span id="total_incomes_" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- Total Expense --> |
|||
<div class="col-md-3"> |
|||
<div class="tile wide invoice box-3"> |
|||
<div class="header"> |
|||
<div class="main-title">Total Expenses</div> |
|||
<div id="monthly_expense"> |
|||
<div class="left"> |
|||
<div class="count"> |
|||
<span id="total_expense_this_year" /> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="count"> |
|||
<span id="total_expenses_" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- Unreconciled items --> |
|||
<div class="col-md-3"> |
|||
<div class="tile wide invoice box-4"> |
|||
<div class="header"> |
|||
<div class="main-title">Unreconciled items</div> |
|||
<div id="monthly_unreconciled"> |
|||
<div class="left"> |
|||
<div class="count"> |
|||
<span id="unreconciled_counts_this_year" /> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="count"> |
|||
<span id="unreconciled_items_" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="row" style="margin:0px">--> |
|||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12"> |
|||
<div class="row" style="margin:0px"> |
|||
<div class="col-md-4" id="col-graph"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<div class="card-title"> |
|||
<b> |
|||
<h3 class="custom-h3">Income/Expense</h3> |
|||
</b> |
|||
</div> |
|||
<div class="card-tools"> |
|||
<select> |
|||
<option id="income_this_year">This Year</option> |
|||
<option id="income_this_month">This Month</option> |
|||
<div role="separator" class="dropdown-divider" /> |
|||
<option id="income_last_month">Last Month</option> |
|||
<option id="income_last_year">Last Year</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<div class="card-body mt-3" id="in_ex_body_hide"> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<p id="myelement1"></p> |
|||
<div class="chart"> |
|||
<canvas id="canvas" width="300" height="200"></canvas> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4" id="col-graph"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<div class="card-title"> |
|||
<b> |
|||
<h3 class="custom-h3">INVOICES</h3> |
|||
</b> |
|||
</div> |
|||
<div class="card-tools"> |
|||
<select> |
|||
<option id="invoice_this_month">This Month</option> |
|||
<option id="invoice_this_year">This Year</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<!-- /.card-header --> |
|||
<div class="card-body" id=""> |
|||
<div class="row"> |
|||
<div class="col-md-12 mt-3"> |
|||
<h1 class="custom-h1" style="margin-bottom: 0;">Customer Invoice</h1> |
|||
<ul class="skill-list"> |
|||
<li class="skill" style="display: flex;justify-content: space-between;color: #000;"> |
|||
<p id="total_customer_invoice_paid" /> |
|||
<p id="total_customer_invoice" /> |
|||
<p id="total_customer_invoice_paid_current_year" /> |
|||
<p id="total_customer_invoice_current_year" /> |
|||
<p id="total_customer_invoice_paid_current_month" /> |
|||
<p id="total_customer_invoice_current_month" /> |
|||
</li> |
|||
<li> |
|||
<progress id="tot_invoice" class="skill-1" max="" value=""> |
|||
<strong>Skill Level: 50%</strong> |
|||
</progress> |
|||
</li> |
|||
<li> |
|||
<progress id="tot_invoice_current_year" class="skill-1" max="" value=""> |
|||
<strong>Skill Level: 50%</strong> |
|||
</progress> |
|||
</li> |
|||
<li> |
|||
<progress id="tot_invoice_current_month" class="skill-1" max="" value=""> |
|||
<strong>Skill Level: 50%</strong> |
|||
</progress> |
|||
</li> |
|||
</ul> |
|||
<div role="separator" class="dropdown-divider" /> |
|||
<h1 class="custom-h1" style="margin-bottom: 0;">Supplier Invoice</h1> |
|||
<ul class="skill-list"> |
|||
<li class="skill" style="display: flex;justify-content: space-between;color: #000;"> |
|||
<p id="total_supplier_invoice_paid" /> |
|||
<p id="total_supplier_invoice" /> |
|||
<p id="total_supplier_invoice_paid_current_year" /> |
|||
<p id="total_supplier_invoice_current_year" /> |
|||
<p id="total_supplier_invoice_paid_current_month" /> |
|||
<p id="total_supplier_invoice_current_month" /> |
|||
</li> |
|||
<li> |
|||
<progress id="tot_supplier_inv" class="skill-1" max="" value=""> |
|||
<strong>Skill Level: 50%</strong> |
|||
</progress> |
|||
</li> |
|||
<li> |
|||
<progress id="tot_supplier_inv_current_year" class="skill-1" max="" value=""> |
|||
<strong>Skill Level: 50%</strong> |
|||
</progress> |
|||
</li> |
|||
<li> |
|||
<progress id="tot_supplier_inv_current_month" class="skill-1" max="" value=""> |
|||
<strong>Skill Level: 50%</strong> |
|||
</progress> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4" id="col-graph"> |
|||
<div class="card"> |
|||
<div class="card-body p-0" style=" height: 287px; overflow-y: auto; "> |
|||
<div class="card-header" style=" padding: 17px 1.5rem !important; display: flex !IMPORTANT; justify-content: space-between; align-items: center; "> |
|||
<h3 class="custom-h3 card-title"> |
|||
<b>BANK AND CASH BALANCE</b> |
|||
</h3> |
|||
</div> |
|||
<div class="card-body p-0" style=" height: 100px; " id="bank_balance_body_hide"> |
|||
<ul id="current_bank_balance"></ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4" id="col-graph"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<div class="card-title"> |
|||
<b> |
|||
<h3 class="custom-h3">Aged Receivable</h3> |
|||
</b> |
|||
</div> |
|||
<div class="card-tools"> |
|||
<select> |
|||
<option id="aged_payable_this_month">This Month</option> |
|||
<option id="aged_payable_this_year">This Year</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<!-- /.card-header --> |
|||
<div class="card-body" id="ex_body"> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div> |
|||
<canvas id="canvas1" height="250px" width="400px"></canvas> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4" id="col-graph"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<div class="card-title"> |
|||
<b> |
|||
<h3 class="custom-h3">Aged Payable</h3> |
|||
</b> |
|||
</div> |
|||
<div class="card-tools"> |
|||
<select> |
|||
<option id="aged_receivable_this_month">This Month</option> |
|||
<option id="aged_receivable_this_year">This Year</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<!-- /.card-header --> |
|||
<div class="card-body" id="aged_payable_body_hide"> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div id="chart"> |
|||
<canvas id="horizontalbarChart" width="400" height="250"></canvas> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4"> |
|||
<div class="card" style="height:366px;"> |
|||
<div class="card-header" style=" padding: 17px 1.5rem !important; display: flex !IMPORTANT; justify-content: space-between; align-items: center; "> |
|||
<h3 class="custom-h3 card-title"> |
|||
<b>TOP 10 CUSTOMERS</b> |
|||
</h3> |
|||
|
|||
<div class="card-tools"> |
|||
<select> |
|||
|
|||
<option id="top_10_customer_this_month">This Month</option> |
|||
<div role="separator" class="dropdown-divider" /> |
|||
<option id="top_10_customer_last_month">Last Month</option> |
|||
|
|||
</select> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="card-body p-0" style=" height: 287px; overflow-y: auto; " id="top_10_body"> |
|||
<ul class="users-list clearfix" id="top_10_customers"></ul> |
|||
<ul class="users-list clearfix" id="top_10_customers_this_month"></ul> |
|||
<ul class="users-list clearfix" id="top_10_customers_last_month"></ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- </div>--> |
|||
<div class="container-fluid o_hr_dashboard"> |
|||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" id="invoice_grapg" /> |
|||
<div class="dashboard-header-filter"> |
|||
<div class="manager_filter_class" /> |
|||
</div> |
|||
</div> |
|||
<div id="chart-container"></div> |
|||
</div> |
|||
</t> |
|||
</templates> |
@ -1,17 +0,0 @@ |
|||
<odoo> |
|||
<template id="assets_invoice_dashboard" name="Invoice Dashboard" inherit_id="web.assets_backend"> |
|||
<xpath expr="." position="inside"> |
|||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet"/> |
|||
<link rel="stylesheet" type="text/scss" href="/base_accounting_kit/static/src/scss/style.scss"/> |
|||
<link rel="stylesheet" type="text/scss" href="/base_accounting_kit/static/lib/loading-bar-master/dist/loading-bar.css"/> |
|||
<link rel="stylesheet" type="text/scss" href="/base_accounting_kit/static/lib/bootstrap-toggle-master/css/bootstrap-toggle.min.css"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/src/js/account_dashboard.js"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/lib/Chart.bundle.js"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/lib/Chart.bundle.min.js"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/lib/Chart.min.js"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/lib/Chart.js"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/lib/bootstrap-toggle-master/js/bootstrap-toggle.min.js"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/lib/loading-bar-master/lib/loading-bar.js"/> |
|||
</xpath> |
|||
</template> |
|||
</odoo> |
@ -1,14 +0,0 @@ |
|||
<odoo> |
|||
<data> |
|||
<record id="action_account_invoice_report_all" model="ir.actions.client"> |
|||
<field name="name">Account Report</field> |
|||
<field name="tag">invoice_dashboard</field> |
|||
</record> |
|||
|
|||
<menuitem name="Dashboard" id="menu_accounting_dashboard" parent="account.menu_finance" |
|||
sequence="0" |
|||
groups="account.group_account_manager" |
|||
action="action_account_invoice_report_all"/> |
|||
|
|||
</data> |
|||
</odoo> |