Skip to content

Commit

Permalink
Version 2.2.1
Browse files Browse the repository at this point in the history
- Code style
- Javascript: setProgress method now checks if element exists.
- Added Gruntfile.
- Fixed Javascript examples.
  • Loading branch information
franverona committed Apr 16, 2018
1 parent 7d6d438 commit 1051d0f
Show file tree
Hide file tree
Showing 11 changed files with 1,691 additions and 365 deletions.
53 changes: 53 additions & 0 deletions Gruntfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
module.exports = function(grunt) {

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
mangle: {
reserved: ['jQuery', '$']
},
output: {
comments: 'some',
},
},
loadgo: {
files: {
'loadgo.min.js': ['loadgo.js'],
'loadgo-nojquery.min.js': ['loadgo-nojquery.js'],
}
}
},
clean : {
oldminifies: {
src: [
'loadgo.min.js',
'loadgo-nojquery.min.js',
]
}
},
replace: {
loadgo: {
src: ['loadgo.js', 'loadgo.min.js', 'loadgo-nojquery.js', 'loadgo-nojquery.min.js'],
overwrite: true,
replacements: [
{
from: /@preserve\sLoadGo\sv([0-9]+)\.?([0-9]+)(\.([0-9]+))?\s\(http:\/\/franverona.com\/loadgo\)/g,
to: '@preserve LoadGo v<%= pkg.version %> (http://franverona.com/loadgo)'
},
{
from: /([0-9])+\s-\sFran Verona/g,
to: '<%= grunt.template.today("yyyy") %> - Fran Verona'
},
]
}
}
});

grunt.loadNpmTasks('grunt-contrib-uglify-es');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-text-replace');

grunt.registerTask('default', ['clean', 'uglify', 'replace']);

};
162 changes: 108 additions & 54 deletions examples/javascript/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="author" content="franverona">
<meta name="description" content="Javascript plugin for using your own images as a progress bar">
<meta name="keywords" content="loadgo jquery plugin progress bar javascript html5 web development">
<meta name="keywords" content="loadgo Javascript plugin progress bar javascript html5 web development">

<title>LoadGo - Your own images as a progress bar</title>

