├── .gitignore ├── Gruntfile.js ├── README.md ├── app ├── README.md ├── app.js ├── assets │ └── index.html ├── helpers │ ├── application.js │ └── home.js ├── initialize.js ├── router.js ├── styles │ └── application.styl └── templates │ ├── application.hbs │ └── home.hbs ├── bower.json ├── config.coffee ├── examples └── example.html ├── generators ├── class │ ├── class.js.hbs │ └── generator.json ├── helper │ ├── generator.json │ ├── helper.js.hbs │ └── insertHelper.js.hbs └── template │ ├── generator.json │ ├── insertTemplate.js.hbs │ └── template.js.hbs ├── package.json └── vendor ├── README.md ├── scripts ├── bootstrap.js ├── console-helper.js ├── ember-latest.js ├── handlebars-1.0.rc.4.js ├── jquery-1.9.1.js └── skylo.js └── styles ├── bootstrap.css └── skylo.css /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | .DS_Store 10 | 11 | public 12 | 13 | pids 14 | logs 15 | results 16 | 17 | aws.json 18 | 19 | node_modules 20 | npm-debug.log -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | 3 | 4 | // Get path to core grunt dependencies from Sails 5 | grunt.loadNpmTasks('grunt-s3'); 6 | grunt.loadNpmTasks('grunt-exec'); 7 | 8 | 9 | // Project configuration. 10 | grunt.initConfig({ 11 | aws: grunt.file.readJSON('aws.json'), 12 | s3: { 13 | options: { 14 | key: '<%= aws.key %>', 15 | secret: '<%= aws.secret %>', 16 | bucket: '<%= aws.bucket %>', 17 | access: '<%= aws.access %>' 18 | }, 19 | dev:{ 20 | options: { 21 | encodePaths: true, 22 | maxOperations: 20 23 | }, 24 | upload: [{ 25 | // Wildcards are valid *for uploads only* until I figure out a good implementation 26 | // for downloads. 27 | src: 'public/javascripts/*', 28 | 29 | // But if you use wildcards, make sure your destination is a directory. 30 | dest: './javascripts/' 31 | },{ 32 | // Wildcards are valid *for uploads only* until I figure out a good implementation 33 | // for downloads. 34 | src: 'public/stylesheets/*', 35 | 36 | // But if you use wildcards, make sure your destination is a directory. 37 | dest: './stylesheets/' 38 | },{ 39 | // Wildcards are valid *for uploads only* until I figure out a good implementation 40 | // for downloads. 41 | src: 'public/*', 42 | 43 | // But if you use wildcards, make sure your destination is a directory. 44 | dest: './' 45 | } 46 | 47 | ] 48 | } 49 | }, 50 | exec: { 51 | brunch_build: { 52 | command: 'brunch build -o' 53 | } 54 | } 55 | }); 56 | 57 | grunt.registerTask('deploy',['exec','s3']); 58 | 59 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Skylo 2 | ====== 3 | 4 | **Required Library** 5 | - Twitter Bootstrap 2.3.2 or Twitter Bootstrap 3.0 6 | 7 | **Required Files** 8 | 9 | Download [skylo.js](https://github.com/colintoh/skylo/blob/master/vendor/scripts/skylo.js) and [skylo.css](https://github.com/colintoh/skylo/blob/master/vendor/styles/skylo.css). Include them below ```bootstrap.js``` and ```bootstrap.css``` respectively. Check out the examples in the examples folder. 10 | 11 | **Demo And Documentation** 12 | 13 | [Skylo Demo And Docs](http://skylo.s3-website-ap-southeast-1.amazonaws.com/#/home) 14 | 15 | --- 16 | 17 | Options 18 | -------- 19 | //Default options 20 | $.skylo({ 21 | state: 'info', 22 | inchSpeed: 200, 23 | initialBurst: 5, 24 | flat: false 25 | }); 26 | 27 | ```state ["info", "success", "warning", "danger"]``` : Customizes the theme of the progress bar. Uses the same parameters as Bootstrap uses for buttons. 28 | 29 | ```inchSpeed (ms)```: Determine the speed of the inching motion. 30 | 31 | ```initialBurst (1 - 100)```: The initial length of the loader that you want to load. 32 | 33 | ```flat (true/false)```: If ```flat``` is set to true, the animated striped UI of the progress bar will be removed. 34 | 35 | --- 36 | 37 | Methods 38 | ------- 39 | ```start```: This will initiate the loader with a initial burst of length. 40 | 41 | $.skylo('start'); 42 | 43 | ```end```: The loader will reach 100% and then fade out. 44 | 45 | $.skylo('end'); 46 | 47 | ```set(width)```: The loader's width will be animated to the percentage stated. Ranges from 1 - 100. 48 | 49 | $.skylo('set',50); //Set width to 50% 50 | 51 | ```get```: Returns the current loader's width percentage. 52 | 53 | $.skylo('get'); 54 | 55 | ```inch```: Loader will inch forward according to the parameters set. 56 | 57 | $.skylo('inch',10); //Inch forward by 10% 58 | 59 | ```show(callback)```: Loader will be inserted into the DOM and a callback function will be called. 60 | 61 | $.skylo('show',function(){ 62 | //After inserting Loader, animates width to 30% 63 | $.skylo('set',30); 64 | }); 65 | 66 | ```remove```: Remove Loader from the DOM. Normally unused. Just use ```end`` method to complete the animation. 67 | 68 | $.skylo('end'); 69 | 70 | --- 71 | 72 | Credits: 73 | -------- 74 | Thanks to [2359 Media](http://2359media.com/) for providing the space and time for me to finish this plugin. -------------------------------------------------------------------------------- /app/README.md: -------------------------------------------------------------------------------- 1 | Application 2 | =========== 3 | 4 | Put your application-specific files here, but leave your third party libraries in the vendor directory. 5 | 6 | -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | // Application bootstrapper 2 | 3 | module.exports = Em.Application.create(); -------------------------------------------------------------------------------- /app/assets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Skylo: The Sky Loader 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 67 | 68 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /app/helpers/application.js: -------------------------------------------------------------------------------- 1 | var App = require('app'); 2 | 3 | App.ApplicationController = Em.Controller.extend({ 4 | title: "Skylo" 5 | }); 6 | 7 | 8 | App.ApplicationView = Em.View.extend({ 9 | didInsertElement: function(){ 10 | 11 | } 12 | }); -------------------------------------------------------------------------------- /app/helpers/home.js: -------------------------------------------------------------------------------- 1 | var App = require('app'); 2 | 3 | App.HomeController = Em.Controller.extend({ 4 | 5 | }); 6 | 7 | 8 | App.HomeView = Em.View.extend({ 9 | didInsertElement:function(){ 10 | } 11 | }); -------------------------------------------------------------------------------- /app/initialize.js: -------------------------------------------------------------------------------- 1 | window.App = require('app'); 2 | 3 | var regString, 4 | excludeString, 5 | fileList = window.require.list(); 6 | 7 | var requireOrder = { 8 | helpers: [ 9 | 'application', // Always include application helper first 10 | ], 11 | templates: [ 12 | ] 13 | }; 14 | 15 | require('router'); 16 | 17 | var folderOrder = ['helpers', 'templates']; 18 | 19 | folderOrder.forEach(function(folder){ 20 | 21 | //Require before 22 | requireOrder[folder].forEach(function(module){ 23 | require( folder + '/' + module); 24 | }); 25 | 26 | //Require after 27 | excludeString = requireOrder[folder].join('$|'); 28 | regString = '^'+folder+'/(?!' + excludeString + '$)'; 29 | fileList.filter(function(module){ 30 | return new RegExp(regString).test(module); 31 | }).forEach(function(module){ 32 | require(module); 33 | }); 34 | 35 | }); -------------------------------------------------------------------------------- /app/router.js: -------------------------------------------------------------------------------- 1 | var App = require('app'); 2 | 3 | 4 | App.IndexRoute = Em.Route.extend({ 5 | redirect:function(){ 6 | this.transitionTo('home'); 7 | } 8 | }); 9 | 10 | App.Router.map(function(){ 11 | this.route('index',{path:'/'}); 12 | this.route('home'); 13 | }); -------------------------------------------------------------------------------- /app/styles/application.styl: -------------------------------------------------------------------------------- 1 | @import nib 2 | 3 | yellow-txt = rgb(243,177,0) 4 | brown-txt = rgb(81,63,63) 5 | white-txt = rgb(245,245,245) 6 | navy-txt = #363b48 7 | salmon-bg = #f17c71 8 | salmon-txt = #be4344 9 | 10 | body 11 | background: white-txt 12 | font-family: 'Roboto', sans-serif 13 | font-weight: 400 14 | 15 | h1 16 | font-family: 'Sonsie One', cursive; 17 | color: rgb(243,243,243) 18 | text-align: center 19 | font-size: 60px 20 | margin-top: 0 21 | margin-bottom: 20px 22 | 23 | h3 24 | text-align: center 25 | font-family: 'Roboto', sans-serif 26 | font-weight: 400 27 | font-size:40px 28 | margin: 80px 0 29 | color: brown-txt 30 | 31 | 32 | //Overwrite bootstrap 33 | 34 | .navbar 35 | background: rgb(245,245,245) 36 | border-radius: 0 37 | box-shadow: none 38 | border: none 39 | 40 | //Basic 41 | 42 | .heavy 43 | font-weight: 700 44 | 45 | .show-case 46 | background: yellow-txt 47 | padding: 120px 0 48 | 49 | .description 50 | text-align: center 51 | color: rgb(223,153,0) 52 | font-size: 16px 53 | display: block 54 | width: 280px 55 | margin: 0 auto 56 | 57 | .btns-grp 58 | text-align: center 59 | display: block 60 | margin-top: 40px 61 | 62 | 63 | .header-btn 64 | padding: 16px 28px 65 | font-weight: 400 66 | background: #ee9e20 67 | border: none 68 | font-size: 14px 69 | font-weight: 700 70 | margin-right: 10px 71 | color: white-txt 72 | 73 | &:hover 74 | background: rgb(79,64,62) 75 | color: yellow-txt 76 | 77 | &.last 78 | margin: 0 79 | 80 | .white-bg 81 | background: white-txt 82 | 83 | .row 84 | color: #4e4e4e 85 | 86 | .quotes 87 | margin-top: 80px 88 | 89 | .compatibility 90 | p 91 | font-size: 40px 92 | 93 | .methods 94 | background: navy-txt 95 | 96 | .row,h3 97 | color: white-txt 98 | 99 | .btn-method 100 | background: #26ae90 101 | border: none 102 | color: #1c755d 103 | font-weight: 700 104 | text-shadow: 0 1px 1px rgba(255,255,255,0.3) 105 | 106 | &:hover 107 | background: #26ae90 108 | color: #0b4b3a 109 | 110 | 111 | .section 112 | .row 113 | margin-bottom: 40px 114 | font-size: 18px 115 | 116 | .main 117 | background: salmon-bg 118 | color: white-txt 119 | 120 | h3 121 | color: salmon-txt 122 | 123 | .sub-header 124 | color: #d74e4a 125 | font-weight: 700 126 | // text-shadow: 0 1px 0px rgba(190,67,68,0.5) 127 | 128 | .code 129 | font-family: Monaco, Menlo, Consolas, "Courier New", monospace 130 | font-size: 12px; 131 | color: salmon-txt 132 | background: #f5a29a 133 | padding: 5px 134 | border-radius: 5px 135 | display: inline-block 136 | 137 | &.full-code 138 | padding: 10px 20px 139 | 140 | .social 141 | width: 100% 142 | margin-top: 40px 143 | text-align: center 144 | 145 | .feedback 146 | p 147 | font-size: 16px 148 | 149 | footer 150 | padding: 20px 151 | 152 | a 153 | color: yellow-txt 154 | font-weight: 700 155 | -------------------------------------------------------------------------------- /app/templates/application.hbs: -------------------------------------------------------------------------------- 1 | {{outlet}} 2 | -------------------------------------------------------------------------------- /app/templates/home.hbs: -------------------------------------------------------------------------------- 1 |
2 |

