From 32b47211c6c0bc7b0772658d354574b11bb7a7ec Mon Sep 17 00:00:00 2001 From: Joona Yoon Date: Thu, 29 Nov 2018 03:44:55 +0900 Subject: [PATCH 1/5] progress loops infinity like loader --- src/definitions/modules/progress.js | 60 ++++++++++++++++++++++++--- src/definitions/modules/progress.less | 1 + 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/src/definitions/modules/progress.js b/src/definitions/modules/progress.js index 544e8c77e..46482f310 100644 --- a/src/definitions/modules/progress.js +++ b/src/definitions/modules/progress.js @@ -96,6 +96,7 @@ $.fn.progress = function(parameters) { destroy: function() { module.verbose('Destroying previous progress for', $module); clearInterval(instance.interval); + clearInterval(instance.intervalInfinite); module.remove.state(); $module.removeData(moduleNamespace); instance = undefined; @@ -117,9 +118,10 @@ $.fn.progress = function(parameters) { metadata: function() { var data = { - percent : $module.data(metadata.percent), - total : $module.data(metadata.total), - value : $module.data(metadata.value) + percent : $module.data(metadata.percent), + total : $module.data(metadata.total), + value : $module.data(metadata.value), + infinite : $module.data(metadata.infinite), } ; if(data.percent) { @@ -135,6 +137,10 @@ $.fn.progress = function(parameters) { module.set.value(data.value); module.set.progress(data.value); } + if(data.infinite) { + module.debug('Infinite loop set from metadata', data.infinite); + module.set.infinite(data.infinite); + } }, settings: function() { if(settings.total !== false) { @@ -150,6 +156,10 @@ $.fn.progress = function(parameters) { module.debug('Current percent set in settings', settings.percent); module.set.percent(settings.percent); } + if(settings.infinite !== false) { + module.debug('Infinite loop set in settings', settings.infinite); + module.set.infinite(settings.infinite); + } } }, @@ -328,6 +338,9 @@ $.fn.progress = function(parameters) { }, total: function() { return module.total || false; + }, + offset: function() { + return module.offset || 0; } }, @@ -427,6 +440,22 @@ $.fn.progress = function(parameters) { }) ; }, + offset: function(offset) { + offset = offset || settings.offset; + $bar + .css({ + 'margin-left': offset + '%' + }) + ; + module.offset = offset; + }, + offsetInfinite: function(offset) { + offset = offset || settings.offset; + if(offset - module.get.percent() > 100){ + offset = -(module.get.percent()); + } + module.set.offset(offset); + }, percent: function(percent) { percent = (typeof percent == 'string') ? +(percent.replace('%', '')) @@ -457,6 +486,21 @@ $.fn.progress = function(parameters) { module.set.labels(); settings.onChange.call(element, percent, module.value, module.total); }, + infinite: function(infinite) { + clearInterval(module.intervalInfinite); + if(infinite) { + module.intervalInfinite = setInterval(function() { + var + isInDOM = $.contains(document.documentElement, element) + ; + if(!isInDOM) { + clearInterval(module.intervalInfinite); + animating = false; + }; + module.set.offsetInfinite(module.get.offset() + (settings.framerate / 30)); + }, settings.framerate); + } + }, labelInterval: function() { var animationCallback = function() { @@ -874,6 +918,9 @@ $.fn.progress.settings = { total : false, value : false, + infinite : false, + offset : 0, + // delay in ms for fail safe animation callback failSafeDelay : 100, @@ -898,9 +945,10 @@ $.fn.progress.settings = { }, metadata: { - percent : 'percent', - total : 'total', - value : 'value' + percent : 'percent', + total : 'total', + value : 'value', + infinite : 'infinite' }, selector : { diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less index ff8323f47..f9256a097 100755 --- a/src/definitions/modules/progress.less +++ b/src/definitions/modules/progress.less @@ -26,6 +26,7 @@ position: relative; display: block; max-width: 100%; + overflow-x: hidden; border: @border; margin: @margin; box-shadow: @boxShadow; From d09ce0310640386bf12651b6319d2b8d94728cd5 Mon Sep 17 00:00:00 2001 From: Joona Yoon Date: Thu, 29 Nov 2018 04:01:39 +0900 Subject: [PATCH 2/5] Fix setting offset when initialized --- src/definitions/modules/progress.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/definitions/modules/progress.js b/src/definitions/modules/progress.js index 46482f310..3ab121a50 100644 --- a/src/definitions/modules/progress.js +++ b/src/definitions/modules/progress.js @@ -137,10 +137,8 @@ $.fn.progress = function(parameters) { module.set.value(data.value); module.set.progress(data.value); } - if(data.infinite) { - module.debug('Infinite loop set from metadata', data.infinite); - module.set.infinite(data.infinite); - } + module.debug('Infinite loop set from metadata', data.infinite); + module.set.infinite(data.infinite); }, settings: function() { if(settings.total !== false) { @@ -156,10 +154,8 @@ $.fn.progress = function(parameters) { module.debug('Current percent set in settings', settings.percent); module.set.percent(settings.percent); } - if(settings.infinite !== false) { - module.debug('Infinite loop set in settings', settings.infinite); - module.set.infinite(settings.infinite); - } + module.debug('Infinite loop set in settings', settings.infinite); + module.set.infinite(settings.infinite); } }, @@ -487,6 +483,7 @@ $.fn.progress = function(parameters) { settings.onChange.call(element, percent, module.value, module.total); }, infinite: function(infinite) { + module.set.offset(settings.offset || 0); clearInterval(module.intervalInfinite); if(infinite) { module.intervalInfinite = setInterval(function() { From 05689ac4bff72349e4f58dfdb993ff3d1e00eb2a Mon Sep 17 00:00:00 2001 From: Joona Yoon Date: Thu, 29 Nov 2018 18:54:06 +0900 Subject: [PATCH 3/5] Rename infinite to loading --- src/definitions/modules/progress.js | 42 ++++++++++++++--------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/definitions/modules/progress.js b/src/definitions/modules/progress.js index 3ab121a50..0da315dd6 100644 --- a/src/definitions/modules/progress.js +++ b/src/definitions/modules/progress.js @@ -96,7 +96,7 @@ $.fn.progress = function(parameters) { destroy: function() { module.verbose('Destroying previous progress for', $module); clearInterval(instance.interval); - clearInterval(instance.intervalInfinite); + clearInterval(instance.intervalLoading); module.remove.state(); $module.removeData(moduleNamespace); instance = undefined; @@ -118,10 +118,10 @@ $.fn.progress = function(parameters) { metadata: function() { var data = { - percent : $module.data(metadata.percent), - total : $module.data(metadata.total), - value : $module.data(metadata.value), - infinite : $module.data(metadata.infinite), + percent : $module.data(metadata.percent), + total : $module.data(metadata.total), + value : $module.data(metadata.value), + loading : $module.data(metadata.loading), } ; if(data.percent) { @@ -137,8 +137,8 @@ $.fn.progress = function(parameters) { module.set.value(data.value); module.set.progress(data.value); } - module.debug('Infinite loop set from metadata', data.infinite); - module.set.infinite(data.infinite); + module.debug('Loading loop set from metadata', data.loading); + module.set.loading(data.loading); }, settings: function() { if(settings.total !== false) { @@ -154,8 +154,8 @@ $.fn.progress = function(parameters) { module.debug('Current percent set in settings', settings.percent); module.set.percent(settings.percent); } - module.debug('Infinite loop set in settings', settings.infinite); - module.set.infinite(settings.infinite); + module.debug('Loading loop set in settings', settings.loading); + module.set.loading(settings.loading); } }, @@ -445,7 +445,7 @@ $.fn.progress = function(parameters) { ; module.offset = offset; }, - offsetInfinite: function(offset) { + offsetLoading: function(offset) { offset = offset || settings.offset; if(offset - module.get.percent() > 100){ offset = -(module.get.percent()); @@ -482,19 +482,19 @@ $.fn.progress = function(parameters) { module.set.labels(); settings.onChange.call(element, percent, module.value, module.total); }, - infinite: function(infinite) { + loading: function(loading) { module.set.offset(settings.offset || 0); - clearInterval(module.intervalInfinite); - if(infinite) { - module.intervalInfinite = setInterval(function() { + clearInterval(module.intervalLoading); + if(loading) { + module.intervalLoading = setInterval(function() { var isInDOM = $.contains(document.documentElement, element) ; if(!isInDOM) { - clearInterval(module.intervalInfinite); + clearInterval(module.intervalLoading); animating = false; }; - module.set.offsetInfinite(module.get.offset() + (settings.framerate / 30)); + module.set.offsetLoading(module.get.offset() + (settings.framerate / 30)); }, settings.framerate); } }, @@ -915,7 +915,7 @@ $.fn.progress.settings = { total : false, value : false, - infinite : false, + loading : false, offset : 0, // delay in ms for fail safe animation callback @@ -942,10 +942,10 @@ $.fn.progress.settings = { }, metadata: { - percent : 'percent', - total : 'total', - value : 'value', - infinite : 'infinite' + percent : 'percent', + total : 'total', + value : 'value', + loading : 'loading' }, selector : { From 4cbe761686b6bd10a552be961cb4a629d6cc63fb Mon Sep 17 00:00:00 2001 From: Joona Yoon Date: Thu, 29 Nov 2018 19:09:26 +0900 Subject: [PATCH 4/5] Adding loding state --- src/definitions/modules/progress.js | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/src/definitions/modules/progress.js b/src/definitions/modules/progress.js index 0da315dd6..ac4d37a00 100644 --- a/src/definitions/modules/progress.js +++ b/src/definitions/modules/progress.js @@ -365,6 +365,9 @@ $.fn.progress = function(parameters) { active: function() { return $module.hasClass(className.active); }, + loading: function() { + return $module.hasClass(className.loading); + }, visible: function() { return $module.is(':visible'); } @@ -403,7 +406,11 @@ $.fn.progress = function(parameters) { error: function() { module.verbose('Removing error state'); $module.removeClass(className.error); - } + }, + loading: function() { + module.verbose('Removing loading state'); + $module.removeClass(className.loading); + }, }, set: { @@ -483,9 +490,20 @@ $.fn.progress = function(parameters) { settings.onChange.call(element, percent, module.value, module.total); }, loading: function(loading) { + module.debug('Setting loading state'); + if(settings.showActivity && !module.is.loading() ) { + $module.addClass(className.loading); + } + module.remove.warning(); + module.remove.error(); + module.remove.success(); + module.remove.active(); + module.set.loadingInterval(); + }, + loadingInterval: function() { module.set.offset(settings.offset || 0); clearInterval(module.intervalLoading); - if(loading) { + if(module.is.loading() || settings.loading) { module.intervalLoading = setInterval(function() { var isInDOM = $.contains(document.documentElement, element) @@ -581,6 +599,7 @@ $.fn.progress = function(parameters) { module.remove.warning(); module.remove.error(); module.remove.success(); + module.remove.loading(); text = settings.onLabelUpdate('active', text, module.value, module.total); if(text) { module.set.label(text); @@ -596,6 +615,7 @@ $.fn.progress = function(parameters) { module.remove.active(); module.remove.warning(); module.remove.error(); + module.remove.loading(); module.complete(); if(settings.text.success) { text = settings.onLabelUpdate('success', text, module.value, module.total); @@ -616,6 +636,7 @@ $.fn.progress = function(parameters) { module.remove.active(); module.remove.success(); module.remove.error(); + module.remove.loading(); module.complete(); text = settings.onLabelUpdate('warning', text, module.value, module.total); if(text) { @@ -632,6 +653,7 @@ $.fn.progress = function(parameters) { module.remove.active(); module.remove.success(); module.remove.warning(); + module.remove.loading(); module.complete(); text = settings.onLabelUpdate('error', text, module.value, module.total); if(text) { @@ -967,7 +989,8 @@ $.fn.progress.settings = { active : 'active', error : 'error', success : 'success', - warning : 'warning' + warning : 'warning', + loading : 'loading' } }; From 5ab6305f403d795da84659d65310e0648cd61c2b Mon Sep 17 00:00:00 2001 From: Joona Yoon Date: Thu, 29 Nov 2018 19:16:33 +0900 Subject: [PATCH 5/5] Fix reading setting and metadata --- src/definitions/modules/progress.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/definitions/modules/progress.js b/src/definitions/modules/progress.js index ac4d37a00..72b636114 100644 --- a/src/definitions/modules/progress.js +++ b/src/definitions/modules/progress.js @@ -137,8 +137,10 @@ $.fn.progress = function(parameters) { module.set.value(data.value); module.set.progress(data.value); } - module.debug('Loading loop set from metadata', data.loading); - module.set.loading(data.loading); + if(data.loading) { + module.debug('Loading loop set from metadata', data.loading); + module.set.loading(data.loading); + } }, settings: function() { if(settings.total !== false) { @@ -154,8 +156,10 @@ $.fn.progress = function(parameters) { module.debug('Current percent set in settings', settings.percent); module.set.percent(settings.percent); } - module.debug('Loading loop set in settings', settings.loading); - module.set.loading(settings.loading); + if(settings.loading !== false) { + module.debug('Loading loop set in settings', settings.loading); + module.set.loading(settings.loading); + } } },