From a030ac2c0c198e59637579ac1319265321a77d0d Mon Sep 17 00:00:00 2001 From: Ramiro Saenz Date: Thu, 22 Sep 2016 22:47:36 -0300 Subject: [PATCH] Improve code to Add New Services and allow custom domains Created new views for Add New Service window and allow custom domains for special services (self-hosted). Fixes #324 Fixes #341 --- app/model/ServiceList.js | 4 + app/store/ServicesList.js | 6 +- app/ux/WebView.js | 36 +- app/view/add/Add.js | 219 +++++++++++ app/view/add/AddController.js | 125 +++++++ app/view/add/AddModel.js | 4 + app/view/main/Main.js | 1 + app/view/main/MainController.js | 630 +------------------------------- 8 files changed, 394 insertions(+), 631 deletions(-) create mode 100644 app/view/add/Add.js create mode 100644 app/view/add/AddController.js create mode 100644 app/view/add/AddModel.js diff --git a/app/model/ServiceList.js b/app/model/ServiceList.js index 9ba4c9ac..91153c4f 100644 --- a/app/model/ServiceList.js +++ b/app/model/ServiceList.js @@ -43,5 +43,9 @@ Ext.define('Rambox.model.ServiceList', { name: 'note' ,type: 'string' ,defaultValue: '' + },{ + name: 'custom_domain' + ,type: 'boolean' + ,defaultValue: false }] }); diff --git a/app/store/ServicesList.js b/app/store/ServicesList.js index 054c88b3..dfa5e683 100644 --- a/app/store/ServicesList.js +++ b/app/store/ServicesList.js @@ -85,6 +85,7 @@ Ext.define('Rambox.store.ServicesList', { ,url: 'https://___.hipchat.com/chat' ,type: 'messaging' ,js_unread: 'function checkUnread(){var e=document.getElementsByClassName("hc-badge"),t=0;for(i=0;i=1?document.title="("+e+") "+originalTitle:document.title=originalTitle}var originalTitle=document.title;setInterval(checkUnread,3000);' + ,custom_domain: true }, { id: 'telegram' @@ -358,6 +359,7 @@ Ext.define('Rambox.store.ServicesList', { ,logo: 'custom.png' ,name: '_Custom Service' ,description: 'Add a custom service if is not listed above.' + ,url: '___' ,type: 'custom' ,allow_popups: true }, @@ -457,13 +459,14 @@ Ext.define('Rambox.store.ServicesList', { ,type: 'email' }, { - id:' irccloud' + id: ' irccloud' ,logo: 'irccloud.png' ,name: 'IRCCloud' ,description: 'IRCCloud is a modern IRC client that keeps you connected, with none of the baggage.' ,url: 'https://www.irccloud.com/' ,type: 'messaging' ,js_unread: 'function checkUnread(){var t=0;[].map.call(document.querySelectorAll(".bufferBadges > .badge"),n=>n.textContent?parseInt(n.textContent,10):0).reduce((x,y)=>x+y,0);updateBadge(t)}function updateBadge(e){e>=1?document.title="("+e+") "+originalTitle:document.title=originalTitle}var originalTitle=document.title;setInterval(checkUnread,3000);' + ,custom_domain: true }, { id: 'ryver' @@ -489,6 +492,7 @@ Ext.define('Rambox.store.ServicesList', { ,url: 'https://kiwiirc.com/client' ,type: 'messaging' ,js_unread: 'function getUnreadCount(){var a=0;$(".activity").each(function(){a+=parseInt($(this).html())});var b=!1;return $(".panel[style*=display: block] .msg").each(function(){b?a++:$(this).hasClass("last_seen")&&(b=!0)}),a}function updateTitle(a){count=getUnreadCount(),cleanTitle=a.match(re),null!==cleanTitle&&cleanTitle.length>1?cleanTitle=cleanTitle[1]:cleanTitle=a,a=count>0?"("+getUnreadCount()+") "+cleanTitle:cleanTitle,$("title").text(a)}var re=/\(\d+\)[ ](.*)/;Object.defineProperty(document,"title",{configurable:!0,set:function(a){updateTitle(a)},get:function(){return $("title").text()}}),setInterval(function(){updateTitle(document.title)},3e3);' + ,custom_domain: true }, { id: 'icloud' diff --git a/app/ux/WebView.js b/app/ux/WebView.js index 0891358c..adc1e9d9 100644 --- a/app/ux/WebView.js +++ b/app/ux/WebView.js @@ -34,7 +34,14 @@ Ext.define('Rambox.ux.WebView',{ if ( me.record.get('trust') ) ipc.send('allowCertificate', me.src); Ext.apply(me, { - items: me.webViewConstructor(me.record.get('enabled')) + items: me.webViewConstructor() + ,title: me.record.get('name') + ,icon: me.record.get('type') === 'custom' ? (me.record.get('logo') === '' ? 'resources/icons/custom.png' : me.record.get('logo')) : 'resources/icons/'+me.record.get('logo') + ,src: me.record.get('url') + ,type: me.record.get('type') + ,align: me.record.get('align') + ,notifications: me.record.get('notifications') + ,muted: me.record.get('muted') ,tabConfig: { listeners: { badgetextchange: me.onBadgeTextChange @@ -122,11 +129,11 @@ Ext.define('Rambox.ux.WebView',{ me.callParent(config); } - ,webViewConstructor: function(enabled) { + ,webViewConstructor: function() { var me = this; var cfg; - if ( !enabled ) { + if ( !me.record.get('enabled') ) { cfg = { xtype: 'container' ,html: '