Skylo

3 |

A Twitter Bootstrap extension to add progress loader at the top of the page.

4 |
5 |
DEMO
6 | DOWNLOAD 7 |
8 | 9 |
10 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |
27 |
28 |

Compatible with both Twitter Bootstrap 2.3.2 and 3.0

29 |
30 |
31 |
32 |
33 |
34 | 35 | 36 |
37 |
38 |

Methods

39 |
40 |
41 |
42 |
43 |
44 | start() 45 |
46 |
47 |
48 | Start the loader 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | end() 59 |
60 |
61 |
62 | Loader loads to 100% and fade out 63 |
64 |
65 |
66 |
67 | 68 |
69 |
70 |
71 |
72 |
73 | set(50) 74 |
75 |
76 |
77 | Set position of the loading bar. 78 |
[0 - 100]
79 |
80 |
81 |
82 |
83 | 84 |
85 |
86 |
87 |
88 |
89 | get() 90 |
91 |
92 |
93 | Get current position of the loading bar. 94 |
95 |
96 |
97 |
98 | 99 |
100 |
101 |
102 |
103 |
104 | inch(10) 105 |
106 |
107 |
108 | Loader will inch forward according to the parameters set. 109 |
[0 - 100]
110 |
111 |
112 |
113 |
114 | 115 |
116 |
117 | 118 |
119 |
120 |
121 |
122 |
123 |

