Skip to content

Commit af01365

Browse files
author
crisbeto
committed
initial commit
1 parent daabce7 commit af01365

11 files changed

+420
-2
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
bower_components/
2+
node_modules/
3+
.DS_Store
4+
.grunt/

‎.jshintrc

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"curly": false,
3+
"eqeqeq": true,
4+
"immed": true,
5+
"latedef": true,
6+
"newcap": true,
7+
"noarg": true,
8+
"sub": true,
9+
"undef": true,
10+
"boss": true,
11+
"eqnull": true,
12+
"globalstrict": true,
13+
"strict": true,
14+
"white": true,
15+
"indent": 4,
16+
"unused": true,
17+
"predef": [
18+
"angular",
19+
"document",
20+
"window",
21+
"console",
22+
"$"
23+
]
24+
}

‎Gruntfile.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
'use strict';
2+
3+
// jshint node:true
4+
5+
module.exports = function(grunt) {
6+
var files = [
7+
'src/load-dependency.js',
8+
'src/ui-sortable-loader.js'
9+
];
10+
11+
grunt.initConfig({
12+
pkg: grunt.file.readJSON('package.json'),
13+
'uglify': {
14+
'options': {
15+
'banner': '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
16+
},
17+
'build': {
18+
'src': files,
19+
'dest': 'build/ui-sortable-loader.min.js'
20+
}
21+
},
22+
'concat': {
23+
'options': {
24+
separator: '\n',
25+
},
26+
'build': {
27+
src: files,
28+
dest: 'build/ui-sortable-loader.js',
29+
}
30+
},
31+
'gh-pages': {
32+
'options': {
33+
'base': 'build'
34+
},
35+
'deploy': {
36+
'src': ['index.html', 'ui-sortable-loader.js', 'ui-sortable-loader.min.js']
37+
}
38+
},
39+
'jshint': {
40+
'options': {
41+
'jshintrc': true,
42+
'reporter': require('jshint-stylish')
43+
},
44+
'src': {
45+
'files': {
46+
'src': ['*.js', '!*.min.js']
47+
}
48+
}
49+
}
50+
});
51+
52+
grunt.loadNpmTasks('grunt-contrib-uglify');
53+
grunt.loadNpmTasks('grunt-contrib-jshint');
54+
grunt.loadNpmTasks('grunt-contrib-concat');
55+
grunt.loadNpmTasks('grunt-gh-pages');
56+
57+
grunt.registerTask('default', ['jshint:src', 'concat:build', 'uglify:build']);
58+
grunt.registerTask('deploy', ['default', 'gh-pages:deploy']);
59+
};

