diff --git a/gulpfile.js b/gulpfile.js index b8483b9d..7fd01058 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -94,6 +94,7 @@ const jsFiles = [ path.src + '/js/auto-suggest.js', path.src + '/js/pagelock.js', path.src + '/js/edge.js', + path.src + '/js/dropdown.js', path.src + '/js/init.js' ] diff --git a/src/css/form.css b/src/css/form.css index f7503348..1dd6c52d 100755 --- a/src/css/form.css +++ b/src/css/form.css @@ -1207,7 +1207,6 @@ input[type="range"]:disabled::-moz-range-progress { .form-group .form-group-text { margin-bottom: 0; - /* margin-left: calc(-1px * var(--form-input-border)); */ border-radius: 0; z-index: 1; position: relative; @@ -1300,6 +1299,48 @@ input[type="range"]:disabled::-moz-range-progress { border-radius: 0 var(--theme-radius) var(--theme-radius) 0; } +.form-dropdown { + position: relative; +} + +.form-dropdown-menu { + background-color: rgb(var(--theme-gray-02)); + border-radius: var(--theme-radius); + padding: 0.5em 0; + position: absolute; + top: calc(100% + calc(var(--layout-line-width) * 2)); + left: 0; + width: 100%; + min-width: 12em; + box-shadow: var(--layout-shadow-large); + display: none; + z-index: var(--z-index-dropdown); +} + +.form-dropdown-open .form-dropdown-menu { + display: flex; + flex-direction: column; +} + +.form-dropdown-menu button, +.form-dropdown-menu .button { + border: 0; + border-radius: 0; + margin-bottom: 0; + justify-content: flex-start; +} + +.form-group.nested-button .form-dropdown-menu *:first-child .button, +.form-group.nested-button .form-dropdown-menu *:last-child .button, +.form-group.nested-button .form-dropdown-menu *:first-child input[type="checkbox"]+label, +.form-group.nested-button .form-dropdown-menu *:last-child input[type="checkbox"]+label, +.form-group.nested-button .form-dropdown-menu *:first-child input[type="radio"]+label, +.form-group.nested-button .form-dropdown-menu *:last-child input[type="radio"]+label, +.form-group.nested-button .form-dropdown-menu *:first-child input[type="color"]+label, +.form-group.nested-button .form-dropdown-menu *:last-child input[type="color"]+label { + border-radius: 0; +} + .feedback-wrap { padding: 0.5em 0; position: relative; diff --git a/src/css/utilities.css b/src/css/utilities.css index 5746658a..36f9c0f9 100755 --- a/src/css/utilities.css +++ b/src/css/utilities.css @@ -7,6 +7,10 @@ list-style-type: none; } +.list-unstyled li:not(:last-child) { + margin-bottom: 0; +} + .list-inline li { display: inline-block; } diff --git a/src/css/variables.css b/src/css/variables.css index 31916038..1b1c6f69 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -118,7 +118,8 @@ --z-index-modal: 6000; --z-index-menu: 7000; --z-index-auto-suggest-list: 8000; - --z-index-edge: 9000; + --z-index-dropdown: 9000; + --z-index-edge: 10000; /* breakpoint */ /* can not be used in @media as of yet */ --breakpoint-sm: 550px; diff --git a/src/index.html b/src/index.html index 16e34e0c..6a3009c9 100644 --- a/src/index.html +++ b/src/index.html @@ -80,9 +80,19 @@ - +
Accent Colour can also be changed from the Header area.
@@ -1109,7 +1121,8 @@Take care as some colours may make the Clock, Date and other text unreadable.
@@ -1276,6 +1289,7 @@ + diff --git a/src/js/bookmarks.js b/src/js/bookmarks.js index 48fc3ca3..36b4903c 100644 --- a/src/js/bookmarks.js +++ b/src/js/bookmarks.js @@ -192,23 +192,31 @@ var bookmarks = (function() { mod.add = { link: function(data) { if (data.position.group.new) { - mod.add.group(data); + mod.add.group(); }; mod.all[data.position.destination.group].items.splice(data.position.destination.item, 0, data.link); }, group: function(data) { - var name = data.position.group.name; - if (name != null && typeof name == "string") { - name = name.trim(); - }; - if (name == "" || name == null || name == undefined) { + var makeName = function() { var count = get().length + 1; - name = "Group " + count; + return "Group " + count; + }; + if (data) { + if (data.group.name == null) { + data.group.name = makeName(); + } else if (typeof data.group.name == "string") { + data.group.name = data.group.name.trim(); + if (data.group.name == "") { + data.group.name = makeName(); + }; + }; + mod.all.splice(data.position.destination, 0, data.group); + } else { + mod.all.push({ + name: makeName(), + items: [] + }); }; - mod.all.push({ - name: name, - items: [] - }); } }; diff --git a/src/js/control.js b/src/js/control.js index a3ad68f0..50798617 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -64,7 +64,13 @@ var control = (function() { element: helper.e(".control-link-add"), type: "button", func: function() { - link.add.open(); + link.add.item.open(); + } + }, { + element: helper.e(".control-group-add"), + type: "button", + func: function() { + link.add.group.open(); } }, { element: helper.e(".control-link-edit"), diff --git a/src/js/dropdown.js b/src/js/dropdown.js new file mode 100644 index 00000000..f4711229 --- /dev/null +++ b/src/js/dropdown.js @@ -0,0 +1,113 @@ +var dropdown = (function() { + + var mod = {}; + + mod.open = function() { + helper.setObject({ + object: state.get(), + path: "dropdown", + newValue: true + }); + }; + + mod.close = function() { + helper.setObject({ + object: state.get(), + path: "dropdown", + newValue: false + }); + }; + + mod.toggle = function() { + if (state.get().dropdown) { + helper.setObject({ + object: state.get(), + path: "dropdown", + newValue: false + }); + } else { + helper.setObject({ + object: state.get(), + path: "dropdown", + newValue: true + }); + }; + }; + + var bind = {}; + + bind.formDropdown = function() { + var allFormDropdown = helper.eA(".form-dropdown"); + allFormDropdown.forEach(function(arrayItem, index) { + var formDropdown = arrayItem; + var formDropdownToggle = formDropdown.querySelector(".form-dropdown-toggle"); + var allFormDropdownMenuItem = formDropdown.querySelectorAll(".form-dropdown-menu-item"); + formDropdownToggle.addEventListener("click", function() { + mod.toggle(); + render.toggle(formDropdown); + render.offset(formDropdown); + }, false); + allFormDropdownMenuItem.forEach(function(arrayItem, index) { + arrayItem.addEventListener("click", function() { + mod.close(); + render.close(formDropdown); + }, false); + }); + }); + }; + + var render = {}; + + render.offset = function(formDropdown) { + var formDropdownMenu = formDropdown.querySelector(".form-dropdown-menu"); + var box = formDropdownMenu.getBoundingClientRect(); + if (box.left + box.width > window.innerWidth) { + formDropdownMenu.style.right = "0"; + formDropdownMenu.style.left = "inherit"; + } else { + formDropdownMenu.removeAttribute("style"); + }; + }; + + render.toggle = function(formDropdown) { + if (formDropdown.classList.contains("form-dropdown-open")) { + mod.close(); + helper.removeClass(formDropdown, "form-dropdown-open"); + } else { + mod.open(); + helper.addClass(formDropdown, "form-dropdown-open"); + }; + }; + + render.close = function(formDropdown) { + mod.close(); + helper.removeClass(formDropdown, "form-dropdown-open"); + }; + + render.open = function(formDropdown) { + mod.open(); + helper.addClass(formDropdown, "form-dropdown-open"); + }; + + var close = function() { + mod.close(); + var allFormDropdown = helper.eA(".form-dropdown"); + allFormDropdown.forEach(function(arrayItem, index) { + helper.removeClass(arrayItem, "form-dropdown-open"); + }); + }; + + var init = function() { + mod.close(); + bind.formDropdown(); + }; + + // exposed methods + return { + init: init, + bind: bind, + render: render, + close: close + }; + +})(); diff --git a/src/js/init.js b/src/js/init.js index 73d540b1..ef2fc157 100644 --- a/src/js/init.js +++ b/src/js/init.js @@ -18,4 +18,5 @@ search.init(); header.init(); modal.init(); shade.init(); +dropdown.init(); version.init(); diff --git a/src/js/keyboard.js b/src/js/keyboard.js index 49f956b9..e46375ba 100644 --- a/src/js/keyboard.js +++ b/src/js/keyboard.js @@ -11,10 +11,15 @@ var keyboard = (function() { } else if (state.get().menu) { menu.close(); shade.close(); + } else if (state.get().dropdown) { + dropdown.close(); } else if (state.get().autoSuggest) { autoSuggest.close(); } else if (state.get().link.add) { - link.add.close(); + link.add.item.close(); + shade.close(); + } else if (state.get().group.add) { + link.add.group.close(); shade.close(); } else if (state.get().link.edit) { link.add.close(); @@ -34,6 +39,9 @@ var keyboard = (function() { window.addEventListener("keydown", function(event) { // ctrl+alt+a if (event.ctrlKey && event.altKey && event.keyCode == 65) { + if (state.get().group.add) { + link.add.group.close(); + }; if (!state.get().link.add) { if (state.get().menu) { menu.close(); @@ -41,7 +49,27 @@ var keyboard = (function() { if (state.get().modal) { modal.close(); }; - link.add.open(); + link.add.item.open(); + }; + }; + }, false); + }; + + bind.ctrAltG = function() { + window.addEventListener("keydown", function(event) { + // ctrl+alt+g + if (event.ctrlKey && event.altKey && event.keyCode == 71) { + if (state.get().link.add) { + link.add.item.close(); + }; + if (!state.get().group.add) { + if (state.get().menu) { + menu.close(); + }; + if (state.get().modal) { + modal.close(); + }; + link.add.group.open(); }; }; }, false); @@ -63,7 +91,8 @@ var keyboard = (function() { // ctrl+alt+m if (event.ctrlKey && event.altKey && event.keyCode == 77) { if (state.get().link.add) { - link.add.close(); + link.add.item.close(); + link.add.group.close(); shade.close(); } else if (state.get().modal) { modal.close(); @@ -102,6 +131,7 @@ var keyboard = (function() { var init = function() { bind.esc(); bind.ctrAltA(); + bind.ctrAltG(); bind.ctrAltD(); bind.ctrAltM(); bind.ctrAltE(); diff --git a/src/js/link.js b/src/js/link.js index 1ffec6f1..8e6ba269 100644 --- a/src/js/link.js +++ b/src/js/link.js @@ -11,6 +11,10 @@ var link = (function() { } }; + stagedGroup.init = function() { + stagedGroup.group.items = []; + }; + stagedGroup.reset = function() { stagedGroup.position.origin = null; stagedGroup.position.destination = null; @@ -154,19 +158,37 @@ var link = (function() { }; mod.add = { - open: function() { - helper.setObject({ - object: state.get(), - path: "link.add", - newValue: true - }); + item: { + open: function() { + helper.setObject({ + object: state.get(), + path: "link.add", + newValue: true + }); + }, + close: function() { + helper.setObject({ + object: state.get(), + path: "link.add", + newValue: false + }); + } }, - close: function() { - helper.setObject({ - object: state.get(), - path: "link.add", - newValue: false - }); + group: { + open: function() { + helper.setObject({ + object: state.get(), + path: "group.add", + newValue: true + }); + }, + close: function() { + helper.setObject({ + object: state.get(), + path: "group.add", + newValue: false + }); + } } }; @@ -375,104 +397,18 @@ var link = (function() { }, false); itemGroupControlItemEdit.addEventListener("click", function() { - render.group.edit(copyStagedGroup); + render.edit.group(copyStagedGroup); }, false); itemGroupControlItemRemove.addEventListener("click", function() { - render.group.remove(copyStagedGroup); + render.remove.group(copyStagedGroup); }, false); return group; }, - edit: function(copyStagedGroup) { - stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group)); - stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position)); - var form = render.group.form({ - useStagedGroup: true - }); - var heading = "Edit " + stagedGroup.group.name; - var successAction = function() { - var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup)); - bookmarks.mod.edit.group(copyStagedGroup); - data.save(); - groupAndItems(); - render.focus.group.current.edit(copyStagedGroup); - stagedGroup.reset(); - autoSuggest.close(); - shade.close(); - pagelock.unlock(); - }; - var cancelAction = function() { - stagedGroup.reset(); - autoSuggest.close(); - pagelock.unlock(); - shade.close(); - }; - modal.open({ - heading: heading, - successAction: successAction, - cancelAction: cancelAction, - actionText: "Save", - size: "small", - content: form - }); - shade.open({ - action: function() { - stagedGroup.reset(); - autoSuggest.close(); - pagelock.unlock(); - modal.close(); - } - }); - }, - remove: function(copyStagedGroup) { - stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group)); - stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position)); - var heading; - if (stagedGroup.group.name != null && stagedGroup.group.name != "") { - heading = "Remove " + stagedGroup.group.name + " group"; - } else { - heading = "Remove unnamed group"; - }; - var successAction = function() { - var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup)); - bookmarks.remove.group(copyStagedGroup); - data.save(); - mod.edit.check(); - header.render.button.edit(); - groupAndItems(); - render.focus.group.previous.remove(copyStagedGroup); - stagedGroup.reset(); - control.render.dependents(); - control.render.class(); - shade.close(); - pagelock.unlock(); - }; - var cancelAction = function() { - stagedGroup.reset(); - shade.close(); - pagelock.unlock(); - }; - modal.open({ - heading: heading, - content: "Are you sure you want to remove this group and all the bookmarks within? This can not be undone.", - successAction: successAction, - cancelAction: cancelAction, - actionText: "Remove", - size: "small" - }); - shade.open({ - action: function() { - stagedGroup.reset(); - autoSuggest.close(); - pagelock.unlock(); - modal.close(); - } - }); - pagelock.lock(); - }, form: function(override) { var options = { + new: null, useStagedGroup: null }; if (override) { @@ -495,12 +431,15 @@ var link = (function() { groupFormPositionInputWrap.appendChild(groupFormPositionSelect); groupFormNameInputWrap.appendChild(groupFormInputLabel); groupFormNameInputWrap.appendChild(groupFormInputName); - fieldset.appendChild(groupFormPositionInputWrap); fieldset.appendChild(groupFormNameInputWrap); + fieldset.appendChild(groupFormPositionInputWrap); form.appendChild(fieldset); var makeGroupOptions = function() { var optionCount = bookmarks.get().length; + if (options.new) { + optionCount = optionCount + 1; + }; for (var i = 1; i <= optionCount; i++) { groupFormPositionSelect.appendChild(helper.node("option:" + helper.ordinalNumber(i))); }; @@ -511,10 +450,18 @@ var link = (function() { groupFormInputName.value = stagedGroup.group.name; }; + var setLastPosition = function() { + groupFormPositionSelect.selectedIndex = groupFormPositionSelect.length - 1; + stagedGroup.position.destination = groupFormPositionSelect.selectedIndex; + }; + makeGroupOptions(); if (options.useStagedGroup) { populateForm(); }; + if (options.new) { + setLastPosition(); + }; form.addEventListener("keydown", function(event) { if (event.keyCode == 13) { @@ -681,141 +628,15 @@ var link = (function() { }, false); linkEdit.addEventListener("click", function() { - render.item.edit(copyStagedLink); + render.edit.item(copyStagedLink); }, false); linkRemove.addEventListener("click", function() { - render.item.remove(copyStagedLink); + render.remove.item(copyStagedLink); }, false); return linkItem; }, - edit: function(copyStagedLink) { - stagedLink.link = JSON.parse(JSON.stringify(copyStagedLink.link)); - stagedLink.position = JSON.parse(JSON.stringify(copyStagedLink.position)); - var form = render.item.form({ - useStagedLink: true - }); - var heading; - if (stagedLink.link.name != null && stagedLink.link.name != "") { - heading = "Edit " + stagedLink.link.name; - } else { - heading = "Edit unnamed bookmark"; - }; - var successAction = function() { - var copyStagedLink = JSON.parse(JSON.stringify(stagedLink)); - bookmarks.mod.edit.link(copyStagedLink); - data.save(); - groupAndItems(); - render.focus.item.current.edit(copyStagedLink); - stagedLink.reset(); - autoSuggest.close(); - shade.close(); - pagelock.unlock(); - }; - var cancelAction = function() { - stagedLink.reset(); - autoSuggest.close(); - pagelock.unlock(); - shade.close(); - }; - modal.open({ - heading: heading, - successAction: successAction, - cancelAction: cancelAction, - actionText: "Save", - size: "small", - content: form - }); - shade.open({ - action: function() { - stagedLink.reset(); - autoSuggest.close(); - pagelock.unlock(); - modal.close(); - } - }); - }, - remove: function(copyStagedLink) { - stagedLink.link = JSON.parse(JSON.stringify(copyStagedLink.link)); - stagedLink.position = JSON.parse(JSON.stringify(copyStagedLink.position)); - var heading; - if (stagedLink.link.name != null && stagedLink.link.name != "") { - heading = "Remove " + stagedLink.link.name + " bookmark"; - } else { - heading = "Remove unnamed bookmark"; - }; - var successAction = function() { - var copyStagedLink = JSON.parse(JSON.stringify(stagedLink)); - bookmarks.remove.link(copyStagedLink); - data.save(); - mod.edit.check(); - header.render.button.edit(); - groupAndItems(); - render.focus.item.previous.remove(copyStagedLink); - stagedLink.reset(); - control.render.dependents(); - control.render.class(); - shade.close(); - pagelock.unlock(); - }; - var cancelAction = function() { - stagedLink.reset(); - shade.close(); - pagelock.unlock(); - }; - modal.open({ - heading: heading, - content: "Are you sure you want to remove this bookmark? This can not be undone.", - successAction: successAction, - cancelAction: cancelAction, - actionText: "Remove", - size: "small" - }); - shade.open({ - action: function() { - stagedLink.reset(); - autoSuggest.close(); - pagelock.unlock(); - modal.close(); - } - }); - pagelock.lock(); - }, - display: { - letter: function() { - var html = helper.e("html"); - html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em"); - }, - icon: function() { - var html = helper.e("html"); - html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em"); - } - }, - name: function() { - var html = helper.e("html"); - html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em"); - }, - size: function() { - var html = helper.e("html"); - html.style.setProperty("--link-item-size", state.get().link.item.size + "em"); - }, - tabindex: function() { - var allLinkControlItem = helper.eA(".link-control-item"); - if (state.get().link.edit) { - allLinkControlItem.forEach(function(arrayItem, index) { - arrayItem.tabIndex = 1; - }); - } else { - allLinkControlItem.forEach(function(arrayItem, index) { - arrayItem.tabIndex = -1; - }); - }; - }, - border: function() { - var html = helper.e("html"); - html.style.setProperty("--link-item-border", state.get().link.item.border); - }, form: function(override) { var options = { useStagedLink: null @@ -1156,6 +977,40 @@ var link = (function() { postFocus: displayIconFormGroupText }); return form; + }, + display: { + letter: function() { + var html = helper.e("html"); + html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em"); + }, + icon: function() { + var html = helper.e("html"); + html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em"); + } + }, + name: function() { + var html = helper.e("html"); + html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em"); + }, + size: function() { + var html = helper.e("html"); + html.style.setProperty("--link-item-size", state.get().link.item.size + "em"); + }, + tabindex: function() { + var allLinkControlItem = helper.eA(".link-control-item"); + if (state.get().link.edit) { + allLinkControlItem.forEach(function(arrayItem, index) { + arrayItem.tabIndex = 1; + }); + } else { + allLinkControlItem.forEach(function(arrayItem, index) { + arrayItem.tabIndex = -1; + }); + }; + }, + border: function() { + var html = helper.e("html"); + html.style.setProperty("--link-item-border", state.get().link.item.border); } }; @@ -1400,16 +1255,216 @@ var link = (function() { helper.e(".link-form-text-icon").focus(); }; - var add = { - open: function() { - mod.add.open(); - stagedLink.init(); + render.add = { + item: { + open: function() { + mod.add.item.open(); + stagedLink.init(); + var successAction = function() { + stagedLink.link.timeStamp = new Date().getTime(); + bookmarks.mod.add.link(JSON.parse(JSON.stringify(stagedLink))); + data.save(); + mod.add.item.close(); + groupAndItems(); + stagedLink.reset(); + control.render.dependents(); + control.render.class(); + shade.close(); + pagelock.unlock(); + }; + var cancelAction = function() { + mod.add.item.close(); + stagedLink.reset(); + autoSuggest.close(); + shade.close(); + pagelock.unlock(); + }; + modal.open({ + heading: "Add a new bookmark", + successAction: successAction, + cancelAction: cancelAction, + actionText: "Add", + size: "small", + content: render.item.form() + }); + shade.open({ + action: function() { + mod.add.item.close(); + stagedLink.reset(); + autoSuggest.close(); + modal.close(); + pagelock.unlock(); + } + }); + stagedLink.position.destination.item = helper.e(".link-form-position").selectedIndex; + pagelock.lock(); + }, + close: function() { + mod.add.item.close(); + modal.close(); + stagedLink.reset(); + pagelock.unlock(); + } + }, + group: { + open: function() { + mod.add.group.open(); + stagedGroup.init(); + var successAction = function() { + bookmarks.mod.add.group(JSON.parse(JSON.stringify(stagedGroup))); + data.save(); + mod.add.group.close(); + groupAndItems(); + stagedGroup.reset(); + shade.close(); + pagelock.unlock(); + }; + var cancelAction = function() { + mod.add.group.close(); + stagedGroup.reset(); + autoSuggest.close(); + shade.close(); + pagelock.unlock(); + }; + modal.open({ + heading: "Add a new group", + successAction: successAction, + cancelAction: cancelAction, + actionText: "Add", + size: "small", + content: render.group.form({ + new: true + }) + }); + shade.open({ + action: function() { + mod.add.group.close(); + stagedGroup.reset(); + autoSuggest.close(); + modal.close(); + pagelock.unlock(); + } + }); + stagedGroup.position.destination = helper.e(".group-form-position").selectedIndex; + pagelock.lock(); + }, + close: function() { + mod.add.group.close(); + modal.close(); + stagedGroup.reset(); + pagelock.unlock(); + } + } + }; + + render.edit = { + item: function(copyStagedLink) { + stagedLink.link = JSON.parse(JSON.stringify(copyStagedLink.link)); + stagedLink.position = JSON.parse(JSON.stringify(copyStagedLink.position)); + var form = render.item.form({ + useStagedLink: true + }); + var heading; + if (stagedLink.link.name != null && stagedLink.link.name != "") { + heading = "Edit " + stagedLink.link.name; + } else { + heading = "Edit unnamed bookmark"; + }; var successAction = function() { - stagedLink.link.timeStamp = new Date().getTime(); - bookmarks.mod.add.link(JSON.parse(JSON.stringify(stagedLink))); + var copyStagedLink = JSON.parse(JSON.stringify(stagedLink)); + bookmarks.mod.edit.link(copyStagedLink); data.save(); - mod.add.close(); groupAndItems(); + render.focus.item.current.edit(copyStagedLink); + stagedLink.reset(); + autoSuggest.close(); + shade.close(); + pagelock.unlock(); + }; + var cancelAction = function() { + stagedLink.reset(); + autoSuggest.close(); + pagelock.unlock(); + shade.close(); + }; + modal.open({ + heading: heading, + successAction: successAction, + cancelAction: cancelAction, + actionText: "Save", + size: "small", + content: form + }); + shade.open({ + action: function() { + stagedLink.reset(); + autoSuggest.close(); + pagelock.unlock(); + modal.close(); + } + }); + }, + group: function(copyStagedGroup) { + stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group)); + stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position)); + var form = render.group.form({ + useStagedGroup: true + }); + var heading = "Edit " + stagedGroup.group.name; + var successAction = function() { + var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup)); + bookmarks.mod.edit.group(copyStagedGroup); + data.save(); + groupAndItems(); + render.focus.group.current.edit(copyStagedGroup); + stagedGroup.reset(); + autoSuggest.close(); + shade.close(); + pagelock.unlock(); + }; + var cancelAction = function() { + stagedGroup.reset(); + autoSuggest.close(); + pagelock.unlock(); + shade.close(); + }; + modal.open({ + heading: heading, + successAction: successAction, + cancelAction: cancelAction, + actionText: "Save", + size: "small", + content: form + }); + shade.open({ + action: function() { + stagedGroup.reset(); + autoSuggest.close(); + pagelock.unlock(); + modal.close(); + } + }); + } + }; + + render.remove = { + item: function(copyStagedLink) { + stagedLink.link = JSON.parse(JSON.stringify(copyStagedLink.link)); + stagedLink.position = JSON.parse(JSON.stringify(copyStagedLink.position)); + var heading; + if (stagedLink.link.name != null && stagedLink.link.name != "") { + heading = "Remove " + stagedLink.link.name + " bookmark"; + } else { + heading = "Remove unnamed bookmark"; + }; + var successAction = function() { + var copyStagedLink = JSON.parse(JSON.stringify(stagedLink)); + bookmarks.remove.link(copyStagedLink); + data.save(); + mod.edit.check(); + header.render.button.edit(); + groupAndItems(); + render.focus.item.previous.remove(copyStagedLink); stagedLink.reset(); control.render.dependents(); control.render.class(); @@ -1417,37 +1472,92 @@ var link = (function() { pagelock.unlock(); }; var cancelAction = function() { - mod.add.close(); stagedLink.reset(); - autoSuggest.close(); shade.close(); pagelock.unlock(); }; modal.open({ - heading: "Add a new bookmark", + heading: heading, + content: "Are you sure you want to remove this bookmark? This can not be undone.", successAction: successAction, cancelAction: cancelAction, - actionText: "Add", - size: "small", - content: render.item.form() + actionText: "Remove", + size: "small" }); shade.open({ action: function() { - mod.add.close(); stagedLink.reset(); autoSuggest.close(); pagelock.unlock(); modal.close(); } }); - stagedLink.position.destination.item = helper.e(".link-form-position").selectedIndex; pagelock.lock(); }, - close: function() { - mod.add.close(); - modal.close(); - stagedLink.reset(); - pagelock.unlock(); + group: function(copyStagedGroup) { + stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group)); + stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position)); + var heading; + if (stagedGroup.group.name != null && stagedGroup.group.name != "") { + heading = "Remove " + stagedGroup.group.name + " group"; + } else { + heading = "Remove unnamed group"; + }; + var successAction = function() { + var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup)); + bookmarks.remove.group(copyStagedGroup); + data.save(); + mod.edit.check(); + header.render.button.edit(); + groupAndItems(); + render.focus.group.previous.remove(copyStagedGroup); + stagedGroup.reset(); + control.render.dependents(); + control.render.class(); + shade.close(); + pagelock.unlock(); + }; + var cancelAction = function() { + stagedGroup.reset(); + shade.close(); + pagelock.unlock(); + }; + modal.open({ + heading: heading, + content: "Are you sure you want to remove this group and all the bookmarks within? This can not be undone.", + successAction: successAction, + cancelAction: cancelAction, + actionText: "Remove", + size: "small" + }); + shade.open({ + action: function() { + stagedGroup.reset(); + autoSuggest.close(); + pagelock.unlock(); + modal.close(); + } + }); + pagelock.lock(); + } + }; + + var add = { + item: { + open: function() { + render.add.item.open(); + }, + close: function() { + render.add.item.close(); + } + }, + group: { + open: function() { + render.add.group.open(); + }, + close: function() { + render.add.group.close(); + } } }; @@ -1471,7 +1581,8 @@ var link = (function() { }; var init = function() { - mod.add.close(); + mod.add.item.close(); + mod.add.group.close(); groupAndItems(); render.group.size(); render.item.size(); @@ -1491,7 +1602,8 @@ var link = (function() { edit: edit, tabindex: tabindex, groupAndItems: groupAndItems, - stagedLink: stagedLink + stagedLink: stagedLink, + stagedGroup: stagedGroup }; })(); diff --git a/src/js/state.js b/src/js/state.js index 24b587a3..8d4c2312 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -179,7 +179,8 @@ var state = (function() { name: { show: true, size: 1 - } + }, + add: false }, layout: { alignment: "centercenter", @@ -235,6 +236,7 @@ var state = (function() { search: false, menu: false, modal: false, + dropdown: false, autoSuggest: false }; diff --git a/src/js/update.js b/src/js/update.js index cfe4f279..e8e9aafb 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -628,8 +628,10 @@ var update = (function() { name: { show: true, size: 1 - } + }, + add: false }; + data.state.dropdown = false; return data; } };