These seem to be all over hacker news now, but this is the nicest I've seen. The option to customize the theme of the loader is cool.

124 | 125 | garrettqmartin8 126 | 127 | 128 |
129 | 130 | 131 |
132 |
133 |
134 |

Hmm, haven't noticed those loading bars on Medium or Youtube, but the Chrome browser on my Android has it and I've always liked it. Props to you for noticing this and reacting on it by creating a plugin for a popular framework.

135 | 136 |

I like the name to. Sky = top. Lo = LOad. And the design of the demo and doc is nicely done.

137 | 138 |

Good job.

139 | 140 | 141 | PaulvdDool 142 | 143 | 144 |
145 |
146 |
147 |
148 |
149 | 150 | 151 |
152 |
153 |

Customization

154 | 155 |
156 |
157 |
158 |
159 | Initialize (Optional) 160 |
161 | //Default Values
162 |
163 | $.skylo({
164 |      'state': 'info',
165 |      'inchSpeed': 200,
166 |      'initialBurst': 5,
167 |      'flat': false
168 | }); 169 |
170 |
171 |
172 |
173 |
174 | 175 | 176 |
177 |
178 |
179 |
180 | state 181 |
[ "info", "success", "warning", "danger" ]
182 |
183 |
184 | Using Twitter Bootstrap default state, we can switch the theme of the loader. 185 |
186 |
187 | 188 |
189 |
190 | 191 |
192 |
193 |
194 |
195 | inchSpeed 196 |
[milliseconds]
197 |
198 |
199 | The loader can inch forward to signify loading. Adjust the inch speed so that the inching can appear fast or slow. 200 |
201 |
202 |
203 |
204 | 205 |
206 |
207 |
208 |
209 | initialBurst 210 |
[0 - 100]
211 |
212 |
213 | When we start the loader, we set a initial burst of loading so that it kicks off the impression that the loading have begin. Adjust how much initial burst that you wanted. 214 |
215 |
216 |
217 |
218 | 219 |
220 |
221 |
222 |
223 | flat 224 |
[true/false]
225 |
226 |
227 | If true, remove the animated striped UI of the progress bar. 228 |
229 |
230 |
231 |
232 | 233 | 234 |
235 |
236 | 237 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"skylo", 3 | "version":"1.0.1", 4 | "main":[ 5 | "vendor/styles/skylo.css", 6 | "vendor/scripts/skylo.js" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /config.coffee: -------------------------------------------------------------------------------- 1 | fs = require 'fs' 2 | path = require 'path' 3 | 4 | # See docs at http://brunch.readthedocs.org/en/latest/config.html. 5 | 6 | exports.config = 7 | 8 | files: 9 | 10 | javascripts: 11 | defaultExtension: 'js', 12 | joinTo: 13 | 'javascripts/app.js': /^app/ 14 | 'javascripts/vendor.js': /^vendor/ 15 | 16 | order: 17 | before: [ 18 | 'vendor/scripts/console-helper.js', 19 | 'vendor/scripts/jquery-1.9.1.js', 20 | 'vendor/scripts/handlebars-1.0.rc.4.js', 21 | 'vendor/scripts/ember-latest.js', 22 | 'vendor/scripts/bootstrap.js', 23 | ] 24 | 25 | stylesheets: 26 | defaultExtension: 'css' 27 | joinTo: 'stylesheets/app.css' 28 | order: 29 | before: ['vendor/styles/bootstrap.css'] 30 | 31 | templates: 32 | precompile: true 33 | root: 'templates' 34 | defaultExtension: 'hbs' 35 | joinTo: 'javascripts/app.js' : /^app/ 36 | paths: 37 | jquery:'vendor/scripts/jquery-1.9.1.js' 38 | handlebars:'vendor/scripts/handlebars-1.0.rc.4.js' 39 | ember: 'vendor/scripts/ember-latest.js' 40 | 41 | conventions: 42 | ignored: -> false 43 | 44 | plugins: 45 | jshint: 46 | pattern: /^app\/.*\.js$/ 47 | 48 | server: 49 | port: 3333 50 | base: '/' 51 | run: no 52 | -------------------------------------------------------------------------------- /examples/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Skylo: The Sky Loader 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |

Skylo

26 |
27 |
Full Demo
28 | 29 |
start
30 |
end
31 |
set(50)
32 |
get
33 |
inch(10)
34 | 35 |
36 | 37 | Github 38 | Demo Site 39 | 40 | 41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /generators/class/class.js.hbs: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colintoh/skylo/f514a4b6a79b0279e2feeed0b4f6f8f1261428f1/generators/class/class.js.hbs -------------------------------------------------------------------------------- /generators/class/generator.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | ], 4 | "dependencies": [ 5 | {"name": "helper", "params": "{{name}}"}, 6 | {"name": "template", "params": "{{name}}"} 7 | ] 8 | } -------------------------------------------------------------------------------- /generators/helper/generator.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | { 4 | "from": "helper.js.hbs", 5 | "to": "app/helpers/{{name}}.js" 6 | }, 7 | { 8 | "from": "insertHelper.js.hbs", 9 | "to": "app/helper.js", 10 | "method": "append" 11 | } 12 | ], 13 | "dependencies": [] 14 | } -------------------------------------------------------------------------------- /generators/helper/helper.js.hbs: -------------------------------------------------------------------------------- 1 | var App = require('app'); 2 | 3 | App.{{#camelize}}{{name}}{{/camelize}}Controller = Em.Controller.extend({ 4 | 5 | }); 6 | 7 | 8 | App.{{#camelize}}{{name}}{{/camelize}}View = Em.View.extend({ 9 | didInsertElement: function(){ 10 | } 11 | }); -------------------------------------------------------------------------------- /generators/helper/insertHelper.js.hbs: -------------------------------------------------------------------------------- 1 | 2 | require('helpers/{{name}}'); -------------------------------------------------------------------------------- /generators/template/generator.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | { 4 | "from": "template.js.hbs", 5 | "to": "app/templates/{{name}}.hbs" 6 | }, 7 | { 8 | "from": "insertTemplate.js.hbs", 9 | "to": "app/template.js", 10 | "method": "append" 11 | } 12 | ], 13 | "dependencies": [] 14 | } -------------------------------------------------------------------------------- /generators/template/insertTemplate.js.hbs: -------------------------------------------------------------------------------- 1 | 2 | require('templates/{{name}}'); -------------------------------------------------------------------------------- /generators/template/template.js.hbs: -------------------------------------------------------------------------------- 1 | The name of the template: {{name}} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "Colin Toh", 3 | "name": "skylo", 4 | "description": "A Twitter Bootstrap extension to add progress loader at the top of the page.", 5 | "version": "0.4.0", 6 | "homepage": "http://skylo.s3-website-ap-southeast-1.amazonaws.com/#/home", 7 | "repository": { 8 | "type": "git", 9 | "url": "skylo" 10 | }, 11 | "engines": { 12 | "node": "~0.6.10 || 0.8 || 0.9" 13 | }, 14 | "scripts": { 15 | "start": "brunch watch --server", 16 | "test": "brunch test" 17 | }, 18 | "dependencies": { 19 | "javascript-brunch": ">= 1.0 < 1.5", 20 | "stylus-brunch": "1.5.1", 21 | "css-brunch": ">= 1.0 < 1.5", 22 | "ember-precompiler-brunch": "1.5.1", 23 | "uglify-js-brunch": ">= 1.0 < 1.5", 24 | "clean-css-brunch": ">= 1.0 < 1.5", 25 | "jshint-brunch": "1.6.0", 26 | "auto-reload-brunch": "<=1.5", 27 | "grunt": "~0.4.1", 28 | "grunt-s3": "~0.2.0-alpha.2", 29 | "grunt-exec": "~0.4.2" 30 | }, 31 | "devDependencies": {} 32 | } 33 | -------------------------------------------------------------------------------- /vendor/README.md: -------------------------------------------------------------------------------- 1 | Vendor 2 | ====== 3 | 4 | Put your 3rd-party files here, but place your application-specific files in the app directory. 5 | 6 | -------------------------------------------------------------------------------- /vendor/scripts/bootstrap.js: -------------------------------------------------------------------------------- 1 | /* =================================================== 2 | * bootstrap-transition.js v2.3.2 3 | * http://getbootstrap.com/2.3.2/javascript.html#transitions 4 | * =================================================== 5 | * Copyright 2013 Twitter, Inc. 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ========================================================== */ 19 | 20 | 21 | !function ($) { 22 | 23 | "use strict"; // jshint ;_; 24 | 25 | 26 | /* CSS TRANSITION SUPPORT (http://www.modernizr.com/) 27 | * ======================================================= */ 28 | 29 | $(function () { 30 | 31 | $.support.transition = (function () { 32 | 33 | var transitionEnd = (function () { 34 | 35 | var el = document.createElement('bootstrap') 36 | , transEndEventNames = { 37 | 'WebkitTransition' : 'webkitTransitionEnd' 38 | , 'MozTransition' : 'transitionend' 39 | , 'OTransition' : 'oTransitionEnd otransitionend' 40 | , 'transition' : 'transitionend' 41 | } 42 | , name 43 | 44 | for (name in transEndEventNames){ 45 | if (el.style[name] !== undefined) { 46 | return transEndEventNames[name] 47 | } 48 | } 49 | 50 | }()) 51 | 52 | return transitionEnd && { 53 | end: transitionEnd 54 | } 55 | 56 | })() 57 | 58 | }) 59 | 60 | }(window.jQuery); 61 | /* ========================================================= 62 | * bootstrap-modal.js v2.3.2 63 | * http://getbootstrap.com/2.3.2/javascript.html#modals 64 | * ========================================================= 65 | * Copyright 2013 Twitter, Inc. 66 | * 67 | * Licensed under the Apache License, Version 2.0 (the "License"); 68 | * you may not use this file except in compliance with the License. 69 | * You may obtain a copy of the License at 70 | * 71 | * http://www.apache.org/licenses/LICENSE-2.0 72 | * 73 | * Unless required by applicable law or agreed to in writing, software 74 | * distributed under the License is distributed on an "AS IS" BASIS, 75 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 76 | * See the License for the specific language governing permissions and 77 | * limitations under the License. 78 | * ========================================================= */ 79 | 80 | 81 | !function ($) { 82 | 83 | "use strict"; // jshint ;_; 84 | 85 | 86 | /* MODAL CLASS DEFINITION 87 | * ====================== */ 88 | 89 | var Modal = function (element, options) { 90 | this.options = options 91 | this.$element = $(element) 92 | .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) 93 | this.options.remote && this.$element.find('.modal-body').load(this.options.remote) 94 | } 95 | 96 | Modal.prototype = { 97 | 98 | constructor: Modal 99 | 100 | , toggle: function () { 101 | return this[!this.isShown ? 'show' : 'hide']() 102 | } 103 | 104 | , show: function () { 105 | var that = this 106 | , e = $.Event('show') 107 | 108 | this.$element.trigger(e) 109 | 110 | if (this.isShown || e.isDefaultPrevented()) return 111 | 112 | this.isShown = true 113 | 114 | this.escape() 115 | 116 | this.backdrop(function () { 117 | var transition = $.support.transition && that.$element.hasClass('fade') 118 | 119 | if (!that.$element.parent().length) { 120 | that.$element.appendTo(document.body) //don't move modals dom position 121 | } 122 | 123 | that.$element.show() 124 | 125 | if (transition) { 126 | that.$element[0].offsetWidth // force reflow 127 | } 128 | 129 | that.$element 130 | .addClass('in') 131 | .attr('aria-hidden', false) 132 | 133 | that.enforceFocus() 134 | 135 | transition ? 136 | that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown') }) : 137 | that.$element.focus().trigger('shown') 138 | 139 | }) 140 | } 141 | 142 | , hide: function (e) { 143 | e && e.preventDefault() 144 | 145 | var that = this 146 | 147 | e = $.Event('hide') 148 | 149 | this.$element.trigger(e) 150 | 151 | if (!this.isShown || e.isDefaultPrevented()) return 152 | 153 | this.isShown = false 154 | 155 | this.escape() 156 | 157 | $(document).off('focusin.modal') 158 | 159 | this.$element 160 | .removeClass('in') 161 | .attr('aria-hidden', true) 162 | 163 | $.support.transition && this.$element.hasClass('fade') ? 164 | this.hideWithTransition() : 165 | this.hideModal() 166 | } 167 | 168 | , enforceFocus: function () { 169 | var that = this 170 | $(document).on('focusin.modal', function (e) { 171 | if (that.$element[0] !== e.target && !that.$element.has(e.target).length) { 172 | that.$element.focus() 173 | } 174 | }) 175 | } 176 | 177 | , escape: function () { 178 | var that = this 179 | if (this.isShown && this.options.keyboard) { 180 | this.$element.on('keyup.dismiss.modal', function ( e ) { 181 | e.which == 27 && that.hide() 182 | }) 183 | } else if (!this.isShown) { 184 | this.$element.off('keyup.dismiss.modal') 185 | } 186 | } 187 | 188 | , hideWithTransition: function () { 189 | var that = this 190 | , timeout = setTimeout(function () { 191 | that.$element.off($.support.transition.end) 192 | that.hideModal() 193 | }, 500) 194 | 195 | this.$element.one($.support.transition.end, function () { 196 | clearTimeout(timeout) 197 | that.hideModal() 198 | }) 199 | } 200 | 201 | , hideModal: function () { 202 | var that = this 203 | this.$element.hide() 204 | this.backdrop(function () { 205 | that.removeBackdrop() 206 | that.$element.trigger('hidden') 207 | }) 208 | } 209 | 210 | , removeBackdrop: function () { 211 | this.$backdrop && this.$backdrop.remove() 212 | this.$backdrop = null 213 | } 214 | 215 | , backdrop: function (callback) { 216 | var that = this 217 | , animate = this.$element.hasClass('fade') ? 'fade' : '' 218 | 219 | if (this.isShown && this.options.backdrop) { 220 | var doAnimate = $.support.transition && animate 221 | 222 | this.$backdrop = $('