Skip to content

Commit

Permalink
Panel: toggling between preview and edit state
Browse files Browse the repository at this point in the history
  • Loading branch information
@cezarykluczynski
cezarykluczynski committed Apr 3, 2015
1 parent bf1f4ea commit 2376a29
Show file tree
Hide file tree
Showing 3 changed files with 158 additions and 6 deletions.
22 changes: 22 additions & 0 deletions src/qunit-desktop-notifications.css
View file
Expand Up @@ -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;
}
Expand Down
91 changes: 85 additions & 6 deletions src/qunit-desktop-notifications.js
View file
Expand Up @@ -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
Expand Down Expand Up @@ -300,6 +302,7 @@ QUnitDesktopNotifications.profiles.refresh = function () {
QUnitDesktopNotifications.profiles.refreshVisible = function () {
this.refreshLabels();
this.refreshSelect();
this.refreshConfig();
this.refreshButtons();
}

Expand Down Expand Up @@ -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. */
Expand Down Expand Up @@ -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." );
Expand Down
51 changes: 51 additions & 0 deletions tests/functional/panel.js
View file
Expand Up @@ -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()
Expand All @@ -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();
}
});
});

0 comments on commit 2376a29

Please sign in to comment.