Skip to content

I
i20rzslider
Commit c9bb9817 authored by e-cloud's avatar e-cloud
Browse files
Options

take the *html fragment* out of the js file, and use *grunt-angular-templates*… 

take the *html fragment* out of the js file, and use *grunt-angular-templates* and *grunt-replace* plugin to generate the templateCache and insert it into the js file
parent 2a8ffc1b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1399 additions and 20 deletions
.gitignore
View file @ c9bb9817
node_modules/
.idea/
bower_components/
temp/
\ No newline at end of file
Gruntfile.js
View file @ c9bb9817
......@@ -37,18 +37,63 @@ module.exports = function (grunt)
rzslider: {
files: {
'dist/rzslider.min.js': [
'src/rzslider.js'
'dist/rzslider.js'
]
}
}
},
ngtemplates: {
app: {
src: 'src/**.html',
dest: 'temp/templates.js',
options: {
htmlmin: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true, // Only if you don't use comment directives!
removeEmptyAttributes: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
},
module: 'rzModule',
url: function(url) {
return url.replace('src/', '');
},
bootstrap: function (module, script) {
return 'module.run([\'$templateCache\', function($templateCache) {\n' + script + '\n}]);';
}
}
}
},
replace: {
dist: {
options: {
patterns: [
{
match: /\/\*templateReplacement\*\//,
replacement: '<%= grunt.file.read("temp/templates.js") %>'
}
]
},
files: [
{expand: true, flatten: true, src: ['src/rzslider.js'], dest: 'dist/'}
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('grunt-angular-templates');
grunt.loadNpmTasks('grunt-replace');
grunt.registerTask('default', ['css', 'js']);
grunt.registerTask('css', ['recess']);
grunt.registerTask('js', ['uglify']);
grunt.registerTask('js', ['ngtemplates','replace', 'uglify']);
};
demo/index.html
View file @ c9bb9817
......@@ -115,7 +115,7 @@
</body>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../src/rzslider.js"></script>
<script src="../dist/rzslider.js"></script>
<script>
var app = angular.module('plunker', ['rzModule']);
......
dist/rzslider.js 0 → 100644
View file @ c9bb9817
This diff is collapsed.
dist/rzslider.min.css
View file @ c9bb9817
/*! jusas-angularjs-slider - v0.1.29 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-12 */
/*! jusas-angularjs-slider - v0.1.29 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-13 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:0;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:1;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}
\ No newline at end of file
dist/rzslider.min.js
View file @ c9bb9817
This diff is collapsed.
package.json
View file @ c9bb9817
......@@ -13,9 +13,11 @@
],
"devDependencies": {
"grunt": "~0.4.2",
"grunt-angular-templates": "^0.5.7",
"grunt-contrib-mincss": "~0.3.2",
"grunt-contrib-uglify": "~0.2.2",
"grunt-recess": "~0.4.0",
"grunt-replace": "^0.11.0",
"recess": "~1.1.9"
},
"author": "Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>",
......
src/rzSliderTpl.html 0 → 100644
View file @ c9bb9817
<span class="rz-bar-wrapper"><span class="rz-bar"></span></span> <!-- // 0 The slider bar -->
<span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span> <!-- // 1 Highlight between two handles -->
<span class="rz-pointer"></span> <!-- // 2 Left slider handle -->
<span class="rz-pointer"></span> <!-- // 3 Right slider handle -->
<span class="rz-bubble rz-limit"></span> <!-- // 4 Floor label -->
<span class="rz-bubble rz-limit"></span> <!-- // 5 Ceiling label -->
<span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->
<span class="rz-bubble"></span> <!-- // 7 Label above right slider handle -->
<span class="rz-bubble"></span> <!-- // 8 Range label when the slider handles are close ex. 15 - 17 -->
\ No newline at end of file
src/rzslider.js
View file @ c9bb9817
......@@ -31,20 +31,6 @@
var module = angular.module('rzModule', [])
.run(['$templateCache', function($templateCache) {
'use strict';
var template = '<span class="rz-bar-wrapper"><span class="rz-bar"></span></span>' + // 0 The slider bar
'<span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span>' + // 1 Highlight between two handles
'<span class="rz-pointer"></span>' + // 2 Left slider handle
'<span class="rz-pointer"></span>' + // 3 Right slider handle
'<span class="rz-bubble rz-limit"></span>' + // 4 Floor label
'<span class="rz-bubble rz-limit"></span>' + // 5 Ceiling label
'<span class="rz-bubble"></span>' + // 6 Label above left slider handle
'<span class="rz-bubble"></span>' + // 7 Label above right slider handle
'<span class="rz-bubble"></span>'; // 8 Range label when the slider handles are close ex. 15 - 17
$templateCache.put('rzSliderTpl.html', template);
}])
.value('throttle',
/**
* throttle
......@@ -1335,5 +1321,7 @@ function throttle(func, wait, options) {
* @property {bool} trailing
*/
/*templateReplacement*/
return module
}));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment