From 5dc21690da71731a9e768dee71ba6535ed3968c2 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Fri, 28 Oct 2016 18:13:42 +0300
Subject: [PATCH] started work on actual progress bars...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/css/layout.less        |   3 +-
 ui (gen4)/features/ui-widgets.js | 139 +++++++++++++++++++++++++++++++
 ui (gen4)/ui.js                  |  12 ++-
 3 files changed, 152 insertions(+), 2 deletions(-)

diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less
index 54eb676d..c85e6f1a 100755
--- a/ui (gen4)/css/layout.less	
+++ b/ui (gen4)/css/layout.less	
@@ -1691,7 +1691,8 @@ progress:not(value)::-webkit-progress-bar {
 }
 .progress-bar progress {
 	display: block;
-	width: 300px;
+	width: 100%;
+	min-width: 300px;
 }
 
 
diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js
index 4c2352b1..ba407781 100755
--- a/ui (gen4)/features/ui-widgets.js	
+++ b/ui (gen4)/features/ui-widgets.js	
@@ -1110,6 +1110,145 @@ var WidgetTestActions = actions.Actions({
 			})
 		})],
 
+
+	// Progress bar widget...
+	//
+	// 	Create progress bar...
+	// 	.testProgress('text')
+	//
+	// 	Update progress bar (value, max, msg)...
+	// 	.testProgress('text', 0, 10)
+	// 	.testProgress('text', 10, 50, 'message')
+	//
+	// 	Update progress bar value (has no effect if max is not set)...
+	// 	.testProgress('text', 10)
+	//
+	// 	Close progress bar...
+	// 	.testProgress('text', 'close')
+	//
+	// 	Relative progress modification...
+	// 	.testProgress('text', '+1')
+	// 	.testProgress('text', '+0', '+1')
+	//
+	//
+	// XXX should we report errors and stoppages??? (error state??)
+	// XXX multiple containers...
+	// XXX shorten the nested class names...
+	// XXX revise styles...
+	showProgress: ['Interface/- Show progress bar...',
+		function(text, value, max, msg){
+			var viewer = this.ribbons.viewer
+
+			// container...
+			var container = viewer.find('.progress-container')
+			container = container.length == 0 ?
+				$('<div/>')
+					.addClass('progress-container')
+					.appendTo(viewer)
+				: container
+
+			// widget...
+			var widget = container.find('.progress-bar[name="'+text+'"]')
+			// close action...
+			if(value == 'close'){
+				widget.trigger('progressClose')
+				return
+			}
+			widget = widget.length == 0 ?
+				$('<div/>')
+					.addClass('progress-bar')
+					.attr('name', text)
+					.text(text)
+					// close button...
+					.append($('<span class="close">&times;</span>')
+						.on('click', function(){ widget.trigger('progressClose') }))
+					// state...
+					.append($('<span/>')
+						.addClass('progress-details'))
+					// bar...
+					.append($('<progress/>'))
+					// events...
+					.on('progressClose', function(){ 
+						widget
+							.fadeOut(200, function(){
+								$(this).remove() 
+							})
+					})
+					.appendTo(container)
+				: widget
+
+			// reset closing timeout...
+			var timeout = widget.attr('close-timeout')
+			timeout && clearTimeout(JSON.parse(timeout))
+
+
+			var bar = widget.find('progress')
+			var state = widget.find('.progress-details')
+
+			// XXX stub???
+			max = max ? 
+					(typeof(max) == typeof('str') && /[+-][0-9]+/.test(max) ? 
+						parseInt(bar.attr('max') || 0) + parseInt(max)
+					: parseInt(max))
+				: bar.attr('max')
+
+			value = value ? 
+					(typeof(value) == typeof('str') && /[+-][0-9]+/.test(value) ? 
+						parseInt(bar.attr('value') || 0) + parseInt(value)
+					: parseInt(value))
+				: bar.attr('value')
+			// ignore value if not max is present + handle overflow...
+			value = max ? Math.min(value, max) : null
+
+			msg = msg ? ': '+msg : ''
+			msg = ' '+ msg 
+				+ (value && value >= max ? ' ('+max+' done)' 
+					: value && max && value != max ? ' ('+ value +' of '+ max +')'
+					: ' (ready)')
+
+			// update widget...
+			bar.attr({
+				value: value || '',
+				max: max || '',
+			})
+			state.text(msg)
+
+			// auto-close...
+			// XXX make this optional... 
+			if(value && value >= max){
+				widget.attr('close-timeout', 
+					JSON.stringify(setTimeout(function(){ 
+						widget.trigger('progressClose') 
+					}, 1000)))
+			}
+		}],
+
+	testProgress: ['Test/Demo progress bar...',
+		function(text){
+			var done = 0
+			var max = 10
+			var text = text || 'Progress bar demo'
+			var that = this
+
+			this.showProgress(text)
+
+			var step = function(){
+				that.showProgress(text, done++, max)
+
+				max = done < 8 ? max + 5 
+					: max <= 50 && done < 30 ? max + 2 
+					: done > 30 ? max - 3
+					: max
+
+				// NOTE: we add 10 here to compensate for changing max value...
+				done < max+10
+					&& setTimeout(step, 200) 
+			}
+
+			setTimeout(step, 1000)
+		}], 
+
+
 	// XXX make this a toggler....
 	partitionByMonth: ['Test/',
 		function(){
diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js
index 80852e8d..caf134e8 100755
--- a/ui (gen4)/ui.js	
+++ b/ui (gen4)/ui.js	
@@ -143,7 +143,17 @@ $(function(){
 		ig.features.features.length, 
 		ig.features.features)
 
-	ig.logger = ig.logger || {emit: function(e, v){ console.log('    ', e, v) }}
+	ig.logger = ig.logger || {emit: function(e, v){ 
+		console.log('    ', e, v) 
+		
+		// XXX HACK...
+		if(e == 'queued'){
+			ig.showProgress('Progress', '+0', '+1')
+
+		} else if(e == 'loaded' || e == 'done'){
+			ig.showProgress('Progress', '+1')
+		}
+	}}
 
 
 	// setup the viewer...