Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Replaces JS loader with SVG. Stubs out old JS methods #1890

Merged
merged 3 commits into from
Oct 26, 2016
Merged

Replaces JS loader with SVG. Stubs out old JS methods #1890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3e8a3cb
(GH1884) replaces JS loader with SVG. Stubs out old JS methods for ba…
Oct 26, 2016
ad64a68
(GH1884) updates tests
Oct 26, 2016
b9df0ed
Merge branch 'master' into GH1884---use-mc-theme-svg-for-loader
Oct 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -598,15 +598,8 @@ <h2>Infinite Scroll</h2>
<h2>Loader</h2>
<div class="clearfix thin-box" id="loaderWrapper">
<div class="loader" data-initialize="loader" id="myLoader1"></div>
<div class="loader" data-frame="5" data-initialize="loader" id="myLoader2"></div>
<div class="loader" data-delay="500" data-initialize="loader" id="myLoader3"></div>
<div class="loader" data-begin="3" data-end="6" data-initialize="loader" id="myLoader4"></div>
</div>
<div class="btn-panel">
<button type="button" class="btn btn-default" id="btnLoaderPlay">play</button>
<button type="button" class="btn btn-default" id="btnLoaderPause">pause</button>
<button type="button" class="btn btn-default" id="btnLoaderNext">next</button>
<button type="button" class="btn btn-default" id="btnLoaderPrevious">previous</button>
<button type="button" class="btn btn-default" id="btnLoaderDestroy">destroy and append</button>
</div>
</section>
Expand Down
12 changes: 0 additions & 12 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,18 +246,6 @@ define(function (require) {
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

// sample method buttons
$('#btnLoaderPlay').on('click', function () {
$('#myLoader1').loader('play');
});
$('#btnLoaderPause').on('click', function () {
$('#myLoader1').loader('pause');
});
$('#btnLoaderNext').on('click', function () {
$('#myLoader1').loader('next');
});
$('#btnLoaderPrevious').on('click', function () {
$('#myLoader1').loader('previous');
});
$('#btnLoaderDestroy').on('click', function () {
var $container = $('#myLoader1').parent();
var markup = $('#myLoader1').loader('destroy');
Expand Down
73 changes: 7 additions & 66 deletions js/loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,31 +34,13 @@
var Loader = function (element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.loader.defaults, options);

this.begin = (this.$element.is('[data-begin]')) ? parseInt(this.$element.attr('data-begin'), 10) : 1;
this.delay = (this.$element.is('[data-delay]')) ? parseFloat(this.$element.attr('data-delay')) : 150;
this.end = (this.$element.is('[data-end]')) ? parseInt(this.$element.attr('data-end'), 10) : 8;
this.frame = (this.$element.is('[data-frame]')) ? parseInt(this.$element.attr('data-frame'), 10) : this.begin;
this.isIElt9 = false;
this.timeout = {};

var ieVer = this.msieVersion();
if (ieVer !== false && ieVer < 9) {
this.$element.addClass('iefix');
this.isIElt9 = true;
}

this.$element.attr('data-frame', this.frame + '');
this.play();
};

Loader.prototype = {

constructor: Loader,

destroy: function () {
this.pause();

this.$element.remove();
// any external bindings
// [none]
Expand All @@ -68,60 +50,19 @@
return this.$element[0].outerHTML;
},

ieRepaint: function () {
if (this.isIElt9) {
this.$element.addClass('iefix_repaint').removeClass('iefix_repaint');
}
},

msieVersion: function () {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)), 10);
} else {
return false;
}
},

next: function () {
this.frame++;
if (this.frame > this.end) {
this.frame = this.begin;
}
ieRepaint: function () {},

this.$element.attr('data-frame', this.frame + '');
this.ieRepaint();
},
msieVersion: function () {},

pause: function () {
clearTimeout(this.timeout);
},
next: function () {},

play: function () {
var self = this;
clearTimeout(this.timeout);
this.timeout = setTimeout(function () {
self.next();
self.play();
}, this.delay);
},
pause: function () {},

previous: function () {
this.frame--;
if (this.frame < this.begin) {
this.frame = this.end;
}
play: function () {},

this.$element.attr('data-frame', this.frame + '');
this.ieRepaint();
},
previous: function () {},

reset: function () {
this.frame = this.begin;
this.$element.attr('data-frame', this.frame + '');
this.ieRepaint();
}
reset: function () {}
};

// LOADER PLUGIN DEFINITION
Expand Down
54 changes: 1 addition & 53 deletions less/loader.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,59 +6,7 @@
font-size: 64px;
position: relative;
width: 64px;

&:after, &:before {
#fuelux > .icon-base-styles();

bottom: 0;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}

&:before {
content: '\e000';
opacity: 0.33;
}

&.iefix:before{
color: @gray74;
opacity: 1;
}

&[data-frame="1"]:after {
content: '\e001';
}

&[data-frame="2"]:after {
content: '\e002';
}

&[data-frame="3"]:after {
content: '\e003';
}

&[data-frame="4"]:after {
content: '\e004';
}

&[data-frame="5"]:after {
content: '\e005';
}

&[data-frame="6"]:after {
content: '\e006';
}

&[data-frame="7"]:after {
content: '\e007';
}

