From 19cc6364ecdace030530370b80be7e89dcfa6d9e Mon Sep 17 00:00:00 2001 From: Darren Date: Fri, 14 Sep 2012 19:49:41 +0100 Subject: [PATCH] Applets + settings applet example --- client_backbone/dev/app.js | 1 + client_backbone/dev/applet_settings.js | 23 +++ client_backbone/dev/build.js | 3 + client_backbone/dev/model_applet.js | 44 ++++++ client_backbone/dev/model_application.js | 23 +-- client_backbone/dev/model_misc.js | 19 --- client_backbone/dev/model_panel.js | 6 +- client_backbone/dev/view.js | 18 ++- client_backbone/index.html | 18 ++- client_backbone/kiwi.js | 176 ++++++++++++++++++++--- client_backbone/kiwi.min.js | 2 +- client_backbone/style.css | 4 +- 12 files changed, 268 insertions(+), 69 deletions(-) create mode 100644 client_backbone/dev/applet_settings.js create mode 100644 client_backbone/dev/model_applet.js delete mode 100644 client_backbone/dev/model_misc.js diff --git a/client_backbone/dev/app.js b/client_backbone/dev/app.js index c55267e..329b3a0 100644 --- a/client_backbone/dev/app.js +++ b/client_backbone/dev/app.js @@ -6,6 +6,7 @@ var kiwi = {}; kiwi.model = {}; kiwi.view = {}; +kiwi.applets = {}; /** diff --git a/client_backbone/dev/applet_settings.js b/client_backbone/dev/applet_settings.js new file mode 100644 index 0000000..4dc4e0c --- /dev/null +++ b/client_backbone/dev/applet_settings.js @@ -0,0 +1,23 @@ +kiwi.applets.Settings = Backbone.View.extend({ + events: { + 'click .save': 'saveSettings' + }, + + initialize: function (options) { + this.$el = $($('#tmpl_applet_settings').html()); + this.title = 'Settings'; + window.s = this; + }, + + saveSettings: function () { + var theme = $('.theme', this.$el).val(), + containers = $('#panels > .panel_container'); + + // Clear any current theme + containers.removeClass(function (i, css) { + return (css.match (/\btheme_\S+/g) || []).join(' '); + }); + + if (theme) containers.addClass('theme_' + theme); + } +}); \ No newline at end of file diff --git a/client_backbone/dev/build.js b/client_backbone/dev/build.js index 0f26fe9..8ec86d4 100644 --- a/client_backbone/dev/build.js +++ b/client_backbone/dev/build.js @@ -24,6 +24,9 @@ var src = concat([ __dirname + '/model_panellist.js', __dirname + '/model_channel.js', __dirname + '/model_server.js', + __dirname + '/model_applet.js', + + __dirname + '/applet_settings.js', __dirname + '/utils.js', __dirname + '/view.js' diff --git a/client_backbone/dev/model_applet.js b/client_backbone/dev/model_applet.js new file mode 100644 index 0000000..b9610d5 --- /dev/null +++ b/client_backbone/dev/model_applet.js @@ -0,0 +1,44 @@ +kiwi.model.Applet = kiwi.model.Panel.extend({ + // Used to determine if this is an applet panel. Applet panel tabs are treated + // differently than others + applet: true, + + initialize: function (attributes) { + // Temporary name + var name = "applet_"+(new Date().getTime().toString()) + Math.ceil(Math.random()*100).toString(); + this.view = new kiwi.view.Applet({model: this, name: name}); + + this.set({ + "name": name + }, {"silent": true}); + }, + + // Load an applet within this panel + load: function (applet_object, applet_name) { + if (typeof applet_object === 'object') { + this.set('title', applet_object.title || 'Something..'); + this.view.$el.html(''); + this.view.$el.append(applet_object.$el); + + } else if (typeof applet_object === 'string') { + // Treat this as a URL to an applet script and load it + this.loadFromUrl(applet_object, applet_name); + } + }, + + loadFromUrl: function(applet_url, applet_name) { + var that = this; + + this.view.$el.html('Loading..'); + $script(applet_url, function () { + // Check if the applet loaded OK + if (!kiwi.applets[applet_name]) { + that.view.$el.html('Not found'); + return; + } + + // Load a new instance of this applet + that.load(new kiwi.applets[applet_name]()); + }); + } +}); \ No newline at end of file diff --git a/client_backbone/dev/model_application.js b/client_backbone/dev/model_application.js index 96661b3..648da47 100644 --- a/client_backbone/dev/model_application.js +++ b/client_backbone/dev/model_application.js @@ -507,7 +507,12 @@ kiwi.model.Application = Backbone.Model.extend(new (function () { }); }); - controlbox.on('command_theme', this.themeCommand); + controlbox.on('command_js', function (ev) { + if (!ev.params[0]) return; + $script(ev.params[0] + '?' + (new Date().getTime())); + }); + + controlbox.on('command_settings', this.settingsCommand); }; // A fallback action. Send a raw command to the server @@ -619,16 +624,12 @@ kiwi.model.Application = Backbone.Model.extend(new (function () { kiwi.gateway.notice(destination, ev.params.join(' ')); }; - this.themeCommand = function (ev) { - var theme = ev.params[0] || false, - containers = $('#panels > .panel_container'); - - // Clear any current theme - containers.removeClass(function (i, css) { - return (css.match (/\btheme_\S+/g) || []).join(' '); - }); - - if (theme) containers.addClass('theme_' + theme); + this.settingsCommand = function (ev) { + var panel = new kiwi.model.Applet(); + panel.load(new kiwi.applets.Settings()); + + kiwi.app.panels.add(panel); + panel.view.show(); }; diff --git a/client_backbone/dev/model_misc.js b/client_backbone/dev/model_misc.js deleted file mode 100644 index 2e18c58..0000000 --- a/client_backbone/dev/model_misc.js +++ /dev/null @@ -1,19 +0,0 @@ -kiwi.model.Misc = kiwi.model.Panel.extend({ - // Used to determine if this is a misc panel. Misc panel tabs are treated - // differently than others - misc: true, - - initialize: function (attributes) { - // Temporary name - var name = "misc_"+(new Date().getTime().toString()) + Math.ceil(Math.random()*100).toString(); - this.view = new kiwi.view.Misc({model: this, name: name}); - - this.set({ - "name": name - }, {"silent": true}); - }, - - html: function (html) { - this.view.$el.append(html); - } -}); \ No newline at end of file diff --git a/client_backbone/dev/model_panel.js b/client_backbone/dev/model_panel.js index 3d58156..571ceb4 100644 --- a/client_backbone/dev/model_panel.js +++ b/client_backbone/dev/model_panel.js @@ -76,11 +76,11 @@ kiwi.model.Panel = Backbone.Model.extend({ var channel_prefix = kiwi.gateway.get('channel_prefix'), this_name = this.get('name'); - if (this.isMisc() || !this_name) return false; + if (this.isApplet() || !this_name) return false; return (channel_prefix.indexOf(this_name[0]) > -1); }, - isMisc: function () { - return this.misc ? true : false; + isApplet: function () { + return this.applet ? true : false; } }); \ No newline at end of file diff --git a/client_backbone/dev/view.js b/client_backbone/dev/view.js index 678aeac..e8e0eb0 100644 --- a/client_backbone/dev/view.js +++ b/client_backbone/dev/view.js @@ -163,6 +163,7 @@ kiwi.view.Panel = Backbone.View.extend({ initializePanel: function (options) { this.$el.css('display', 'none'); + options = options || {}; // Containing element for this panel if (options.container) { @@ -281,8 +282,11 @@ kiwi.view.Panel = Backbone.View.extend({ } }); -kiwi.view.Misc = kiwi.view.Panel.extend({ - className: 'misc' +kiwi.view.Applet = kiwi.view.Panel.extend({ + className: 'applet', + initialize: function (options) { + this.initializePanel(options); + } }); kiwi.view.Channel = kiwi.view.Panel.extend({ @@ -307,7 +311,7 @@ kiwi.view.Channel = kiwi.view.Panel.extend({ // Model for this = kiwi.model.PanelList kiwi.view.Tabs = Backbone.View.extend({ - tabs_misc: null, + tabs_applets: null, tabs_msg: null, events: { @@ -322,7 +326,7 @@ kiwi.view.Tabs = Backbone.View.extend({ this.model.on('active', this.panelActive, this); - this.tabs_misc = $('ul.misc', this.$el); + this.tabs_applets = $('ul.applets', this.$el); this.tabs_msg = $('ul.channels', this.$el); window.t = this; @@ -347,7 +351,7 @@ kiwi.view.Tabs = Backbone.View.extend({ panel.tab .data('panel_id', panel.cid) - .appendTo(panel.isMisc() ? this.tabs_misc : this.tabs_msg); + .appendTo(panel.isApplet() ? this.tabs_applets : this.tabs_msg); }); kiwi.app.view.doLayout(); @@ -357,7 +361,7 @@ kiwi.view.Tabs = Backbone.View.extend({ // Add a tab to the panel panel.tab = $('
  • ' + (panel.get("title") || panel.get("name")) + '
    • '); panel.tab.data('panel_id', panel.cid) - .appendTo(panel.isMisc() ? this.tabs_misc : this.tabs_msg); + .appendTo(panel.isApplet() ? this.tabs_applets : this.tabs_msg); kiwi.app.view.doLayout(); }, @@ -371,7 +375,7 @@ kiwi.view.Tabs = Backbone.View.extend({ panelActive: function (panel) { // Remove any existing tabs or part images $('img', this.$el).remove(); - this.tabs_misc.children().removeClass('active'); + this.tabs_applets.children().removeClass('active'); this.tabs_msg.children().removeClass('active'); panel.tab.addClass('active'); diff --git a/client_backbone/index.html b/client_backbone/index.html index 1828bab..a73c661 100644 --- a/client_backbone/index.html +++ b/client_backbone/index.html @@ -13,7 +13,7 @@
      -
        +
          @@ -74,6 +74,16 @@
          + +