Service Disabled

' @@ -141,19 +148,19 @@ Ext.define('Rambox.ux.WebView',{ ,autoShow: true ,autoEl: { tag: 'webview' - ,src: me.src + ,src: me.record.get('url') ,style: 'width:100%;height:100%;' - ,partition: 'persist:' + me.type + '_' + me.id.replace('tab_', '') + (localStorage.getItem('id_token') ? '_' + Ext.decode(localStorage.getItem('profile')).user_id : '') + ,partition: 'persist:' + me.record.get('type') + '_' + me.id.replace('tab_', '') + (localStorage.getItem('id_token') ? '_' + Ext.decode(localStorage.getItem('profile')).user_id : '') ,plugins: 'true' ,allowtransparency: 'on' ,autosize: 'on' ,disablewebsecurity: 'on' ,blinkfeatures: 'ApplicationCache,GlobalCacheStorage' - ,useragent: Ext.getStore('ServicesList').getById(me.type).get('userAgent') + ,useragent: Ext.getStore('ServicesList').getById(me.record.get('type')).get('userAgent') } }; - if ( Ext.getStore('ServicesList').getById(me.type).get('allow_popups') ) cfg.autoEl.allowpopups = 'on'; + if ( Ext.getStore('ServicesList').getById(me.record.get('type')).get('allow_popups') ) cfg.autoEl.allowpopups = 'on'; } return cfg; @@ -319,10 +326,21 @@ Ext.define('Rambox.ux.WebView',{ if ( me.record.get('enabled') ) webview.isDevToolsOpened() ? webview.closeDevTools() : webview.openDevTools(); } + ,setURL: function(url) { + var me = this; + var webview = me.down('component').el.dom; + + me.src = url; + + if ( me.record.get('enabled') ) webview.loadURL(url); + } + ,setAudioMuted: function(muted, calledFromDisturb) { var me = this; var webview = me.down('component').el.dom; + me.muted = muted; + if ( !muted && !calledFromDisturb && JSON.parse(localStorage.getItem('dontDisturb')) ) return; if ( me.record.get('enabled') ) webview.setAudioMuted(muted); @@ -332,6 +350,8 @@ Ext.define('Rambox.ux.WebView',{ var me = this; var webview = me.down('component').el.dom; + me.notifications = notification; + if ( notification && !calledFromDisturb && JSON.parse(localStorage.getItem('dontDisturb')) ) return; if ( me.record.get('enabled') ) ipc.send('setServiceNotifications', webview.partition, notification); @@ -342,7 +362,7 @@ Ext.define('Rambox.ux.WebView',{ me.tab.setBadgeText(''); me.removeAll(); - me.add(me.webViewConstructor(enabled)); + me.add(me.webViewConstructor()); if ( enabled ) { me.resumeEvent('afterrender'); me.show(); diff --git a/app/view/add/Add.js b/app/view/add/Add.js new file mode 100644 index 00000000..8e32e81f --- /dev/null +++ b/app/view/add/Add.js @@ -0,0 +1,219 @@ +Ext.define('Rambox.view.add.Add',{ + extend: 'Ext.window.Window' + + ,requires: [ + 'Rambox.view.add.AddController' + ,'Rambox.view.add.AddModel' + ] + + ,controller: 'add-add' + ,viewModel: { + type: 'add-add' + } + + // private + ,record: null + ,service: null + ,edit: false + + // defaults + ,modal: true + ,width: 500 + ,autoShow: true + ,resizable: false + ,draggable: false + ,bodyPadding: 20 + + ,initComponent: function() { + var me = this; + + me.title = (!me.edit ? 'Add ' : 'Edit ') + me.record.get('name'); + me.icon = me.record.get('type') === 'custom' ? (!me.edit ? 'resources/icons/custom.png' : (me.record.get('logo') === '' ? 'resources/icons/custom.png' : me.record.get('logo'))) : 'resources/icons/'+me.record.get('logo'); + me.items = [ + { + xtype: 'form' + ,items: [ + { + xtype: 'textfield' + ,fieldLabel: 'Name' + ,value: me.record.get('type') === 'custom' ? (me.edit ? me.record.get('name') : '') : me.record.get('name') + ,name: 'serviceName' + ,allowBlank: true + ,listeners: { specialkey: 'onEnter' } + } + ,{ + xtype: 'container' + ,layout: 'column' + ,hidden: me.edit ? me.service.get('url').indexOf('___') === -1 && !me.service.get('custom_domain') : me.record.get('url').indexOf('___') === -1 && !me.record.get('custom_domain') + ,items: [ + { + xtype: 'textfield' + ,fieldLabel: 'URL' + ,name: 'url' + ,value: me.edit && me.service.get('url').indexOf('___') >= 0 ? me.record.get('url').replace(me.service.get('url').split('___')[0], '').replace(me.service.get('url').split('___')[1], '') : (me.record.get('url').indexOf('___') === -1 ? me.record.get('url') : '') + ,readOnly: me.edit ? (me.service.get('custom_domain') && me.service.get('url') === me.record.get('url') ? true : me.service.get('url').indexOf('___') === -1 && !me.service.get('custom_domain')) : me.record.get('url').indexOf('___') === -1 && me.record.get('custom_domain') + ,allowBlank: false + ,submitEmptyText: false + ,emptyText: me.record.get('url') === '___' ? 'http://' : '' + ,vtype: me.record.get('url') === '___' ? 'url' : '' + ,width: 275 + ,listeners: { specialkey: 'onEnter' } + } + ,{ + xtype: 'cycle' + ,showText: true + ,style: 'border-top-left-radius:0;border-bottom-left-radius:0;' + ,hidden: me.edit ? me.service.get('type') === 'custom' || me.service.get('url') === '___' : me.record.get('type') === 'custom' || me.record.get('url') === '___' + ,arrowVisible: me.edit ? (me.service.get('url').indexOf('___') >= 0 && !me.service.get('custom_domain') ? false : me.service.get('custom_domain')) : (me.record.get('url').indexOf('___') >= 0 && !me.record.get('custom_domain') ? false : me.record.get('custom_domain')) + ,menu: { + items: [ + { + text: me.edit ? (me.service.get('url').indexOf('___') === -1 ? 'Official Server' : Ext.String.endsWith(me.service.get('url'), '/') ? me.service.get('url').split('___')[1].slice(0, -1) : me.service.get('url').split('___')[1]) : (me.record.get('url').indexOf('___') === -1 ? 'Official Server' : Ext.String.endsWith(me.record.get('url'), '/') ? me.record.get('url').split('___')[1].slice(0, -1) : me.record.get('url').split('___')[1]) + ,checked: me.edit ? (me.service.get('custom_domain') && me.service.get('url') === me.record.get('url') ? true : Ext.String.endsWith(me.record.get('url'), me.service.get('url').split('___')[1])) : true + ,disabled: me.edit ? me.service.get('url') === '___' : me.record.get('url') === '___' + } + ,{ + text: 'Custom Server' + ,checked: me.edit ? (me.service.get('custom_domain') && me.service.get('url') === me.record.get('url') ? false : !Ext.String.endsWith(me.record.get('url'), me.service.get('url').split('___')[1])) : false + ,custom: true + ,disabled: me.edit ? !me.service.get('custom_domain') : !me.record.get('custom_domain') + } + ] + } + // Fixes bug EXTJS-20094 for version Ext JS 5 + ,arrowHandler: function(cycleBtn, e) { + if ( !cycleBtn.arrowVisible ) cycleBtn.hideMenu(); + } + ,changeHandler: function(cycleBtn, activeItem) { + Ext.apply(cycleBtn.previousSibling(), { + emptyText: activeItem.custom ? 'http://' : ' ' + ,vtype: activeItem.custom ? 'url' : '' + }); + cycleBtn.previousSibling().applyEmptyText(); + cycleBtn.previousSibling().reset(); + + if ( me.edit && cycleBtn.nextSibling().originalValue !== '2' ) { + me.service.get('custom_domain') && !activeItem.custom ? cycleBtn.previousSibling().reset() : cycleBtn.previousSibling().setValue(''); + } else if ( me.edit && cycleBtn.nextSibling().originalValue === '2' ) { + me.service.get('custom_domain') && !activeItem.custom ? cycleBtn.previousSibling().setValue( me.service.get('url').indexOf('___') === -1 && me.service.get('custom_domain') ? me.service.get('url') : '') : cycleBtn.previousSibling().reset(); + } else if ( !me.edit && cycleBtn.nextSibling().originalValue === '1' ) { + activeItem.custom ? cycleBtn.previousSibling().setValue('') : cycleBtn.previousSibling().reset(); + } + + cycleBtn.previousSibling().setReadOnly( activeItem.custom ? false : (me.edit ? me.service.get('url').indexOf('___') === -1 : me.record.get('url').indexOf('___') === -1) ); + cycleBtn.nextSibling().setValue( activeItem.custom ? 2 : 1 ); + } + } + ,{ + xtype: 'hiddenfield' + ,name: 'cycleValue' + ,value: me.edit ? (me.service.get('custom_domain') && me.service.get('url') === me.record.get('url') ? 1 : (!Ext.String.endsWith(me.record.get('url'), me.service.get('url').split('___')[1]) ? 2 : 1)) : 1 + } + ] + } + ,{ + xtype: 'textfield' + ,fieldLabel: 'Logo' + ,emptyText: 'http://url.com/image.png' + ,name: 'logo' + ,vtype: me.record.get('type') === 'custom' ? 'url' : '' + ,value: me.record.get('type') === 'custom' ? (me.edit ? me.record.get('logo') : '') : me.record.get('logo') + ,allowBlank: true + ,hidden: me.record.get('type') !== 'custom' + ,margin: '5 0 0 0' + ,listeners: { specialkey: 'onEnter' } + } + ,{ + xtype: 'fieldset' + ,title: 'Options' + ,margin: '10 0 0 0' + ,items: [ + { + xtype: 'checkbox' + ,boxLabel: 'Align to Right' + ,checked: me.edit ? (me.record.get('align') === 'right' ? true : false) : false + ,name: 'align' + ,uncheckedValue: 'left' + ,inputValue: 'right' + } + ,{ + xtype: 'checkbox' + ,boxLabel: 'Show notifications' + ,name: 'notifications' + ,checked: me.edit ? me.record.get('notifications') : true + ,uncheckedValue: false + ,inputValue: true + } + ,{ + xtype: 'checkbox' + ,boxLabel: 'Mute all sounds' + ,name: 'muted' + ,checked: me.edit ? me.record.get('muted') : false + ,uncheckedValue: false + ,inputValue: true + } + ,{ + xtype: 'checkbox' + ,boxLabel: 'Trust invalid authority certificates' + ,name: 'trust' + ,hidden: me.record.get('type') !== 'custom' + ,checked: me.edit ? me.record.get('trust') : false + ,uncheckedValue: false + ,inputValue: true + } + ] + } + ,{ + xtype: 'fieldset' + ,title: 'Advanced' + ,margin: '10 0 0 0' + ,collapsible: true + ,collapsed: true + ,items: [ + { + xtype: 'textarea' + ,fieldLabel: 'Custom Code (read more)' + ,allowBlank: true + ,name: 'js_unread' + ,value: me.edit ? me.record.get('js_unread') : '' + ,anchor: '100%' + ,height: 120 + } + ] + } + ,{ + xtype: 'container' + ,hidden: (me.edit ? Ext.getStore('ServicesList').getById(me.record.get('type')).get('note') === '' : me.record.get('note') === '') + ,data: { note: (me.edit ? Ext.getStore('ServicesList').getById(me.record.get('type')).get('note') : me.record.get('note')) } + ,margin: '10 0 0 0' + ,style: 'background-color:#93CFE0;color:#053767;border-radius:6px;' + ,tpl: [ + '' + ,'{note}' + ] + } + ] + } + ]; + + me.buttons = [ + { + text: 'Cancel' + ,ui: 'decline' + ,handler: 'doCancel' + } + ,'->' + ,{ + text: me.title + ,itemId: 'submit' + ,handler: 'doSave' + } + ]; + + this.callParent(this); + } + + ,listeners: { + show: 'onShow' + } +}); diff --git a/app/view/add/AddController.js b/app/view/add/AddController.js new file mode 100644 index 00000000..55bdaa8f --- /dev/null +++ b/app/view/add/AddController.js @@ -0,0 +1,125 @@ +Ext.define('Rambox.view.add.AddController', { + extend: 'Ext.app.ViewController' + ,alias: 'controller.add-add' + + ,doCancel: function( btn ) { + var me = this; + + me.getView().close(); + } + + ,doSave: function( btn ) { + var me = this; + + var win = me.getView(); + if ( !win.down('form').isValid() ) return false; + + var formValues = win.down('form').getValues(); + + if ( win.edit ) { + // Format data + if ( win.service.get('url').indexOf('___') >= 0 ) { + formValues.url = formValues.cycleValue === '1' ? win.service.get('url').replace('___', formValues.url) : formValues.url; + } + + var oldData = win.record.getData(); + win.record.set({ + logo: formValues.logo + ,name: formValues.serviceName + ,url: formValues.url + ,align: formValues.align + ,notifications: formValues.notifications + ,muted: formValues.muted + ,trust: formValues.trust + ,js_unread: formValues.js_unread + }); + // Change the title of the Tab + Ext.getCmp('tab_'+win.record.get('id')).setTitle(formValues.serviceName); + // Change sound of the Tab + Ext.getCmp('tab_'+win.record.get('id')).setAudioMuted(formValues.muted); + // Change notifications of the Tab + Ext.getCmp('tab_'+win.record.get('id')).setNotifications(formValues.notifications); + // Change the icon of the Tab + if ( win.record.get('type') === 'custom' && oldData.logo !== formValues.logo ) Ext.getCmp('tab_'+win.record.get('id')).setConfig('icon', formValues.logo === '' ? 'resources/icons/custom.png' : formValues.logo); + // Change the URL of the Tab + if ( oldData.url !== formValues.url ) Ext.getCmp('tab_'+win.record.get('id')).setURL(formValues.url); + // Change the align of the Tab + if ( oldData.align !== formValues.align ) { + if ( formValues.align === 'left' ) { + Ext.cq1('app-main').moveBefore(Ext.getCmp('tab_'+win.record.get('id')), Ext.getCmp('tbfill')); + } else { + Ext.cq1('app-main').moveAfter(Ext.getCmp('tab_'+win.record.get('id')), Ext.getCmp('tbfill')); + } + } + // Apply the JS Code of the Tab + if ( win.down('textarea').isDirty() ) { + Ext.Msg.confirm('CUSTOM CODE', 'Rambox needs to reload the service to execute the new JavaScript code. Do you want to do it now?', function( btnId ) { + if ( btnId === 'yes' ) Ext.getCmp('tab_'+win.record.get('id')).reloadService(); + }); + } + + Ext.getCmp('tab_'+win.record.get('id')).record = win.record; + Ext.getCmp('tab_'+win.record.get('id')).tabConfig.service = win.record; + } else { + // Format data + if ( win.record.get('url').indexOf('___') >= 0 ) { + formValues.url = formValues.cycleValue === 1 ? win.record.get('url').replace('___', formValues.url) : formValues.url; + } + + var service = Ext.create('Rambox.model.Service', { + type: win.record.get('id') + ,logo: formValues.logo + ,name: formValues.serviceName + ,url: formValues.url + ,align: formValues.align + ,notifications: formValues.notifications + ,muted: formValues.muted + ,trust: formValues.trust + ,js_unread: formValues.js_unread + }); + service.save(); + Ext.getStore('Services').add(service); + + var tabData = { + xtype: 'webview' + ,id: 'tab_'+service.get('id') + /* + ,title: service.get('name') + ,icon: service.get('logo') + ,src: service.get('url') + ,type: service.get('type') + ,align: formValues.align + ,notifications: formValues.notifications + ,muted: formValues.muted + */ + ,record: service + ,tabConfig: { + service: service + } + }; + + if ( formValues.align === 'left' ) { + var tbfill = Ext.cq1('app-main').getTabBar().down('tbfill'); + Ext.cq1('app-main').insert(Ext.cq1('app-main').getTabBar().items.indexOf(tbfill), tabData).show(); + } else { + Ext.cq1('app-main').add(tabData).show(); + } + } + + win.close(); + } + + ,onEnter: function(field, e) { + var me = this; + + if ( e.getKey() == e.ENTER && field.up('form').isValid() ) me.doSave(); + } + + ,onShow: function(win) { + var me = this; + + // Make focus to the name field + win.down('textfield[name="serviceName"]').focus(true, 100); + } + +}); diff --git a/app/view/add/AddModel.js b/app/view/add/AddModel.js new file mode 100644 index 00000000..7dd56ad9 --- /dev/null +++ b/app/view/add/AddModel.js @@ -0,0 +1,4 @@ +Ext.define('Rambox.view.add.AddModel', { + extend: 'Ext.app.ViewModel' + ,alias: 'viewmodel.add-add' +}); diff --git a/app/view/main/Main.js b/app/view/main/Main.js index 82dcbc9b..f26882f4 100644 --- a/app/view/main/Main.js +++ b/app/view/main/Main.js @@ -5,6 +5,7 @@ Ext.define('Rambox.view.main.Main', { ,'Rambox.view.main.MainModel' ,'Rambox.ux.WebView' ,'Rambox.ux.mixin.Badge' + ,'Rambox.view.add.Add' ,'Ext.ux.TabReorderer' ] diff --git a/app/view/main/MainController.js b/app/view/main/MainController.js index ecf8bf22..3393edd3 100644 --- a/app/view/main/MainController.js +++ b/app/view/main/MainController.js @@ -45,395 +45,6 @@ Ext.define('Rambox.view.main.MainController', { Ext.getCmp('tab_'+e.record.get('id')).setTitle(e.record.get('name')); } - ,showSimpleModal: function(record, edit) { - var me = this; - - var win = Ext.create('Ext.window.Window', { - title: (edit ? 'Edit ' : 'Add ') + record.get('name') - ,modal: true - ,width: 400 - ,resizable: false - ,draggable: false - ,bodyPadding: 20 - ,icon: 'resources/icons/' + record.get('logo') - ,items: [ - { - xtype: 'form' - ,items: [ - { - xtype: 'textfield' - ,fieldLabel: 'Name' - ,value: record.get('name') - ,name: 'serviceName' - ,allowBlank: true - ,listeners: { - specialkey: function(field, e) { - if(e.getKey() == e.ENTER && field.up('form').isValid()) { - field.up('window').down('#submit').handler(); - } - } - } - } - ,{ - xtype: 'fieldset' - ,title: 'Options' - ,margin: '10 0 0 0' - ,items: [ - { - xtype: 'checkbox' - ,boxLabel: 'Align to Right' - ,checked: edit ? (record.get('align') === 'right' ? true : false) : false - ,name: 'align' - ,uncheckedValue: 'left' - ,inputValue: 'right' - } - ,{ - xtype: 'checkbox' - ,boxLabel: 'Show notifications' - ,name: 'notifications' - ,checked: edit ? record.get('notifications') : true - ,uncheckedValue: false - ,inputValue: true - } - ,{ - xtype: 'checkbox' - ,boxLabel: 'Mute all sounds' - ,name: 'muted' - ,checked: edit ? record.get('muted') : false - ,uncheckedValue: false - ,inputValue: true - } - ] - } - ,{ - xtype: 'fieldset' - ,title: 'Advanced' - ,margin: '10 0 0 0' - ,collapsible: true - ,collapsed: true - ,items: [ - { - xtype: 'textarea' - ,fieldLabel: 'Custom Code (read more)' - ,allowBlank: true - ,name: 'js_unread' - ,value: edit ? record.get('js_unread') : '' - ,anchor: '100%' - ,height: 120 - } - ] - } - ,{ - xtype: 'container' - ,hidden: (edit ? Ext.getStore('ServicesList').getById(record.get('type')).get('note') === '' : record.get('note') === '') - ,data: { note: (edit ? Ext.getStore('ServicesList').getById(record.get('type')).get('note') : record.get('note')) } - ,margin: '10 0 0 0' - ,style: 'background-color:#93CFE0;color:#053767;border-radius:6px;' - ,tpl: [ - '' - ,'{note}' - ] - } - ] - } - ] - ,buttons: [ - { - text: 'Cancel' - ,ui: 'decline' - ,handler: function() { - win.close(); - } - } - ,'->' - ,{ - text: edit ? 'Save' : 'Add service' - ,itemId: 'submit' - ,handler: function() { - if ( !win.down('form').isValid() ) return false; - - var formValues = win.down('form').getValues(); - - if ( edit ) { - var oldData = record.getData(); - record.set({ - name: formValues.serviceName - ,align: formValues.align - ,notifications: formValues.notifications - ,muted: formValues.muted - ,js_unread: formValues.js_unread - }); - // Change the title of the Tab - Ext.getCmp('tab_'+record.get('id')).setTitle(formValues.serviceName); - // Change sound of the Tab - Ext.getCmp('tab_'+record.get('id')).setAudioMuted(formValues.muted); - // Change notifications of the Tab - Ext.getCmp('tab_'+record.get('id')).setNotifications(formValues.notifications); - // Change the align of the Tab - if ( oldData.align !== formValues.align ) { - if ( formValues.align === 'left' ) { - me.getView().moveBefore(Ext.getCmp('tab_'+record.get('id')), Ext.getCmp('tbfill')); - } else { - me.getView().moveAfter(Ext.getCmp('tab_'+record.get('id')), Ext.getCmp('tbfill')); - } - } - - Ext.getCmp('tab_'+record.get('id')).record = record; - } else { - var service = Ext.create('Rambox.model.Service', { - type: record.get('id') - ,logo: record.get('logo') - ,name: formValues.serviceName - ,url: record.get('url') - ,align: formValues.align - ,notifications: formValues.notifications - ,muted: formValues.muted - ,js_unread: formValues.js_unread - }); - service.save(); - Ext.getStore('Services').add(service); - - var tabData = { - xtype: 'webview' - ,id: 'tab_'+service.get('id') - ,title: service.get('name') - ,icon: 'resources/icons/'+service.get('logo') - ,src: service.get('url') - ,type: service.get('type') - ,align: formValues.align - ,notifications: formValues.notifications - ,muted: formValues.muted - ,record: service - ,tabConfig: { - service: service - } - }; - - if ( formValues.align === 'left' ) { - var tbfill = me.getView().getTabBar().down('tbfill'); - me.getView().insert(me.getView().getTabBar().items.indexOf(tbfill), tabData).show(); - } else { - me.getView().add(tabData).show(); - } - } - - win.close(); - } - } - ] - }).show(); - - // Make focus to the name field - win.down('textfield[name="serviceName"]').focus(true, 100); - } - - ,showCustomModal: function(record, edit) { - var me = this; - - var win = Ext.create('Ext.window.Window', { - title: (edit ? 'Edit ' : 'Add ') + record.get('name') - ,modal: true - ,width: 400 - ,resizable: false - ,draggable: false - ,bodyPadding: 20 - ,icon: 'resources/icons/' + record.get('logo') - ,items: [ - { - xtype: 'form' - ,items: [ - { - xtype: 'textfield' - ,fieldLabel: 'Name' - ,value: record.get('name') - ,name: 'serviceName' - ,allowBlank: true - ,listeners: { - specialkey: function(field, e) { - if(e.getKey() == e.ENTER && field.up('form').isValid()) { - field.up('window').down('#submit').handler(); - } - } - } - } - ,{ - xtype: 'container' - ,layout: 'column' - ,items: [{ - xtype: 'textfield' - ,fieldLabel: record.get('name') + ' team' - ,name: 'url' - ,allowBlank: false - ,submitEmptyText: false - ,emptyText: record.get('url') === '___' ? 'http://' : '' - ,vtype: record.get('url') === '___' ? 'url' : '' - ,width: 220 - ,listeners: { - specialkey: function(field, e) { - if(e.getKey() == e.ENTER && field.up('form').isValid()) { - field.up('window').down('#submit').handler(); - } - } - } - },{ - xtype: 'displayfield' - ,value: record.get('url').split('___')[1].slice(0, -1) // Get the URL and remove the final slash (/) - ,submitValue: false // Prevent being submitted - }] - } - ,{ - xtype: 'fieldset' - ,title: 'Options' - ,margin: '10 0 0 0' - ,items: [ - { - xtype: 'checkbox' - ,boxLabel: 'Align to Right' - ,checked: edit ? (record.get('align') === 'right' ? true : false) : false - ,name: 'align' - ,uncheckedValue: 'left' - ,inputValue: 'right' - } - ,{ - xtype: 'checkbox' - ,boxLabel: 'Show notifications' - ,name: 'notifications' - ,checked: edit ? record.get('notifications') : true - ,uncheckedValue: false - ,inputValue: true - } - ,{ - xtype: 'checkbox' - ,boxLabel: 'Mute all sounds' - ,name: 'muted' - ,checked: edit ? record.get('muted') : false - ,uncheckedValue: false - ,inputValue: true - } - ] - } - ,{ - xtype: 'fieldset' - ,title: 'Advanced' - ,margin: '10 0 0 0' - ,collapsible: true - ,collapsed: true - ,items: [ - { - xtype: 'textarea' - ,fieldLabel: 'Custom Code (read more)' - ,allowBlank: true - ,name: 'js_unread' - ,value: edit ? record.get('js_unread') : '' - ,anchor: '100%' - ,height: 120 - } - ] - } - ,{ - xtype: 'container' - ,hidden: (edit ? Ext.getStore('ServicesList').getById(record.get('type')).get('note') === '' : record.get('note') === '') - ,data: { note: (edit ? Ext.getStore('ServicesList').getById(record.get('type')).get('note') : record.get('note')) } - ,margin: '10 0 0 0' - ,style: 'background-color:#93CFE0;color:#053767;border-radius:6px;' - ,tpl: [ - '' - ,'{note}' - ] - } - ] - } - ] - ,buttons: [ - { - text: 'Cancel' - ,ui: 'decline' - ,handler: function() { - win.close(); - } - } - ,'->' - ,{ - text: edit ? 'Save' : 'Add service' - ,itemId: 'submit' - ,handler: function() { - if ( !win.down('form').isValid() ) return false; - - var formValues = win.down('form').getValues(); - - if ( edit ) { - var oldData = record.getData(); - record.set({ - name: formValues.serviceName - ,align: formValues.align - ,notifications: formValues.notifications - ,muted: formValues.muted - ,js_unread: formValues.js_unread - }); - // Change the title of the Tab - Ext.getCmp('tab_'+record.get('id')).setTitle(formValues.serviceName); - // Change sound of the Tab - Ext.getCmp('tab_'+record.get('id')).setAudioMuted(formValues.muted); - // Change notifications of the Tab - Ext.getCmp('tab_'+record.get('id')).setNotifications(formValues.notifications); - // Change the align of the Tab - if ( oldData.align !== formValues.align ) { - if ( formValues.align === 'left' ) { - me.getView().moveBefore(Ext.getCmp('tab_'+record.get('id')), Ext.getCmp('tbfill')); - } else { - me.getView().moveAfter(Ext.getCmp('tab_'+record.get('id')), Ext.getCmp('tbfill')); - } - } - - Ext.getCmp('tab_'+record.get('id')).record = record; - } else { - var service = Ext.create('Rambox.model.Service', { - type: record.get('id') - ,logo: record.get('logo') - ,name: formValues.serviceName - ,url: record.get('url').replace('___', formValues.url) - ,align: formValues.align - ,notifications: formValues.notifications - ,muted: formValues.muted - ,js_unread: formValues.js_unread - }); - service.save(); - Ext.getStore('Services').add(service); - - var tabData = { - xtype: 'webview' - ,id: 'tab_'+service.get('id') - ,title: service.get('name') - ,icon: 'resources/icons/'+service.get('logo') - ,src: service.get('url') - ,type: service.get('type') - ,align: formValues.align - ,notifications: formValues.notifications - ,muted: formValues.muted - ,record: service - ,tabConfig: { - service: service - } - }; - - if ( formValues.align === 'left' ) { - var tbfill = me.getView().getTabBar().down('tbfill'); - me.getView().insert(me.getView().getTabBar().items.indexOf(tbfill), tabData).show(); - } else { - me.getView().add(tabData).show(); - } - } - - win.close(); - } - } - ] - }).show(); - - // Make focus to the name field - win.down('textfield[name="serviceName"]').focus(true, 100); - } - ,onEnableDisableService: function(cc, rowIndex, checked) { var rec = Ext.getStore('Services').getAt(rowIndex); @@ -441,13 +52,9 @@ Ext.define('Rambox.view.main.MainController', { } ,onNewServiceSelect: function( view, record, item, index, e ) { - if ( record.get('url').indexOf('___') >= 0 ) { - this.showCustomModal(record); - } else if ( record.get('type') === 'custom' ) { - this.addCustomService(record, false); - } else { - this.showSimpleModal(record, false); - } + Ext.create('Rambox.view.add.Add', { + record: record + }); } ,removeServiceFn: function(serviceId) { @@ -511,232 +118,11 @@ Ext.define('Rambox.view.main.MainController', { } ,configureService: function( gridView, rowIndex, colIndex, col, e, rec, rowEl ) { - if ( rec.get('type') === 'custom' ) { - this.addCustomService(rec, true); - } else { - this.showSimpleModal(rec, true); - } - } - - ,addCustomService: function( record, edit ) { - var me = this; - - var win = Ext.create('Ext.window.Window', { - title: (edit ? 'Edit ' : 'Add ') + 'Custom Service' - ,modal: true - ,width: 400 - ,resizable: false - ,draggable: false - ,bodyPadding: 20 - ,items: [ - { - xtype: 'form' - ,items: [ - { - xtype: 'textfield' - ,fieldLabel: 'Name' - ,name: 'serviceName' - ,value: (edit ? record.get('name') : '') - ,allowBlank: true - ,listeners: { - specialkey: function(field, e) { - if(e.getKey() == e.ENTER && field.up('form').isValid()) { - field.up('window').down('#submit').handler(); - } - } - } - } - ,{ - xtype: 'textfield' - ,fieldLabel: 'URL' - ,emptyText: 'http://service.url.com' - ,name: 'url' - ,vtype: 'url' - ,value: (edit ? record.get('url') : '') - ,allowBlank: false - ,listeners: { - specialkey: function(field, e) { - if(e.getKey() == e.ENTER && field.up('form').isValid()) { - field.up('window').down('#submit').handler(); - } - } - } - } - ,{ - xtype: 'textfield' - ,fieldLabel: 'Logo' - ,emptyText: 'http://image.url.com/image.png' - ,name: 'logo' - ,vtype: 'url' - ,value: (edit ? record.get('logo') : '') - ,allowBlank: true - ,listeners: { - specialkey: function(field, e) { - if(e.getKey() == e.ENTER && field.up('form').isValid()) { - field.up('window').down('#submit').handler(); - } - } - } - } - ,{ - xtype: 'fieldset' - ,title: 'Options' - ,margin: '10 0 0 0' - ,items: [ - { - xtype: 'checkbox' - ,boxLabel: 'Align to Right' - ,checked: edit ? (record.get('align') === 'right' ? true : false) : false - ,name: 'align' - ,uncheckedValue: 'left' - ,inputValue: 'right' - } - ,{ - xtype: 'checkbox' - ,boxLabel: 'Show notifications' - ,name: 'notifications' - ,checked: edit ? record.get('notifications') : true - ,uncheckedValue: false - ,inputValue: true - } - ,{ - xtype: 'checkbox' - ,boxLabel: 'Mute all sounds' - ,name: 'muted' - ,checked: edit ? record.get('muted') : false - ,uncheckedValue: false - ,inputValue: true - } - ,{ - xtype: 'checkbox' - ,boxLabel: 'Trust invalid authority certificates' - ,name: 'trust' - ,checked: edit ? record.get('trust') : false - ,uncheckedValue: false - ,inputValue: true - } - ] - } - ,{ - xtype: 'fieldset' - ,title: 'Advanced' - ,margin: '10 0 0 0' - ,collapsible: true - ,collapsed: true - ,items: [ - { - xtype: 'textarea' - ,fieldLabel: 'Custom Code (read more)' - ,allowBlank: true - ,name: 'js_unread' - ,value: (edit ? record.get('js_unread') : '') - ,anchor: '100%' - ,height: 120 - } - ] - } - ] - } - ] - ,buttons: [ - { - text: 'Cancel' - ,ui: 'decline' - ,handler: function() { - win.close(); - } - } - ,'->' - ,{ - text: (edit ? 'Edit ' : 'Add ') + ' Service' - ,itemId: 'submit' - ,handler: function() { - if ( !win.down('form').isValid() ) return false; - - var formValues = win.down('form').getValues(); - - if ( edit ) { - var oldData = record.getData(); - // If users change the URL, we change the URL of the Webview - if ( record.get('url') !== formValues.url ) Ext.getCmp('tab_'+record.get('id')).down('component').el.dom.loadURL(formValues.url); - - // Save the service - record.set({ - name: formValues.serviceName - ,url: formValues.url - ,logo: formValues.logo - ,align: formValues.align - ,notifications: formValues.notifications - ,muted: formValues.muted - ,trust: formValues.trust - ,js_unread: formValues.js_unread - }); - - // Change the title of the Tab - Ext.getCmp('tab_'+record.get('id')).setTitle(formValues.serviceName); - // Change sound of the Tab - Ext.getCmp('tab_'+record.get('id')).setAudioMuted(formValues.muted); - // Change notifications of the Tab - Ext.getCmp('tab_'+record.get('id')).setNotifications(formValues.notifications); - // Change the icon of the Tab - Ext.getCmp('tab_'+record.get('id')).setIcon(record.get('logo') === '' ? 'resources/icons/custom.png' : record.get('logo')); - // Change the align of the Tab - if ( oldData.align !== formValues.align ) { - if ( formValues.align === 'left' ) { - me.getView().moveBefore(Ext.getCmp('tab_'+record.get('id')), Ext.getCmp('tbfill')); - } else { - me.getView().moveAfter(Ext.getCmp('tab_'+record.get('id')), Ext.getCmp('tbfill')); - } - } - - Ext.getCmp('tab_'+record.get('id')).record = record; - } else { - var service = Ext.create('Rambox.model.Service', { - type: 'custom' - ,logo: formValues.logo - ,name: formValues.serviceName - ,url: formValues.url - ,align: formValues.align - ,notifications: formValues.notifications - ,muted: formValues.muted - ,trust: formValues.trust - ,js_unread: formValues.js_unread - }); - service.save(); - Ext.getStore('Services').add(service); - - var tabData = { - xtype: 'webview' - ,id: 'tab_'+service.get('id') - ,title: service.get('name') - ,icon: service.get('logo') === '' ? 'resources/icons/custom.png' : service.get('logo') - ,src: service.get('url') - ,type: service.get('type') - ,align: formValues.align - ,notifications: formValues.notifications - ,muted: formValues.muted - ,record: service - ,tabConfig: { - service: service - } - }; - - if ( formValues.align === 'left' ) { - var tbfill = me.getView().getTabBar().down('tbfill'); - me.getView().insert(me.getView().getTabBar().items.indexOf(tbfill), tabData).show(); - } else { - me.getView().add(tabData).show(); - } - } - - win.close(); - } - } - ] - }).show(); - - // Make focus to the name field - win.down('textfield[name="serviceName"]').focus(true, 100); + Ext.create('Rambox.view.add.Add', { + record: rec + ,service: Ext.getStore('ServicesList').getById(rec.get('type')) + ,edit: true + }); } ,onSearchRender: function( field ) {