From cf92775489840f1dc7b2c65fae6b968beadbad7e Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Wed, 5 Jun 2013 16:27:42 +0200 Subject: [PATCH] Throwing away skelton module; rng module uses layout instead This introduces indicator and mainBar modules that takes over non-layout responsibilities from skelton module --- editor.css | 30 ------------------- modules.js | 4 ++- modules.less | 3 ++ modules/data.js | 6 ++++ modules/indicator/indicator.js | 32 ++++++++++++++++++++ modules/indicator/indicator.less | 9 ++++++ modules/indicator/template.html | 3 ++ modules/mainBar/mainBar.js | 26 +++++++++++++++++ modules/mainBar/mainBar.less | 13 +++++++++ modules/mainBar/template.html | 6 ++++ modules/rng.js | 50 ++++++++++++++++++++------------ modules/rng/mainLayout.html | 8 +++++ modules/rng/mainLayout.less | 14 +++++++++ modules/rng/rng.less | 1 + modules/skelton.js | 35 ---------------------- rng.js | 2 +- 16 files changed, 156 insertions(+), 86 deletions(-) create mode 100644 modules/indicator/indicator.js create mode 100644 modules/indicator/indicator.less create mode 100644 modules/indicator/template.html create mode 100644 modules/mainBar/mainBar.js create mode 100644 modules/mainBar/mainBar.less create mode 100644 modules/mainBar/template.html create mode 100644 modules/rng/mainLayout.html create mode 100644 modules/rng/mainLayout.less create mode 100644 modules/rng/rng.less delete mode 100644 modules/skelton.js diff --git a/editor.css b/editor.css index 5c7f403..5944312 100644 --- a/editor.css +++ b/editor.css @@ -11,36 +11,6 @@ body { display: none; } -#rng-skelton { - position: relative; -} - -#rng-skelton-menu { - float: right; -} - -#rng-skelton-menu li { - display: inline; -} - -#rng-skelton-messages { - position: absolute; - top: -22px; - width:100%; - text-align:center; -} - -#rng-skelton-messages span { - font-weight: bold; - background: #f9edbe; - padding: 2px 5px; - border: solid 1px #f6e39c; -} - -#rng-skelton-menu ul { - list-style-type: none; -} - .rng-visualEditor-nodeHoverTag { position:absolute; height:20px; diff --git a/modules.js b/modules.js index 4c24259..fb30410 100644 --- a/modules.js +++ b/modules.js @@ -6,7 +6,9 @@ define(function(require) { return { data: require('modules/data'), rng: require('modules/rng'), - skelton: require('modules/skelton'), + mainBar: require('modules/mainBar/mainBar'), + indicator: require('modules/indicator/indicator'), + sourceEditor: require('modules/sourceEditor'), visualEditor: require('modules/visualEditor'), diff --git a/modules.less b/modules.less index 6982ce8..251c077 100644 --- a/modules.less +++ b/modules.less @@ -1,3 +1,6 @@ +@import 'modules/rng/rng.less'; @import 'modules/rng2/layout.less'; +@import 'modules/mainBar/mainBar.less'; +@import 'modules/indicator/indicator.less'; @import 'modules/nodePane/nodePane.less'; @import 'modules/metadataEditor/metadataEditor.less'; \ No newline at end of file diff --git a/modules/data.js b/modules/data.js index 527b928..0fab1a7 100644 --- a/modules/data.js +++ b/modules/data.js @@ -60,6 +60,12 @@ return function(sandbox) { success: function() {sandbox.publish('savingEnded', 'success');}, error: function() {sandbox.publish('savingEnded', 'error');} }); + }, + fakeSave: function() { + sandbox.publish('savingStarted'); + window.setTimeout(function() { + sandbox.publish('savingEnded', 'success') + }, 2000); } } diff --git a/modules/indicator/indicator.js b/modules/indicator/indicator.js new file mode 100644 index 0000000..0e9bcdc --- /dev/null +++ b/modules/indicator/indicator.js @@ -0,0 +1,32 @@ +define([ +'libs/jquery-1.9.1.min', +'libs/underscore-min', +'libs/text!./template.html' +], function($, _, template) { + +'use strict'; + +return function(sandbox) { + + var view = { + dom: $(_.template(template)()), + setup: function() { + + } + } + + return { + start: function() { sandbox.publish('ready'); }, + getView: function() { return view.dom; }, + showMessage: function(msg) { + view.dom.html('' + msg + '').show(); + }, + clearMessage: function() { + view.dom.empty(); + } + + } + +} + +}); diff --git a/modules/indicator/indicator.less b/modules/indicator/indicator.less new file mode 100644 index 0000000..128e775 --- /dev/null +++ b/modules/indicator/indicator.less @@ -0,0 +1,9 @@ +.rng-module-indicator { + span { + font-weight: bold; + background: #f9edbe; + padding: 2px 5px; + border: solid 1px #f6e39c; + font-size:12px; + } +} \ No newline at end of file diff --git a/modules/indicator/template.html b/modules/indicator/template.html new file mode 100644 index 0000000..48933d9 --- /dev/null +++ b/modules/indicator/template.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/modules/mainBar/mainBar.js b/modules/mainBar/mainBar.js new file mode 100644 index 0000000..75fd599 --- /dev/null +++ b/modules/mainBar/mainBar.js @@ -0,0 +1,26 @@ +define([ +'libs/jquery-1.9.1.min', +'libs/underscore-min', +'libs/text!./template.html'], function($, _, template) { + +'use strict'; + +return function(sandbox) { + + var view = $(_.template(template)()); + view.find('button').click(function(e) { + e.preventDefault(); + sandbox.publish('cmd.' + $(e.target).attr('data-cmd')); + }) + + return { + start: function() { sandbox.publish('ready'); }, + getView: function() {return view;}, + setCommandEnabled: function(cmd, enabled) { + view.find('[data-cmd='+cmd+']').toggleClass('disabled', !enabled); + } + } + +}; + +}); \ No newline at end of file diff --git a/modules/mainBar/mainBar.less b/modules/mainBar/mainBar.less new file mode 100644 index 0000000..12bdd35 --- /dev/null +++ b/modules/mainBar/mainBar.less @@ -0,0 +1,13 @@ +/*#rng-skelton-menu { + float: right; +}*/ + +.rng-module-mainBar { + li { + display: inline; + } + + ul { + list-style-type: none; + } +} \ No newline at end of file diff --git a/modules/mainBar/template.html b/modules/mainBar/template.html new file mode 100644 index 0000000..0696053 --- /dev/null +++ b/modules/mainBar/template.html @@ -0,0 +1,6 @@ +
+ +
\ No newline at end of file diff --git a/modules/rng.js b/modules/rng.js index 623d4ff..f87aa17 100644 --- a/modules/rng.js +++ b/modules/rng.js @@ -1,9 +1,15 @@ -define(['views/tabs/tabs'], function(tabs) { +define([ +'fnpjs/layout', +'views/tabs/tabs', +'libs/text!./rng/mainLayout.html' +], function(layout, tabs, mainLayoutTemplate) { return function(sandbox) { 'use strict'; var mainTabs = (new tabs.View()).render(); + var mainLayout = new layout.Layout(mainLayoutTemplate); + sandbox.getDOM().append(mainLayout.getAsView()); function addTab(title, slug, view) { mainTabs.addTab(title, slug, view); @@ -12,19 +18,6 @@ return function(sandbox) { /* Events handling */ var eventHandlers = {}; - - eventHandlers.skelton = { - ready: function() { - sandbox.getModule('skelton').setMainView(mainTabs.getAsView()); - - _.each(['visualEditor', 'sourceEditor', 'rng2'], function(moduleName) { - sandbox.getModule(moduleName).start(); - }); - }, - 'cmd.save': function() { - //todo - } - }; eventHandlers.sourceEditor = { ready: function() { @@ -43,19 +36,23 @@ return function(sandbox) { eventHandlers.data = { ready: function() { - sandbox.getModule('skelton').start(); + mainLayout.setView('mainView', mainTabs.getAsView()); + + _.each(['visualEditor', 'sourceEditor', 'rng2', 'mainBar', 'indicator'], function(moduleName) { + sandbox.getModule(moduleName).start(); + }); }, documentChanged: function(document, reason) { var slug = (reason === 'visual_edit' ? 'source' : 'visual'); sandbox.getModule(slug+'Editor').setDocument(document); }, savingStarted: function() { - sandbox.getModule('skelton').deactivateCommand('save'); - sandbox.getModule('skelton').showMessage(gettext('Saving...')); + sandbox.getModule('mainBar').setCommandEnabled('save', false); + sandbox.getModule('indicator').showMessage(gettext('Saving...')); }, savingEnded: function(status) { - sandbox.getModule('skelton').activateCommand('save'); - sandbox.getModule('skelton').clearMessage(); + sandbox.getModule('mainBar').setCommandEnabled('save', true); + sandbox.getModule('indicator').clearMessage(); } } @@ -66,6 +63,21 @@ return function(sandbox) { } } + eventHandlers.mainBar = { + ready: function() { + mainLayout.setView('topPanel', sandbox.getModule('mainBar').getView()); + }, + 'cmd.save': function() { + sandbox.getModule('data').fakeSave(); + } + } + + eventHandlers.indicator = { + ready: function() { + mainLayout.setView('messages', sandbox.getModule('indicator').getView()); + } + } + /* api */ return { diff --git a/modules/rng/mainLayout.html b/modules/rng/mainLayout.html new file mode 100644 index 0000000..160fa13 --- /dev/null +++ b/modules/rng/mainLayout.html @@ -0,0 +1,8 @@ +
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/modules/rng/mainLayout.less b/modules/rng/mainLayout.less new file mode 100644 index 0000000..08db00d --- /dev/null +++ b/modules/rng/mainLayout.less @@ -0,0 +1,14 @@ +#rng-module-rng-mainLayout { + position: relative; + + [fnpjs-place="messages"] { + position: absolute; + top: 5px; + width:100%; + text-align:center; + } + + [fnpjs-place="topPanel"] { + float: right; + } +} \ No newline at end of file diff --git a/modules/rng/rng.less b/modules/rng/rng.less new file mode 100644 index 0000000..6641668 --- /dev/null +++ b/modules/rng/rng.less @@ -0,0 +1 @@ +@import 'mainLayout.less'; \ No newline at end of file diff --git a/modules/skelton.js b/modules/skelton.js deleted file mode 100644 index 28780f2..0000000 --- a/modules/skelton.js +++ /dev/null @@ -1,35 +0,0 @@ -define(function() { - -return function(sandbox) { - - var view = $(sandbox.getTemplate('main')()); - - view.find('#rng-skelton-menu button').click(function(e) { - e.preventDefault(); - sandbox.publish('cmd.' + $(e.target).attr('data-cmd')); - }); - - return { - start: function() { - sandbox.getDOM().append(view); - sandbox.publish('ready'); - }, - setMainView: function(mainView) { - view.find('#rng-skelton-mainView').html(mainView); - }, - showMessage: function(message) { - view.find('#rng-skelton-messages').html(''+message+'').show(); - }, - clearMessage: function() { - view.find('#rng-skelton-messages').empty().hide(); - }, - deactivateCommand: function(cmd) { - view.find('[data-cmd='+cmd+']').addClass('disabled'); - }, - activateCommand: function(cmd) { - view.find('[data-cmd='+cmd+']').removeClass('disabled'); - } - } -}; - -}); \ No newline at end of file diff --git a/rng.js b/rng.js index 57d5818..3336dde 100644 --- a/rng.js +++ b/rng.js @@ -3,7 +3,7 @@ define({ initModules: ['rng'], permissions: { 'skelton': ['getDOM'], - 'rng': ['getModule', 'handleEvents'], + 'rng': ['getModule', 'handleEvents', 'getDOM'], 'rng2': ['getModule', 'handleEvents'] } }); \ No newline at end of file -- 2.20.1