diff --git a/index.html b/index.html index eb0029f05..5f5db1a07 100644 --- a/index.html +++ b/index.html @@ -598,15 +598,8 @@

Infinite Scroll

Loader

-
-
-
- - - -
diff --git a/index.js b/index.js index 155a24813..19b6bacbc 100644 --- a/index.js +++ b/index.js @@ -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'); diff --git a/js/loader.js b/js/loader.js index fd55eb0cb..0d1442ca2 100644 --- a/js/loader.js +++ b/js/loader.js @@ -34,22 +34,6 @@ 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 = { @@ -57,8 +41,6 @@ constructor: Loader, destroy: function () { - this.pause(); - this.$element.remove(); // any external bindings // [none] @@ -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 diff --git a/less/loader.less b/less/loader.less index f782fe31a..039211f24 100644 --- a/less/loader.less +++ b/less/loader.less @@ -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="); } } diff --git a/test/loader-test.js b/test/loader-test.js index a9b33e462..6ead39c8a 100644 --- a/test/loader-test.js +++ b/test/loader-test.js @@ -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);