Expand Down Expand Up @@ -44,10 +44,15 @@ <h4>
<div class="row" style="margin-top:10px;">
<div class="col-md-6 col-md-offset-3">
<h4>
<strong>jQuery</strong>
<strong>Javascript</strong>
</h4>
<pre class="language-javascript">
$('#disney').loadgo();</pre>
// Default - Javascript
var disney = document.getElementById('disney');
disney.src = '../logos/disney.png';
disney.onload = function () {
Loadgo.init(disney);
};</pre>
</div>
</div>
<div class="row" style="margin-top:10px;">
Expand All @@ -74,14 +79,19 @@ <h4>
<div class="row" style="margin-top:10px;">
<div class="col-md-6 col-md-offset-3">
<h4>
<strong>jQuery</strong>
<strong>Javascript</strong>
</h4>
<pre class="language-javascript">
$('#superman').loadgo({
'opacity': 0.2,
'animated': false,
'bgcolor': '#01AEF0'
});</pre>
// Opacity, no animation and background color - Javascript
var superman = document.getElementById('superman');
superman.src = '../logos/superman.png';
superman.onload = function () {
Loadgo.init(superman, {
'opacity': 0.2,
'animated': false,
'bgcolor': '#01AEF0'
});
};</pre>
</div>
</div>
<div class="row" style="margin-top:10px;">
Expand All @@ -108,13 +118,18 @@ <h4>
<div class="row" style="margin-top:10px;">
<div class="col-md-6 col-md-offset-3">
<h4>
<strong>jQuery</strong>
<strong>Javascript</strong>
</h4>
<pre class="language-javascript">
$('#batman').loadgo({
'opacity': 1,
'image': 'batman-overlay.png'
});</pre>
// Overlay - Javascript
var batman = document.getElementById('batman');
batman.src = '../logos/batman.png';
batman.onload = function () {
Loadgo.init(batman, {
'opacity': 1,
'image': '../logos/batman-overlay.png'
});
};</pre>
</div>
</div>
<div class="row" style="margin-top:10px;">
Expand All @@ -141,10 +156,14 @@ <h4>
<div class="row" style="margin-top:20px;">
<div class="col-md-6" style="margin-bottom:20px;">
<pre class="col-md-12 language-javascript">
// Left to Right - jQuery
$('#jurassiclr').loadgo({
'direction': 'lr'
});
// Left to Right - Javascript
var jurassiclr = document.getElementById('jurassiclr');
jurassiclr.src = '../logos/jurassic.png';
jurassiclr.onload = function () {
Loadgo.init(jurassiclr, {
'direction': 'lr'
});
};
</pre>
<div class="col-sm-12">
<img id="jurassiclr" src="../logos/jurassic.png" alt="Jurassic Park Logo" class="img-responsive logo" style="margin: 0 auto;" />
Expand All @@ -160,10 +179,14 @@ <h4>
</div>
<div class="col-md-6" style="margin-bottom:20px;">
<pre class="col-md-12 language-javascript">
// Right to Left - jQuery
$('#jurassicrl').loadgo({
'direction': 'rl'
});
// Right to Left - Javascript
var jurassicrl = document.getElementById('jurassicrl');
jurassicrl.src = '../logos/jurassic.png';
jurassicrl.onload = function () {
Loadgo.init(jurassicrl, {
'direction': 'rl'
});
};
</pre>
<div class="col-sm-12">
<img id="jurassicrl" src="../logos/jurassic.png" alt="Jurassic Park Logo" class="img-responsive logo" style="margin: 0 auto;" />
Expand All @@ -181,10 +204,14 @@ <h4>
<div class="row" style="margin-top:20px;">
<div class="col-md-6" style="margin-bottom:20px;">
<pre class="col-md-12 language-javascript">
// Bottom to Top - jQuery
$('#jurassicbt').loadgo({
'direction': 'bt'
});
// Top to Bottom - Javascript
var jurassictb = document.getElementById('jurassictb');
jurassictb.src = '../logos/jurassic.png';
jurassictb.onload = function () {
Loadgo.init(jurassictb, {
'direction': 'tb'
});
};
</pre>
<div class="col-sm-12">
<img id="jurassicbt" src="../logos/jurassic.png" alt="Jurassic Park Logo" class="img-responsive logo" style="margin: 0 auto;" />
Expand All @@ -200,10 +227,14 @@ <h4>
</div>
<div class="col-md-6" style="margin-bottom:20px;">
<pre class="col-md-12 language-javascript">
// Top to Bottom - jQuery
$('#jurassictb').loadgo({
'direction': 'tb'
});
// Bottom to Top - Javascript
var jurassicbt = document.getElementById('jurassicbt');
jurassicbt.src = '../logos/jurassic.png';
jurassicbt.onload = function () {
Loadgo.init(jurassicbt, {
'direction': 'bt'
});
};
</pre>
<div class="col-sm-12">
<img id="jurassictb" src="../logos/jurassic.png" alt="Jurassic Park Logo" class="img-responsive logo" style="margin: 0 auto;" />
Expand All @@ -227,10 +258,14 @@ <h4>
<div class="row" style="margin-top:20px;">
<div class="col-md-6" style="margin-bottom:20px;">
<pre class="col-md-12 language-javascript">
// Sepia - jQuery
$('#spidermanSepia').loadgo({
'filter': 'sepia'
});
// Sepia - Javascript
var spidermanSepia = document.getElementById('spidermanSepia');
spidermanSepia.src = '../logos/spiderman.png';
spidermanSepia.onload = function () {
Loadgo.init(spidermanSepia, {
'filter': 'sepia'
});
};
</pre>
<div class="col-sm-12" style="margin-top:30px">
<img id="spidermanSepia" src="../logos/spiderman.png" alt="spiderman Logo" class="img-responsive logo" style="margin: 0 auto;" />
Expand All @@ -246,10 +281,14 @@ <h4>
</div>
<div class="col-md-6" style="margin-bottom:20px;">
<pre class="col-md-12 language-javascript">
// Blur - jQuery
$('#spidermanBlur').loadgo({
'filter': 'blur'
});
// Blur - Javascript
var spidermanBlur = document.getElementById('spidermanBlur');
spidermanBlur.src = '../logos/spiderman.png';
spidermanBlur.onload = function () {
Loadgo.init(spidermanBlur, {
'filter': 'blur'
});
};
</pre>
<div class="col-sm-12" style="margin-top:30px">
<img id="spidermanBlur" src="../logos/spiderman.png" alt="spiderman Logo" class="img-responsive logo" style="margin: 0 auto;" />
Expand All @@ -267,10 +306,14 @@ <h4>
<div class="row" style="margin-top:20px;">
<div class="col-md-6" style="margin-bottom:20px;">
<pre class="col-md-12 language-javascript">
// Invert - jQuery
$('#spidermanInvert').loadgo({
'filter': 'invert'
});
// Invert - Javascript
var spidermanInvert = document.getElementById('spidermanInvert');
spidermanInvert.src = '../logos/spiderman.png';
spidermanInvert.onload = function () {
Loadgo.init(spidermanInvert, {
'filter': 'invert'
});
};
</pre>
<div class="col-sm-12" style="margin-top:30px">
<img id="spidermanInvert" src="../logos/spiderman.png" alt="spiderman Logo" class="img-responsive logo" style="margin: 0 auto;" />
Expand All @@ -286,10 +329,14 @@ <h4>
</div>
<div class="col-md-6" style="margin-bottom:20px;">
<pre class="col-md-12 language-javascript">
// Hue Rotate - jQuery
$('#spidermanHue').loadgo({
'filter': 'hue-rotate'
});
// Hue - Javascript
var spidermanHue = document.getElementById('spidermanHue');
spidermanHue.src = '../logos/spiderman.png';
spidermanHue.onload = function () {
Loadgo.init(spidermanHue, {
'filter': 'hue-rotate'
});
};
</pre>
<div class="col-sm-12" style="margin-top:30px">
<img id="spidermanHue" src="../logos/spiderman.png" alt="spiderman Logo" class="img-responsive logo" style="margin: 0 auto;" />
Expand All @@ -308,10 +355,13 @@ <h4>
<div class="row" style="margin-top:20px;">
<div class="col-md-6" style="margin-bottom:20px;">
<pre class="col-md-12 language-javascript">
// Opacity - jQuery
$('#spidermanOpacity').loadgo({
'filter': 'opacity'
});
// Opacity - Javascript
var spidermanOpacity = document.getElementById('spidermanOpacity');
spidermanOpacity.onload = function () {
Loadgo.init(spidermanOpacity, {
'filter': 'opacity'
});
};
</pre>
<div class="col-sm-12" style="margin-top:30px">
<img id="spidermanOpacity" src="../logos/spiderman.png" alt="spiderman Logo" class="img-responsive logo" style="margin: 0 auto;" />
Expand All @@ -327,10 +377,14 @@ <h4>
</div>
<div class="col-md-6" style="margin-bottom:20px;">
<pre class="col-md-12 language-javascript">
// Grayscale - jQuery
$('#spidermanGrayscale').loadgo({
'filter': 'grayscale'
});
// Grayscale - Javascript
var spidermanGrayscale = document.getElementById('spidermanGrayscale');
spidermanGrayscale.src = '../logos/spiderman.png';
spidermanGrayscale.onload = function () {
Loadgo.init(spidermanGrayscale, {
'filter': 'grayscale'
});
};
</pre>
<div class="col-sm-12" style="margin-top:30px">
<img id="spidermanGrayscale" src="../logos/spiderman.png" alt="spiderman Logo" class="img-responsive logo" style="margin: 0 auto;" />
Expand Down
Loading

0 comments on commit 1051d0f

Please sign in to comment.