From 2376a298d048cc84c45ba0f7cda0fcdc256ed156 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cezary=20Kluczy=C5=84ski?= Date: Fri, 3 Apr 2015 21:40:47 +0200 Subject: [PATCH] Panel: toggling between preview and edit state --- src/qunit-desktop-notifications.css | 22 +++++++ src/qunit-desktop-notifications.js | 91 +++++++++++++++++++++++++++-- tests/functional/panel.js | 51 ++++++++++++++++ 3 files changed, 158 insertions(+), 6 deletions(-) diff --git a/src/qunit-desktop-notifications.css b/src/qunit-desktop-notifications.css index 5395482..417b392 100644 --- a/src/qunit-desktop-notifications.css +++ b/src/qunit-desktop-notifications.css @@ -29,6 +29,28 @@ margin-bottom: .4em; } + #qunit-desktop-notifications-panel .events-wrapper { + margin: 0; + padding: 0; + list-style-type: none; + display: none; + } + + #qunit-desktop-notifications-panel.edit .events-wrapper { + display: block; + } + + #qunit-desktop-notifications-panel .events-wrapper li:first-child { + font-size: 13px; + margin-bottom: .4em; + padding-left: .2em; + } + + #qunit-desktop-notifications-panel .events-wrapper li input, + #qunit-desktop-notifications-panel .events-wrapper li label { + cursor: pointer; + } + #qunit-desktop-notifications-panel .buttons-wrapper { text-align: right; } diff --git a/src/qunit-desktop-notifications.js b/src/qunit-desktop-notifications.js index 3721f2c..e814819 100644 --- a/src/qunit-desktop-notifications.js +++ b/src/qunit-desktop-notifications.js @@ -20,8 +20,10 @@ self = QUnitDesktopNotifications = { $save: null, $cancel: null, $select: null, + $delete: null, $profilesLabel: null, $buttonsWrapper: null, + $list: null, config: { urlConfig: true, disabled: false @@ -300,6 +302,7 @@ QUnitDesktopNotifications.profiles.refresh = function () { QUnitDesktopNotifications.profiles.refreshVisible = function () { this.refreshLabels(); this.refreshSelect(); + this.refreshConfig(); this.refreshButtons(); } @@ -341,32 +344,95 @@ QUnitDesktopNotifications.profiles.refreshLabels = function () { self.$panel.appendChild( self.$profilesLabel ); }; +/** Create HTML for profile config. */ +QUnitDesktopNotifications.profiles.refreshConfig = function () { + /** List of QUnit events names. */ + var keys = Object.keys( self.log ); + + /** Declare variable early. */ + var $item, $checkbox, $label, eventName, checkboxName; + + /** Create wrapper. */ + self.$list = document.createElement( "ul" ); + self.$list.className = "events-wrapper"; + + /** Create a item describing that's the deal with the list, and add it to wrapper. */ + $item = document.createElement( "li" ); + $item.innerHTML = "Notify on those QUnit events:"; + self.$list.appendChild( $item ); + + /** Go over all QUnit events names. */ + for ( var i = 0; i < keys.length; i++ ) { + eventName = keys[ i ]; + checkboxName = "qunit-dn-checkbox-" + eventName; + + /** Create list item. */ + $item = document.createElement( "li" ); + + /** Create checkbox. */ + $checkbox = document.createElement( "input" ); + $checkbox.setAttribute( "type", "checkbox" ); + $checkbox.setAttribute( "id", checkboxName ); + + /** Create label for checkbox. */ + $label = document.createElement( "label" ); + $label.innerHTML = eventName; + $label.setAttribute( "for", checkboxName ); + + /** Insert checkbox and label into list item. */ + $item.appendChild( $checkbox ); + $item.appendChild( $label ); + + /** Insert list item into wrapper. */ + self.$list.appendChild( $item ); + } + + /** Insert wrapper into panel. */ + self.$panel.appendChild( self.$list ); +}; + /** Adds buttons to panel. */ QUnitDesktopNotifications.profiles.refreshButtons = function () { + var profiles = this; + if ( ! self.$buttonsWrapper ) { /** Create buttons wrapper, and add class. */ self.$buttonsWrapper = document.createElement( "div" ); self.$buttonsWrapper.className = "buttons-wrapper"; + /** Create "Edit" button, add label, and class. */ + self.$edit = document.createElement( "button" ); + self.$edit.innerHTML = "Edit"; + self.$edit.className = "button-edit preview"; + + self.$edit.addEventListener( "click", function () { + profiles.edit(); + }); + + /** Create "Delete" button, add label, and class. */ + self.$delete = document.createElement( "button" ); + self.$delete.innerHTML = "Delete"; + self.$delete.className = "button-delete preview"; + /** Create "Save" button, add label, and class. */ self.$save = document.createElement( "button" ); self.$save.innerHTML = "Save"; self.$save.className = "button-save edit"; - /** Create "Edit button, add label, and class. */ - self.$edit = document.createElement( "button" ); - self.$edit.innerHTML = "Edit"; - self.$edit.className = "button-edit preview"; - /** Create "Cancel" button, add label, and class. */ self.$cancel = document.createElement( "button" ); self.$cancel.innerHTML = "Cancel"; self.$cancel.className = "button-cancel edit"; + self.$cancel.addEventListener( "click", function () { + profiles.cancel(); + }); + /** Insert buttons into wrapper. */ self.$buttonsWrapper.appendChild( self.$save ); - self.$buttonsWrapper.appendChild( self.$edit ); self.$buttonsWrapper.appendChild( self.$cancel ); + self.$buttonsWrapper.appendChild( self.$edit ); + self.$buttonsWrapper.appendChild( self.$delete ); } /** Insert wrapper into panel. */ @@ -409,6 +475,19 @@ QUnitDesktopNotifications.profiles.profile = function ( name, values ) { } }; +QUnitDesktopNotifications.profiles.edit = function () { + self.$panel.className = "edit"; + self.$select.setAttribute( "disabled", "disabled" ); +}; + +QUnitDesktopNotifications.profiles.save = function () { +}; + +QUnitDesktopNotifications.profiles.cancel = function () { + self.$panel.className = "preview"; + self.$select.removeAttribute( "disabled" ); +}; + /** In case QUnit was not found, generate error and don't initialize desktop notifications. */ if ( typeof window.QUnit === "undefined" ) { console.error( "QUnit Desktop Notifications should be included after QUnit." ); diff --git a/tests/functional/panel.js b/tests/functional/panel.js index 6aa0b05..4795896 100644 --- a/tests/functional/panel.js +++ b/tests/functional/panel.js @@ -105,6 +105,13 @@ define([ assert.ok( visible, "Select is visible." ); }) .end() + /** Check events wrapper visibility. */ + .findByCssSelector( ".events-wrapper" ) + .isDisplayed() + .then( function ( visible ) { + assert.notOk( visible, "Events wrapper is not visible." ); + }) + .end() /** Check buttons wrapper visibility. */ .findByCssSelector( ".buttons-wrapper" ) .isDisplayed() @@ -120,6 +127,50 @@ define([ }) .end() .end(); + }, + /** Check if the panel is created on first click on "Desktop Notifications" link. */ + "Toggling between editing and previewing.": function () { + var self = this; + + return this.remote + .get( boilerplate ) + .setFindTimeout( 1000 ) + /** Open panel by clicking entry. */ + .findById( "qunit-desktop-notifications-entry" ) + .click() + .end() + /** Find panel entry and click it. */ + .findById( "qunit-desktop-notifications-panel" ) + /** Check events wrapper visibility. */ + .findByCssSelector( ".events-wrapper" ) + .isDisplayed() + .then( function ( visible ) { + assert.notOk( visible, "Events wrapper is not visible." ); + }) + .end() + /** Click "Edit" button. */ + .findByCssSelector( ".button-edit" ) + .click() + .end() + /** Check events wrapper visibility again. */ + .findByCssSelector( ".events-wrapper" ) + .isDisplayed() + .then( function ( visible ) { + assert.ok( visible, "Events wrapper is visible after \"Edit\" was clicked." ); + }) + .end() + /** Click "Cancel" button. */ + .findByCssSelector( ".button-cancel" ) + .click() + .end() + /** Check events wrapper visibility again. */ + .findByCssSelector( ".events-wrapper" ) + .isDisplayed() + .then( function ( visible ) { + assert.notOk( visible, "Events wrapper is not visible after \"Cancel\" was clicked." ); + }) + .end() + .end(); } }); }); \ No newline at end of file