‎README.md

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,38 @@
1-
# angular-ui-sortable-loader
2-
Asynchronously loads jQuery and jQuery UI for use with Angular UI Sortable
1+
# Angular UI Sortable Loader
2+
3+
Asynchronously loads jQuery and jQuery UI for use with [Angular UI Sortable](https://github.com/angular-ui/ui-sortable). jQuery and jQueryUI are only loaded once, when a `ui-sortable` directive is encountered.
4+
5+
Please note that this module is intended to work with `ui.sortable` and it probably won't work with any other script that depends on jQuery.
6+
7+
## [Demo](http://crisbeto.github.io/angular-ui-sortable-loader/)
8+
9+
## Install
10+
11+
Include Angular, [Angular UI Sortable](https://github.com/angular-ui/ui-sortable) and [ui-sortable-loader.min.js](https://raw.githubusercontent.com/crisbeto/angular-svg-round-progressbar/master/build/ui-sortable-loader.min.js) or [ui-sortable-loader.js](https://raw.githubusercontent.com/crisbeto/angular-svg-round-progressbar/master/build/ui-sortable-loader.js) in your page. You can use bower, or a script-tag:
12+
13+
`bower install angular-ui-sortable-loader`
14+
15+
or
16+
17+
`<script src="http://crisbeto.github.io/angular-ui-sortable-loader/ui-sortable-loader.min.js"></script>`
18+
19+
20+
Afterwards you need to specify your `jQueryPath` and `jQueryUiPath` in the `uiSortableConfig` object, inside a **run** block in your app. Note that you need to have declared `ui.sortable` as a dependency:
21+
22+
```javascript
23+
angular.module('someModule', ['ui.sortable']).run(['uiSortableConfig', function(uiSortableConfig){
24+
uiSortableConfig.jQueryPath = 'https://code.jquery.com/jquery-1.11.3.min.js';
25+
uiSortableConfig.jQueryUiPath = 'https://code.jquery.com/ui/1.11.4/jquery-ui.js';
26+
}])
27+
```
28+
29+
## Development
30+
31+
* `npm install` to install development dependencies
32+
* `grunt` to build minified demo in build/
33+
* `grunt deploy` to build minified demo and push it to gh-pages branch
34+
35+
36+
## Credits
37+
38+
* The awesome [ui-sortable](https://github.com/angular-ui/ui-sortable) project.

‎bower.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "angular-ui-sortable-loader",
3+
"version": "0.1.0",
4+
"homepage": "https://github.com/crisbeto/angular-ui-sortable-loader",
5+
"authors": [
6+
"crisbeto"
7+
],
8+
"description": "Asynchronously loads jQuery and jQuery UI for use with Angular UI Sortable",
9+
"keywords": [
10+
"angular",
11+
"jquery",
12+
"jquery-ui",
13+
"sortable",
14+
"ui-sortable"
15+
],
16+
"license": "MIT",
17+
"ignore": [
18+
"**/.*",
19+
"bower_components"
20+
],
21+
"dependencies": {
22+
"angular": ">=1.3.0",
23+
"angular-ui-sortable": "~0.13.4"
24+
},
25+
"main": "build/ui-sortable-loader.min.js"
26+
}

‎build/index.html

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!doctype html>
2+
<html lang="en" ng-app="demo">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Angular UI Sortable loader demo</title>
6+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
7+
<style>
8+
*{
9+
box-sizing: border-box;
10+
}
11+
12+
body{
13+
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
14+
}
15+
16+
.container{
17+
width: 400px;
18+
margin: 100px auto;
19+
}
20+
21+
ul{
22+
padding: 0;
23+
border: solid 1px #ccc;
24+
list-style: none;
25+
}
26+
27+
li{
28+
margin: 0;
29+
cursor: move;
30+
border-bottom: solid 1px #ccc;
31+
padding: 10px;
32+
}
33+
34+
li:last-of-type{
35+
border-bottom:none;
36+
}
37+
38+
.ui-sortable-placeholder{
39+
background:#ccc;
40+
}
41+
42+
.ui-sortable-helper, li:hover{
43+
background:#ccc;
44+
color:#fff;
45+
}
46+
47+
.back{
48+
position: fixed;
49+
top:5px;
50+
right:5px;
51+
}
52+
</style>
53+
</head>
54+
<body>
55+
<div class="container" ng-controller="demoController">
56+
<a class="back" href="https://github.com/crisbeto/angular-ui-sortable-loader">Back to project repo</a>
57+
58+
<h1>Example sortable</h1>
59+
<ul ui-sortable="options" ng-model="items">
60+
<li ng-repeat="item in items">{{ item }}</li>
61+
</ul>
62+
</div>
63+
64+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
65+
<script src="https://rawgit.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
66+
<script src="ui-sortable-loader.js"></script>
67+
<script>
68+
'use strict';
69+
70+
angular.module('demo', ['ui.sortable']).run(['uiSortableConfig', function(uiSortableConfig){
71+
uiSortableConfig.jQueryPath = 'https://code.jquery.com/jquery-1.11.3.min.js';
72+
uiSortableConfig.jQueryUiPath = 'https://code.jquery.com/ui/1.11.4/jquery-ui.js';
73+
}])
74+
.controller('demoController', ['$scope', function($scope){
75+
$scope.items = ['One', 'Two', 'Three', 'Four', 'Five', 'Six'];
76+
$scope.options = {
77+
start: function(e, ui){
78+
ui.placeholder.height(ui.item.height());
79+
},
80+
tolerance: 'pointer',
81+
items:'li',
82+
revert: true,
83+
placeholder: 'ui-sortable-placeholder'
84+
};
85+
}]);
86+
</script>
87+
</body>
88+
</html>

‎build/ui-sortable-loader.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
'use strict';
2+
3+
angular.module('ui.sortable').service('loadDependency', ['$q', function($q){
4+
var loadedDependencies = [];
5+
6+
return function(src) {
7+
if(!src) throw 'Please supply a valid source url';
8+
9+
for(var i = 0; i < loadedDependencies.length; i++){
10+
if(loadedDependencies[i].src === src){
11+
return loadedDependencies[i].promise;
12+
}
13+
}
14+
15+
var deferred = $q.defer();
16+
var element;
17+
var loadCallback = function(){
18+
deferred.resolve();
19+
angular.element(element).unbind('load', loadCallback);
20+
};
21+
22+
loadedDependencies.push({
23+
src: src,
24+
promise: deferred.promise
25+
});
26+
27+
element = document.createElement('script');
28+
element.setAttribute('src', src);
29+
30+
angular.element(element).bind('load', loadCallback);
31+
document.getElementsByTagName('head')[0].appendChild(element);
32+
33+
return deferred.promise;
34+
};
35+
}]);
36+
37+
'use strict';
38+
39+
angular.module('ui.sortable').config(['$provide', function($provide){
40+
$provide.decorator('uiSortableDirective', ['$delegate', '$window', '$q', '$log', 'uiSortableConfig', 'loadDependency', function($delegate, $window, $q, $log, uiSortableConfig, loadDependency){
41+
42+
var config = uiSortableConfig;
43+
44+
if(!config.jQueryPath && !$window.jQuery){
45+
$log.error('Please specify the jQueryPath in uiSortableConfig');
46+
}else if(!config.jQueryUiPath){
47+
$log.error('Please specify the jQueryUiPath in uiSortableConfig');
48+
}else{
49+
var directive = $delegate[0];
50+
var link = directive.link;
51+
52+
directive.compile = function(){
53+
return function(){
54+
var args = arguments;
55+
var _this = this;
56+
var jqPromise = $window.jQuery ? $q.when() : loadDependency(config.jQueryPath);
57+
58+
jqPromise.then(function(){
59+
loadDependency(config.jQueryUiPath).then(function(){
60+
angular.element.fn = angular.element.fn || $window.jQuery.fn;
61+
angular.element.fn.jquery = angular.element.fn.jquery || $window.jQuery;
62+
63+
// 0 is the scope, 1 is the element
64+
args[1] = $(args[1]);
65+
link.apply(_this, args);
66+
});
67+
});
68+
};
69+
};
70+
}
71+
72+
return $delegate;
73+
}]);
74+
}]);

‎build/ui-sortable-loader.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "angular-ui-sortable-loader",
3+
"version": "0.1.0",
4+
"description": "Asynchronously loads jQuery and jQuery UI for use with Angular UI Sortable",
5+
"main":"build/ui-sortable-loader.min.js",
6+
"scripts": {},
7+
"repository": {
8+
"type": "git",
9+
"url": "git://github.com/crisbeto/angular-ui-sortable-loader"
10+
},
11+
"keywords": [
12+
"angular",
13+
"jquery",
14+
"jquery-ui",
15+
"sortable",
16+
"ui-sortable"
17+
],
18+
"author": "crisbeto",
19+
"license": "MIT",
20+
"bugs": {
21+
"url": "https://github.com/crisbeto/angular-ui-sortable-loader/issues"
22+
},
23+
"homepage": "https://github.com/crisbeto/angular-ui-sortable-loader",
24+
"devDependencies": {
25+
"grunt": "^0.4.5",
26+
"grunt-contrib-concat": "^0.5.0",
27+
"grunt-contrib-uglify": "^0.5.0",
28+
"grunt-contrib-jshint": "^0.11.1",
29+
"grunt-gh-pages": "^0.9.1",
30+
"jshint-stylish": "^1.0.1"
31+
}
32+
}

‎src/load-dependency.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
'use strict';
2+
3+
angular.module('ui.sortable').service('loadDependency', ['$q', function($q){
4+
var loadedDependencies = [];
5+
6+
return function(src) {
7+
if(!src) throw 'Please supply a valid source url';
8+
9+
for(var i = 0; i < loadedDependencies.length; i++){
10+
if(loadedDependencies[i].src === src){
11+
return loadedDependencies[i].promise;
12+
}
13+
}
14+
15+
var deferred = $q.defer();
16+
var element;
17+
var loadCallback = function(){
18+
deferred.resolve();
19+
angular.element(element).unbind('load', loadCallback);
20+
};
21+
22+
loadedDependencies.push({
23+
src: src,
24+
promise: deferred.promise
25+
});
26+
27+
element = document.createElement('script');
28+
element.setAttribute('src', src);
29+
30+
angular.element(element).bind('load', loadCallback);
31+
document.getElementsByTagName('head')[0].appendChild(element);
32+
33+
return deferred.promise;
34+
};
35+
}]);

0 commit comments

Comments
 (0)