&[data-frame="8"]:after {
content: '\e008';
}
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgd2lkdGg9IjU0cHgiIGhlaWdodD0iNTRweCIgdmlld0JveD0iNSA1IDU0IDU0IiBpZD0ibG9hZGVyIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNS4wMDAwMDAsIDUuMDAwMDAwKSIgZmlsbD0iIzE1ODllZSI+PGcgaWQ9InNwaW5uZXItbWVkaXVtIj48ZyBpZD0iT3ZhbC0zNSI+PGNpcmNsZSBpZD0iVG9wIiBjeD0iMjciIGN5PSI2IiByPSI1Ij48L2NpcmNsZT48Y2lyY2xlIGlkPSJUb3BSaWdodCIgY3g9IjQ4IiBjeT0iMTciIHI9IjUiPjwvY2lyY2xlPjxjaXJjbGUgaWQ9IkJvdHRvbVJpZ2h0IiBjeD0iNDgiIGN5PSIzNiIgcj0iNSI+PC9jaXJjbGU+PGNpcmNsZSBpZD0iQm90dG9tIiBjeD0iMjciIGN5PSI0OCIgcj0iNSI+PC9jaXJjbGU+PGNpcmNsZSBpZD0iQm90dG9tTGVmdCIgY3g9IjYiIGN5PSIzNiIgcj0iNSI+PC9jaXJjbGU+PGNpcmNsZSBpZD0iVG9wTGVmdCIgY3g9IjYiIGN5PSIxNyIgcj0iNSI+PC9jaXJjbGU+PC9nPjwvZz48L2c+PGFuaW1hdGVNb3Rpb24geGxpbms6aHJlZj0iI1RvcCIgcGF0aD0iTSAwIDAgViAtNSBaIiBkdXI9Ii4yNXMiIGJlZ2luPSIwczsgVG9wTGVmdEFuaW0uZW5kIiBpZD0iVG9wQW5pbSIgLz48YW5pbWF0ZU1vdGlvbiB4bGluazpocmVmPSIjVG9wUmlnaHQiIHBhdGg9Ik0gMCAwIEwgNSAtNSBaIiBkdXI9Ii4yNXMiIGJlZ2luPSJUb3BBbmltLmVuZCIgaWQ9IlRvcFJpZ2h0QW5pbSIgLz48YW5pbWF0ZU1vdGlvbiB4bGluazpocmVmPSIjQm90dG9tUmlnaHQiIHBhdGg9Ik0gMCAwIEwgNSA1IFoiIGR1cj0iLjI1cyIgYmVnaW49IlRvcFJpZ2h0QW5pbS5lbmQiIGlkPSJCb3R0b21SaWdodEFuaW0iIC8+PGFuaW1hdGVNb3Rpb24geGxpbms6aHJlZj0iI0JvdHRvbSIgcGF0aD0iTSAwIDAgViA1IFoiIGR1cj0iLjI1cyIgYmVnaW49IkJvdHRvbVJpZ2h0QW5pbS5lbmQiIGlkPSJCb3R0b21BbmltIiAvPjxhbmltYXRlTW90aW9uIHhsaW5rOmhyZWY9IiNCb3R0b21MZWZ0IiBwYXRoPSJNIDAgMCBMIC01IDUgWiIgZHVyPSIuMjVzIiBiZWdpbj0iQm90dG9tQW5pbS5lbmQiIGlkPSJCb3R0b21MZWZ0QW5pbSIgLz48YW5pbWF0ZU1vdGlvbiB4bGluazpocmVmPSIjVG9wTGVmdCIgcGF0aD0iTSAwIDAgTCAtNSAtNSBaIiBkdXI9Ii4yNXMiIGJlZ2luPSJCb3R0b21MZWZ0QW5pbS5lbmQiIGlkPSJUb3BMZWZ0QW5pbSIgLz48L3N2Zz4=");
}

}
65 changes: 0 additions & 65 deletions test/loader-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,71 +20,6 @@ define(function(require){
ok($loader.loader() === $loader, 'loader is initialized');
});

asyncTest('should play on init', function(){
var $loader = $(html);

$loader.loader();
setTimeout(function(){
start();
ok($loader.attr('data-frame')!==1, 'loader playing on init');
}, 160);
});

asyncTest('pause should function as expected', function(){
var $loader = $(html);

$loader.loader();
$loader.loader('pause');
setTimeout(function(){
start();
equal($loader.attr('data-frame'), 1, 'pause halts frame progression');
}, 160);
});

asyncTest('play should function as expected', function(){
var $loader = $(html);

$loader.loader();
$loader.loader('pause');
$loader.loader('play');
setTimeout(function(){
start();
ok($loader.attr('data-frame')!==1, 'play continues frame progression');
}, 160);
});

asyncTest('reset should function as expected', function(){
var $loader = $(html);

$loader.loader();
setTimeout(function(){
start();
$loader.loader('reset');
equal($loader.attr('data-frame'), 1, 'reset reverts frame to beginning');
}, 160);
});

test('next should function as expected', function(){
var $loader = $(html);

$loader.loader();
$loader.loader('pause');
$loader.loader('next');

equal($loader.attr('data-frame'), 2, 'next increments frame by 1');
});

test('prev should function as expected', function(){
var $loader = $(html);

$loader.loader();
$loader.loader('pause');
$loader.loader('next');
$loader.loader('previous');

equal($loader.attr('data-frame'), 1, 'prev decrements frame by 1');
});

test("should destroy control", function () {
var $el = $(html);

Expand Down