From 82ae24741e6d9c119c876ff7567954d6b4e8e009 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sun, 21 Jun 2015 16:12:20 +0300 Subject: [PATCH] refactored options (not yet final), cleaned up flat lists and lots of tweaking and fixing... Signed-off-by: Alex A. Naanou --- ui (gen4)/experiments/browse-dialog.css | 4 +- ui (gen4)/experiments/browse-dialog.html | 53 +++++++++++++-- ui (gen4)/experiments/browse-dialog.js | 85 ++++++++++++++++++++---- 3 files changed, 120 insertions(+), 22 deletions(-) diff --git a/ui (gen4)/experiments/browse-dialog.css b/ui (gen4)/experiments/browse-dialog.css index f5902129..b97ca739 100755 --- a/ui (gen4)/experiments/browse-dialog.css +++ b/ui (gen4)/experiments/browse-dialog.css @@ -47,7 +47,7 @@ .browse .path:empty { display: block; } -.browse .path:before { +.browse:not(.flat) .path:before { content: "/"; } .browse .path .dir { @@ -115,7 +115,7 @@ opacity: 0.7; } -.browse .list div:not(.not-traversable):after { +.browse:not(.flat) .list div:not(.not-traversable):after { content: "/"; } diff --git a/ui (gen4)/experiments/browse-dialog.html b/ui (gen4)/experiments/browse-dialog.html index b69a9e17..02e4b52d 100755 --- a/ui (gen4)/experiments/browse-dialog.html +++ b/ui (gen4)/experiments/browse-dialog.html @@ -57,6 +57,9 @@ overflow-x: hidden; } +.container.flat { + left: 500px; +} @@ -148,7 +151,8 @@ requirejs(['../lib/keyboard', '../object', './browse-dialog'], function(k, o, br keyboard = k object = o - b = browser.Browser($('.container').last(), { + b = browser.Browser($('.container.tree'), { + path: '/dir_a/tree/dir_c', list: function(path, make){ var cur = TREE path.forEach(function(p){ @@ -173,10 +177,43 @@ requirejs(['../lib/keyboard', '../object', './browse-dialog'], function(k, o, br return k }) }, + open: function(path){ + console.log('OPEN:', path) + }, }) .focus() + //b.path = '/dir_a/tree/dir_c' - b.path = '/dir_a/tree/dir_c' + + f = browser.Browser($('.container.flat'), { + data: [ + 'option 1', + 'option 2', + 'option 3', + 'option 4', + 'option 5', + 'option 6', + 'option 7', + ], + traversable: false, + flat: true, + + list: function(path, make){ + return this.options.data + .map(function(k){ + // make the element... + var e = make(k) + // disable dir_b... + if(use_disabled && k == 'option 4'){ + e.addClass('disabled') + } + return k + }) + }, + open: function(path){ + console.log('OPEN:', path) + }, + }) }) $(function(){ @@ -190,6 +227,8 @@ $(function(){ //browser.focus() }) + + var themeToggler = CSSClassToggler('body', [ 'none', @@ -199,13 +238,12 @@ var themeToggler = CSSClassToggler('body', function(state){ $('#theme').text(state) }) - function toggleDisabled(){ use_disabled = !use_disabled - use_disabled ? b.disableElements('_b') : b.enableElements('_b') + use_disabled ? b.disableElements('_b') : b.enableElements('_b') + use_disabled ? f.disableElements('4') : f.enableElements('4') } - function toggleFiles(){ show_files = !show_files @@ -285,7 +323,10 @@ Files: -
+
+
+ +
diff --git a/ui (gen4)/experiments/browse-dialog.js b/ui (gen4)/experiments/browse-dialog.js index fe023595..e1d5ac74 100755 --- a/ui (gen4)/experiments/browse-dialog.js +++ b/ui (gen4)/experiments/browse-dialog.js @@ -33,14 +33,21 @@ var BrowserClassPrototype = { $(this).focus() }) + if(options.flat){ + browser.addClass('flat') + } - if(options.path == null || options.show_path){ - browser - .append($('
') - .addClass('v-block path')) + // path... + var path = $('
') + .addClass('v-block path') + + if(options.show_path == false){ + path.hide() } browser + .append(path) + // list... .append($('
') .addClass('v-block list')) @@ -61,16 +68,31 @@ var BrowserPrototype = { // option defaults and doc... options: { + // Initial path... //path: null, - //show_path: null, - // enable/disable user selection filtering... + //show_path: true, + + // Enable/disable user selection filtering... // NOTE: this only affects .stopFilter(..) filter: true, - // handle keys that are not bound... + // If false will disable traversal... + // NOTE: if false this will also disable traversal up. + // NOTE: this will not disable manual updates or explicit path + // setting. + // NOTE: another way to disable traversal is to set + // .not-traversable on the .browse element + traversable: true, + + // Handle keys that are not bound... // NOTE: to disable, set ot undefined. logKeys: function(k){ window.DEBUG && console.log(k) }, + + // If set disables leading and trailing '/' on list and path + // elements. + // This is mainly used for flat list selectors. + flat: false, }, // XXX this should prevent event handler delegation... @@ -119,6 +141,32 @@ var BrowserPrototype = { }, }, + // XXX should these set both the options and dom??? + get flat(){ + return !this.dom.hasClass('flat') || this.options.flat + }, + set flat(value){ + if(value){ + this.dom.addClass('flat') + } else { + this.dom.removeClass('flat') + } + this.options.flat = value + }, + + // XXX should these set both the options and dom??? + get traversable(){ + return !this.dom.hasClass('not-traversable') && this.options.traversable + }, + set traversable(value){ + if(value){ + this.dom.removeClass('not-traversable') + } else { + this.dom.addClass('not-traversable') + } + this.options.traversable = value + }, + // base api... // NOTE: to avoid duplicating and syncing data, the actual path is // stored in DOM... @@ -137,6 +185,7 @@ var BrowserPrototype = { // update path... // - build the path // - build the element list + // - bind to control events // // XXX trigger an "update" event... // XXX do we normalize path here??? @@ -170,9 +219,11 @@ var BrowserPrototype = { p.append($('
') .addClass('dir') .click(function(){ - that - .update(cur.slice(0, -1)) - .select('"'+cur.pop()+'"') + if(that.traversable){ + that + .update(cur.slice(0, -1)) + .select('"'+cur.pop()+'"') + } }) .text(e)) }) @@ -212,7 +263,7 @@ var BrowserPrototype = { .click(function(){ // handle clicks ONLY when not disabled... if(!$(this).hasClass('disabled')){ - that.update(that.path.concat([$(this).text()])) + that.push($(this).text()) } }) .text(p) @@ -648,7 +699,7 @@ var BrowserPrototype = { path.push(elem.text()) // if not traversable call the action... - if(elem.hasClass('not-traversable')){ + if(!this.traversable || elem.hasClass('not-traversable')){ return this.action(path) } @@ -661,6 +712,11 @@ var BrowserPrototype = { // Pop an element off the path / go up one level... pop: function(){ var browser = this.dom + + if(!this.traversable){ + return this + } + var path = this.path var dir = path.pop() @@ -701,7 +757,7 @@ var BrowserPrototype = { // ...need to actually open something... open: function(path){ path = path || this.path - var m = this.options.list + var m = this.options.open return m ? m.apply(this, arguments) : path }, // List the path... @@ -766,7 +822,8 @@ var BrowserPrototype = { } // load the initial state... - this.update(this.path) + // XXX check if this default is correct... + this.update(options.path || this.path) }, }