mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-06-26 04:21:38 +02:00
[refactor] improve link render
This commit is contained in:
zombieFox
parent
41ee9dee86
commit
cffa73c1fa
@ -75,7 +75,7 @@
|
||||
<div class="form-group nested-button mb-0">
|
||||
<div class="input-wrap input-button input-hide py-0">
|
||||
<input id="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
|
||||
<label for="control-link-edit" class=" mb-0">Edit</label>
|
||||
<label for="control-link-edit" class="mb-0">Edit</label>
|
||||
</div>
|
||||
<button class="control-link-add button" tabindex="1">
|
||||
<span class="button-text">Add</span>
|
||||
|
||||
@ -205,7 +205,7 @@ var autoSuggest = (function() {
|
||||
helper.addClass(icon, "fab");
|
||||
};
|
||||
anchor.addEventListener("click", function() {
|
||||
link.autoSuggestIconAction(arrayItem);
|
||||
link.render.autoSuggestIconAction(arrayItem);
|
||||
}, false);
|
||||
var text = helper.node("span:" + arrayItem.label + "|class:auto-suggest-icon-text");
|
||||
anchor.appendChild(icon);
|
||||
|
||||
@ -11,7 +11,7 @@ var control = (function() {
|
||||
element: helper.e(".control-link-add"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
link.add();
|
||||
link.render.add();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-edit"),
|
||||
@ -26,7 +26,7 @@ var control = (function() {
|
||||
type: "color",
|
||||
func: function() {
|
||||
theme.render.accent.color();
|
||||
link.clear();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}
|
||||
@ -1875,7 +1875,7 @@ var control = (function() {
|
||||
path: "link.item.order",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
link.clear();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}
|
||||
@ -1884,7 +1884,7 @@ var control = (function() {
|
||||
path: "link.item.order",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
link.clear();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}
|
||||
@ -1923,7 +1923,7 @@ var control = (function() {
|
||||
path: "link.newTab",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
link.clear();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}
|
||||
@ -1946,7 +1946,7 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
bookmarks.sort("letter");
|
||||
link.clear();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}
|
||||
@ -1955,7 +1955,7 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
bookmarks.sort("icon");
|
||||
link.clear();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}
|
||||
@ -1964,7 +1964,7 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
bookmarks.sort("name");
|
||||
link.clear();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}
|
||||
@ -1972,8 +1972,8 @@ var control = (function() {
|
||||
element: helper.e(".control-link-accent-clear"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
link.accent.clear();
|
||||
link.clear();
|
||||
link.mod.accent.clear();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}
|
||||
@ -1981,8 +1981,8 @@ var control = (function() {
|
||||
element: helper.e(".control-link-accent-set"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
link.accent.set();
|
||||
link.clear();
|
||||
link.mod.accent.rainbow();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}
|
||||
@ -2065,7 +2065,7 @@ var control = (function() {
|
||||
func: function() {
|
||||
theme.render.accent.random();
|
||||
theme.render.accent.color();
|
||||
link.clear();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}
|
||||
@ -2798,7 +2798,6 @@ var control = (function() {
|
||||
if (bookmarks.get().length > 0) {
|
||||
disable.input(".control-link-edit", false);
|
||||
} else {
|
||||
disable.input(".control-link-edit", true);
|
||||
disable.input(".control-link-edit", false);
|
||||
};
|
||||
};
|
||||
|
||||
@ -147,6 +147,11 @@ var header = (function() {
|
||||
}
|
||||
};
|
||||
action[state.get().header.button.style]();
|
||||
},
|
||||
edit: function() {
|
||||
if (!state.get().link.edit) {
|
||||
helper.e(".control-link-edit").checked = false;
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -36,7 +36,7 @@ var keyboard = (function() {
|
||||
if (event.ctrlKey && event.altKey && event.keyCode == 65) {
|
||||
if (state.get().link.show) {
|
||||
menu.close();
|
||||
link.add();
|
||||
link.render.add();
|
||||
};
|
||||
};
|
||||
}, false);
|
||||
@ -97,7 +97,7 @@ var keyboard = (function() {
|
||||
if (state.get().theme.accent.random.active && event.ctrlKey && event.altKey && event.keyCode == 82) {
|
||||
theme.render.accent.random();
|
||||
theme.render.accent.color();
|
||||
link.clear();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
data.save();
|
||||
|
||||
674
src/js/link.js
674
src/js/link.js
@ -1,6 +1,8 @@
|
||||
var link = (function() {
|
||||
|
||||
var bind = function() {
|
||||
var bind = {};
|
||||
|
||||
bind.sort = function() {
|
||||
sortable(".link-area", {
|
||||
items: ".link-item",
|
||||
handle: ".link-control-item-handle",
|
||||
@ -12,25 +14,11 @@ var link = (function() {
|
||||
});
|
||||
};
|
||||
|
||||
var _previousFocusLink = null;
|
||||
var _previousFocus = null;
|
||||
|
||||
var _returnToPreviousFocusLink = function() {
|
||||
if (_previousFocusLink != null) {
|
||||
var linkPanelFront = helper.eA(".link-panel-front");
|
||||
if (linkPanelFront.length > 0) {
|
||||
if (_previousFocusLink >= 0) {
|
||||
linkPanelFront[_previousFocusLink].focus();
|
||||
} else {
|
||||
linkPanelFront[0].focus();
|
||||
};
|
||||
} else {
|
||||
helper.e("body").focus();
|
||||
};
|
||||
_previousFocusLink = null;
|
||||
};
|
||||
};
|
||||
var stagedLink = {};
|
||||
|
||||
var stagedBookmarkData = {
|
||||
stagedLink.data = {
|
||||
display: null,
|
||||
letter: null,
|
||||
icon: {
|
||||
@ -51,45 +39,47 @@ var link = (function() {
|
||||
}
|
||||
};
|
||||
|
||||
var initStagedBookmarkData = function() {
|
||||
link.stagedBookmarkData.display = "letter";
|
||||
link.stagedBookmarkData.accent.override = false;
|
||||
stagedLink.init = function() {
|
||||
stagedLink.data.display = "letter";
|
||||
stagedLink.data.accent.override = false;
|
||||
};
|
||||
|
||||
var resetStagedBookmarkData = function() {
|
||||
link.stagedBookmarkData.display = null;
|
||||
link.stagedBookmarkData.letter = null;
|
||||
link.stagedBookmarkData.icon.name = null;
|
||||
link.stagedBookmarkData.icon.prefix = null;
|
||||
link.stagedBookmarkData.icon.label = null;
|
||||
link.stagedBookmarkData.name = null;
|
||||
link.stagedBookmarkData.url = null;
|
||||
link.stagedBookmarkData.timeStamp = null;
|
||||
link.stagedBookmarkData.accent.override = null;
|
||||
link.stagedBookmarkData.accent.color.r = null;
|
||||
link.stagedBookmarkData.accent.color.g = null;
|
||||
link.stagedBookmarkData.accent.color.b = null;
|
||||
stagedLink.reset = function() {
|
||||
stagedLink.data.display = null;
|
||||
stagedLink.data.letter = null;
|
||||
stagedLink.data.icon.name = null;
|
||||
stagedLink.data.icon.prefix = null;
|
||||
stagedLink.data.icon.label = null;
|
||||
stagedLink.data.name = null;
|
||||
stagedLink.data.url = null;
|
||||
stagedLink.data.timeStamp = null;
|
||||
stagedLink.data.accent.override = null;
|
||||
stagedLink.data.accent.color.r = null;
|
||||
stagedLink.data.accent.color.g = null;
|
||||
stagedLink.data.accent.color.b = null;
|
||||
};
|
||||
|
||||
var add = function() {
|
||||
initStagedBookmarkData();
|
||||
var form = _makeLinkForm();
|
||||
var render = {};
|
||||
|
||||
render.add = function() {
|
||||
stagedLink.init();
|
||||
var form = render.form();
|
||||
modal.render({
|
||||
heading: "Add a new bookmark",
|
||||
successAction: function() {
|
||||
link.stagedBookmarkData.timeStamp = new Date().getTime();
|
||||
bookmarks.add(JSON.parse(JSON.stringify(link.stagedBookmarkData)));
|
||||
stagedLink.data.timeStamp = new Date().getTime();
|
||||
bookmarks.add(JSON.parse(JSON.stringify(stagedLink.data)));
|
||||
data.save();
|
||||
clear();
|
||||
render.clear();
|
||||
render.item.all();
|
||||
render.tabIndex();
|
||||
sortable(".link-area");
|
||||
control.dependents();
|
||||
control.render();
|
||||
resetStagedBookmarkData();
|
||||
sortable(".link-area");
|
||||
stagedLink.reset();
|
||||
},
|
||||
cancelAction: function() {
|
||||
resetStagedBookmarkData();
|
||||
stagedLink.reset();
|
||||
autoSuggest.destroy();
|
||||
},
|
||||
actionText: "Add",
|
||||
@ -98,10 +88,10 @@ var link = (function() {
|
||||
});
|
||||
};
|
||||
|
||||
var edit = function(bookmarkData) {
|
||||
link.stagedBookmarkData = JSON.parse(JSON.stringify(bookmarkData));
|
||||
var form = _makeLinkForm();
|
||||
if (link.stagedBookmarkData.display == "letter" || link.stagedBookmarkData.display == null) {
|
||||
render.edit = function(bookmarkData) {
|
||||
stagedLink.data = JSON.parse(JSON.stringify(bookmarkData));
|
||||
var form = render.form();
|
||||
if (stagedLink.data.display == "letter" || stagedLink.data.display == null) {
|
||||
form.querySelector(".link-form-input-letter").removeAttribute("disabled");
|
||||
form.querySelector(".link-form-input-icon").setAttribute("disabled", "");
|
||||
form.querySelector(".form-group-text").setAttribute("disabled", "");
|
||||
@ -109,7 +99,7 @@ var link = (function() {
|
||||
form.querySelector(".link-form-input-helper-icon").setAttribute("disabled", "");
|
||||
form.querySelector(".link-form-icon-clear").setAttribute("disabled", "");
|
||||
form.querySelector(".link-form-text-icon").tabIndex = -1;
|
||||
} else if (link.stagedBookmarkData.display == "icon") {
|
||||
} else if (stagedLink.data.display == "icon") {
|
||||
form.querySelector(".link-form-input-letter").setAttribute("disabled", "");
|
||||
form.querySelector(".link-form-input-icon").removeAttribute("disabled");
|
||||
form.querySelector(".form-group-text").removeAttribute("disabled");
|
||||
@ -119,31 +109,31 @@ var link = (function() {
|
||||
form.querySelector(".link-form-input-display-icon").checked = true;
|
||||
form.querySelector(".link-form-text-icon").tabIndex = 1;
|
||||
};
|
||||
if (link.stagedBookmarkData.icon.name != null && link.stagedBookmarkData.icon.prefix != null && link.stagedBookmarkData.icon.label != null) {
|
||||
form.querySelector(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + link.stagedBookmarkData.icon.prefix + " fa-" + link.stagedBookmarkData.icon.name));
|
||||
if (stagedLink.data.icon.name != null && stagedLink.data.icon.prefix != null && stagedLink.data.icon.label != null) {
|
||||
form.querySelector(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + stagedLink.data.icon.prefix + " fa-" + stagedLink.data.icon.name));
|
||||
};
|
||||
form.querySelector(".link-form-input-letter").value = link.stagedBookmarkData.letter;
|
||||
form.querySelector(".link-form-input-icon").value = link.stagedBookmarkData.icon.label;
|
||||
form.querySelector(".link-form-input-name").value = link.stagedBookmarkData.name;
|
||||
form.querySelector(".link-form-input-url").value = link.stagedBookmarkData.url;
|
||||
if (link.stagedBookmarkData.accent.override) {
|
||||
form.querySelector(".link-form-input-color").value = helper.rgbToHex(link.stagedBookmarkData.accent.color);
|
||||
form.querySelector(".link-form-input-letter").value = stagedLink.data.letter;
|
||||
form.querySelector(".link-form-input-icon").value = stagedLink.data.icon.label;
|
||||
form.querySelector(".link-form-input-name").value = stagedLink.data.name;
|
||||
form.querySelector(".link-form-input-url").value = stagedLink.data.url;
|
||||
if (stagedLink.data.accent.override) {
|
||||
form.querySelector(".link-form-input-color").value = helper.rgbToHex(stagedLink.data.accent.color);
|
||||
};
|
||||
modal.render({
|
||||
heading: "Edit " + link.stagedBookmarkData.name,
|
||||
heading: "Edit " + stagedLink.data.name,
|
||||
successAction: function() {
|
||||
bookmarks.edit(JSON.parse(JSON.stringify(link.stagedBookmarkData)));
|
||||
bookmarks.edit(JSON.parse(JSON.stringify(stagedLink.data)));
|
||||
data.save();
|
||||
clear();
|
||||
render.clear();
|
||||
render.item.all();
|
||||
render.tabIndex();
|
||||
_returnToPreviousFocusLink();
|
||||
resetStagedBookmarkData();
|
||||
render.previousFocus();
|
||||
sortable(".link-area");
|
||||
stagedLink.reset();
|
||||
},
|
||||
cancelAction: function() {
|
||||
_returnToPreviousFocusLink();
|
||||
resetStagedBookmarkData();
|
||||
render.previousFocus();
|
||||
stagedLink.reset();
|
||||
},
|
||||
actionText: "Save",
|
||||
size: "small",
|
||||
@ -151,171 +141,110 @@ var link = (function() {
|
||||
});
|
||||
};
|
||||
|
||||
var remove = function(bookmarkData) {
|
||||
render.remove = function(bookmarkData) {
|
||||
modal.render({
|
||||
heading: "Remove " + bookmarkData.name + " bookmark",
|
||||
content: "Are you sure you want to remove this bookmark? This can not be undone.",
|
||||
successAction: function() {
|
||||
_previousFocusLink = _previousFocusLink - 1;
|
||||
_previousFocus = _previousFocus - 1;
|
||||
bookmarks.remove(bookmarkData);
|
||||
_checkCount();
|
||||
mod.edit();
|
||||
header.render.button.edit();
|
||||
data.save();
|
||||
clear();
|
||||
render.clear();
|
||||
render.item.all();
|
||||
render.previousFocus();
|
||||
sortable(".link-area");
|
||||
control.dependents();
|
||||
control.render();
|
||||
_returnToPreviousFocusLink();
|
||||
sortable(".link-area");
|
||||
},
|
||||
cancelAction: function() {
|
||||
_returnToPreviousFocusLink();
|
||||
render.previousFocus();
|
||||
},
|
||||
actionText: "Remove",
|
||||
size: "small"
|
||||
});
|
||||
};
|
||||
|
||||
var _checkCount = function() {
|
||||
if (bookmarks.get().length <= 0) {
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "link.edit",
|
||||
newValue: false
|
||||
render.clear = function() {
|
||||
var linkArea = helper.e(".link-area");
|
||||
while (linkArea.lastChild) {
|
||||
linkArea.removeChild(linkArea.lastChild);
|
||||
};
|
||||
};
|
||||
|
||||
render.area = {
|
||||
width: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
|
||||
}
|
||||
};
|
||||
|
||||
render.item = {
|
||||
all: function() {
|
||||
var linkArea = helper.e(".link-area");
|
||||
var bookmarksToRender = false;
|
||||
if (state.get().search) {
|
||||
bookmarksToRender = search.get();
|
||||
} else {
|
||||
bookmarksToRender = bookmarks.get();
|
||||
};
|
||||
var action = {
|
||||
bookmarks: function(array) {
|
||||
array.forEach(function(arrayItem, index) {
|
||||
linkArea.appendChild(render.item.link(arrayItem, index));
|
||||
});
|
||||
},
|
||||
empty: {
|
||||
search: function() {
|
||||
linkArea.appendChild(render.empty.search());
|
||||
},
|
||||
bookmarks: function() {
|
||||
linkArea.appendChild(render.empty.bookmarks());
|
||||
}
|
||||
}
|
||||
};
|
||||
// if searching
|
||||
if (state.get().search) {
|
||||
// if bookmarks exist to be searched
|
||||
if (bookmarksToRender.total > 0) {
|
||||
// if matching bookmarks found
|
||||
if (bookmarksToRender.matching.length > 0) {
|
||||
action.bookmarks(bookmarksToRender.matching);
|
||||
} else {
|
||||
action.empty.search();
|
||||
};
|
||||
} else {
|
||||
action.empty.bookmarks();
|
||||
};
|
||||
} else {
|
||||
// if bookmarks exist
|
||||
if (bookmarksToRender.length > 0) {
|
||||
action.bookmarks(bookmarksToRender);
|
||||
} else {
|
||||
action.empty.bookmarks();
|
||||
};
|
||||
};
|
||||
|
||||
var _makeLinkForm = function() {
|
||||
var form = helper.node("form|class:link-form");
|
||||
var fieldset = helper.node("fieldset");
|
||||
var letterFormIndet = helper.node("div|class:form-indent");
|
||||
var letterInputWrap = helper.node("div|class:input-wrap");
|
||||
var letterInput = helper.node("input|type:text,class:link-form-input-letter mb-0,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
|
||||
var iconFormIndet = helper.node("div|class:form-indent");
|
||||
var iconFormGroupWrap = helper.node("div|class:input-wrap");
|
||||
var iconFormGroup = helper.node("div|class:form-group auto-suggest-wrapper");
|
||||
var iconInput = helper.node("input|type:text,class:link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
|
||||
var iconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1,disabled");
|
||||
var iconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
|
||||
var iconFormGroupClearIcon = helper.node("span|class:icon-close");
|
||||
var iconPara = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-helper-icon input-helper small muted,disabled");
|
||||
var nameInputWrap = helper.node("div|class:input-wrap");
|
||||
var nameLabel = helper.node("label:Name|for:link-form-input-name");
|
||||
var nameInput = helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
|
||||
var urlInputWrap = helper.node("div|class:input-wrap");
|
||||
var urlLabel = helper.node("label:URL|for:link-form-input-url");
|
||||
var urlInput = helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
|
||||
var colorWrap = helper.node("div|class:input-wrap");
|
||||
var colorFormGroup = helper.node("div|class:form-group");
|
||||
var colorLabel = helper.node("label:Accent override|for:link-form-input-color");
|
||||
var colorInput = helper.node("input|id:link-form-input-color,class:link-form-input-color mb-0,type:color,value:" + helper.rgbToHex(state.get().theme.accent.current) + ",tabindex:1");
|
||||
var colorButtonRefresh = helper.node("button|class:button mb-0,type:button,tabindex:1");
|
||||
var colorButtonRefreshIcon = helper.node("span|class:icon-refresh");
|
||||
var colorPara = helper.node("p:Use this colour to override the global Accent colour.|class:input-helper small muted");
|
||||
var letterRadioInputWrap = helper.node("div|class:input-wrap");
|
||||
var letterRadioInput = helper.node("input|class:link-form-input-display-letter,id:link-form-input-display-letter,type:radio,name:link-form-input-display,tabindex:1,checked,value:letter");
|
||||
var letterRadioLable = helper.node("label:Letters|for:link-form-input-display-letter");
|
||||
var iconRadioInputWrap = helper.node("div|class:input-wrap");
|
||||
var iconRadioInput = helper.node("input|class:link-form-input-display-icon,id:link-form-input-display-icon,type:radio,name:link-form-input-display,tabindex:1,value:icon");
|
||||
var iconRadioLable = helper.node("label:Icon|for:link-form-input-display-icon");
|
||||
|
||||
letterRadioInputWrap.appendChild(letterRadioInput);
|
||||
letterRadioInputWrap.appendChild(letterRadioLable);
|
||||
fieldset.appendChild(letterRadioInputWrap);
|
||||
letterInputWrap.appendChild(letterInput);
|
||||
letterFormIndet.appendChild(letterInputWrap);
|
||||
fieldset.appendChild(letterFormIndet);
|
||||
iconRadioInputWrap.appendChild(iconRadioInput);
|
||||
iconRadioInputWrap.appendChild(iconRadioLable);
|
||||
fieldset.appendChild(iconRadioInputWrap);
|
||||
iconFormGroupClear.appendChild(iconFormGroupClearIcon);
|
||||
iconFormGroup.appendChild(iconInput);
|
||||
iconFormGroup.appendChild(iconFormGroupText);
|
||||
iconFormGroup.appendChild(iconFormGroupClear);
|
||||
iconFormGroupWrap.appendChild(iconFormGroup);
|
||||
iconFormGroupWrap.appendChild(iconPara);
|
||||
iconFormIndet.appendChild(iconFormGroupWrap);
|
||||
fieldset.appendChild(iconFormIndet);
|
||||
fieldset.appendChild(helper.node("hr"));
|
||||
nameInputWrap.appendChild(nameLabel);
|
||||
nameInputWrap.appendChild(nameInput);
|
||||
fieldset.appendChild(nameInputWrap);
|
||||
urlInputWrap.appendChild(urlLabel);
|
||||
urlInputWrap.appendChild(urlInput);
|
||||
fieldset.appendChild(urlInputWrap);
|
||||
fieldset.appendChild(helper.node("hr"));
|
||||
colorFormGroup.appendChild(colorInput);
|
||||
colorButtonRefresh.appendChild(colorButtonRefreshIcon);
|
||||
colorFormGroup.appendChild(colorButtonRefresh);
|
||||
colorWrap.appendChild(colorLabel);
|
||||
colorWrap.appendChild(colorFormGroup);
|
||||
colorWrap.appendChild(colorPara);
|
||||
fieldset.appendChild(colorWrap);
|
||||
form.appendChild(fieldset);
|
||||
|
||||
letterRadioInput.addEventListener("change", function(event) {
|
||||
link.stagedBookmarkData.display = this.value;
|
||||
}, false);
|
||||
iconRadioInput.addEventListener("change", function(event) {
|
||||
link.stagedBookmarkData.display = this.value;
|
||||
}, false);
|
||||
letterInput.addEventListener("input", function(event) {
|
||||
link.stagedBookmarkData.letter = this.value;
|
||||
}, false);
|
||||
nameInput.addEventListener("input", function(event) {
|
||||
link.stagedBookmarkData.name = this.value;
|
||||
}, false);
|
||||
urlInput.addEventListener("input", function(event) {
|
||||
link.stagedBookmarkData.url = this.value;
|
||||
}, false);
|
||||
colorInput.addEventListener("change", function(event) {
|
||||
link.stagedBookmarkData.accent.override = true;
|
||||
link.stagedBookmarkData.accent.color = helper.hexToRgb(this.value);
|
||||
}, false);
|
||||
colorButtonRefresh.addEventListener("click", function(event) {
|
||||
colorInput.value = helper.rgbToHex(state.get().theme.accent.current);
|
||||
link.stagedBookmarkData.accent.override = false;
|
||||
link.stagedBookmarkData.accent.color = {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
};
|
||||
}, false);
|
||||
iconFormGroupClear.addEventListener("click", function(event) {
|
||||
link.stagedBookmarkData.icon.name = null;
|
||||
link.stagedBookmarkData.icon.prefix = null;
|
||||
link.stagedBookmarkData.icon.label = null;
|
||||
var existingIcon = helper.e(".link-form-icon");
|
||||
if (existingIcon) {
|
||||
existingIcon.remove();
|
||||
};
|
||||
iconInput.value = "";
|
||||
}, false);
|
||||
letterRadioInput.addEventListener("change", function(event) {
|
||||
letterInput.removeAttribute("disabled");
|
||||
iconInput.setAttribute("disabled", "");
|
||||
iconFormGroupText.setAttribute("disabled", "");
|
||||
iconPara.setAttribute("disabled", "");
|
||||
iconFormGroupClear.setAttribute("disabled", "");
|
||||
iconFormGroupText.tabIndex = -1;
|
||||
}, false);
|
||||
iconRadioInput.addEventListener("change", function(event) {
|
||||
letterInput.setAttribute("disabled", "");
|
||||
iconInput.removeAttribute("disabled");
|
||||
iconFormGroupText.removeAttribute("disabled");
|
||||
iconPara.removeAttribute("disabled");
|
||||
iconFormGroupClear.removeAttribute("disabled");
|
||||
iconFormGroupText.tabIndex = 1;
|
||||
}, false);
|
||||
autoSuggest.bind({
|
||||
input: iconInput,
|
||||
type: "fontawesomeIcon",
|
||||
postFocus: iconFormGroupText
|
||||
});
|
||||
return form;
|
||||
};
|
||||
|
||||
var _makeLink = function(data, index) {
|
||||
},
|
||||
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");
|
||||
},
|
||||
link: function(data, index) {
|
||||
var linkItemOptions = {
|
||||
tag: "div",
|
||||
attr: [{
|
||||
@ -517,137 +446,34 @@ var link = (function() {
|
||||
linkItem.appendChild(linkPanelBack);
|
||||
|
||||
linkEdit.addEventListener("click", function() {
|
||||
_previousFocusLink = index;
|
||||
edit(data);
|
||||
_previousFocus = index;
|
||||
render.edit(data);
|
||||
}, false);
|
||||
linkRemove.addEventListener("click", function() {
|
||||
_previousFocusLink = index;
|
||||
remove(data);
|
||||
_previousFocus = index;
|
||||
render.remove(data);
|
||||
}, false);
|
||||
|
||||
return linkItem;
|
||||
}
|
||||
};
|
||||
|
||||
var autoSuggestIconAction = function(autoSuggestData) {
|
||||
link.stagedBookmarkData.icon.label = autoSuggestData.label;
|
||||
link.stagedBookmarkData.icon.name = autoSuggestData.name;
|
||||
if (autoSuggestData.styles.includes("solid")) {
|
||||
link.stagedBookmarkData.icon.prefix = "fas";
|
||||
} else if (autoSuggestData.styles.includes("brands")) {
|
||||
link.stagedBookmarkData.icon.prefix = "fab";
|
||||
};
|
||||
var existingIcon = helper.e(".link-form-icon");
|
||||
if (existingIcon) {
|
||||
existingIcon.remove();
|
||||
};
|
||||
helper.e(".link-form-input-icon").value = autoSuggestData.label;
|
||||
helper.e(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + link.stagedBookmarkData.icon.prefix + " fa-" + link.stagedBookmarkData.icon.name));
|
||||
helper.e(".link-form-text-icon").focus();
|
||||
};
|
||||
|
||||
var _makeEmptySearch = function() {
|
||||
var searchInput = helper.e(".search-input");
|
||||
render.empty = {
|
||||
search: function() {
|
||||
var div = helper.node("div|class:link-empty");
|
||||
var h1 = helper.node("h1:No matching bookmarks found|class:link-empty-heading");
|
||||
var para = helper.node("p:\"Enter\" to Search " + state.get().header.search.engine[state.get().header.search.engine.selected].name + "|class:small muted");
|
||||
div.appendChild(h1);
|
||||
div.appendChild(para);
|
||||
return div;
|
||||
};
|
||||
|
||||
var _makeEmptyBookmarks = function() {
|
||||
var searchInput = helper.e(".search-input");
|
||||
},
|
||||
bookmarks: function() {
|
||||
var div = helper.node("div|class:link-empty");
|
||||
var h1 = helper.node("h1:No bookmarks added|class:link-empty-heading");
|
||||
var para = helper.node("p:Why not add some?|class:small muted");
|
||||
div.appendChild(h1);
|
||||
div.appendChild(para);
|
||||
return div;
|
||||
};
|
||||
|
||||
var clear = function() {
|
||||
var linkArea = helper.e(".link-area");
|
||||
while (linkArea.lastChild) {
|
||||
linkArea.removeChild(linkArea.lastChild);
|
||||
};
|
||||
};
|
||||
|
||||
var render = {};
|
||||
|
||||
render = {
|
||||
area: {
|
||||
width: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render.item = {
|
||||
all: function() {
|
||||
var linkArea = helper.e(".link-area");
|
||||
var bookmarksToRender = false;
|
||||
if (state.get().search) {
|
||||
bookmarksToRender = search.get();
|
||||
} else {
|
||||
bookmarksToRender = bookmarks.get();
|
||||
};
|
||||
var action = {
|
||||
render: {
|
||||
bookmarks: function(array) {
|
||||
array.forEach(function(arrayItem, index) {
|
||||
linkArea.appendChild(_makeLink(arrayItem, index));
|
||||
});
|
||||
},
|
||||
empty: {
|
||||
search: function() {
|
||||
linkArea.appendChild(_makeEmptySearch());
|
||||
},
|
||||
bookmarks: function() {
|
||||
linkArea.appendChild(_makeEmptyBookmarks());
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// if searching
|
||||
if (state.get().search) {
|
||||
// if bookmarks exist to be searched
|
||||
if (bookmarksToRender.total > 0) {
|
||||
// if matching bookmarks found
|
||||
if (bookmarksToRender.matching.length > 0) {
|
||||
action.render.bookmarks(bookmarksToRender.matching);
|
||||
} else {
|
||||
action.render.empty.search();
|
||||
};
|
||||
} else {
|
||||
action.render.empty.bookmarks();
|
||||
};
|
||||
} else {
|
||||
// if bookmarks exist
|
||||
if (bookmarksToRender.length > 0) {
|
||||
action.render.bookmarks(bookmarksToRender);
|
||||
} else {
|
||||
action.render.empty.bookmarks();
|
||||
};
|
||||
};
|
||||
},
|
||||
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");
|
||||
}
|
||||
};
|
||||
|
||||
@ -664,9 +490,185 @@ var link = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
var accent = {};
|
||||
render.previousFocus = function() {
|
||||
if (_previousFocus != null) {
|
||||
var linkPanelFront = helper.eA(".link-panel-front");
|
||||
if (linkPanelFront.length > 0) {
|
||||
if (_previousFocus >= 0) {
|
||||
linkPanelFront[_previousFocus].focus();
|
||||
} else {
|
||||
linkPanelFront[0].focus();
|
||||
};
|
||||
} else {
|
||||
helper.e("body").focus();
|
||||
};
|
||||
_previousFocus = null;
|
||||
};
|
||||
};
|
||||
|
||||
accent.set = function() {
|
||||
render.form = function() {
|
||||
var form = helper.node("form|class:link-form");
|
||||
var fieldset = helper.node("fieldset");
|
||||
var letterFormIndet = helper.node("div|class:form-indent");
|
||||
var letterInputWrap = helper.node("div|class:input-wrap");
|
||||
var letterInput = helper.node("input|type:text,class:link-form-input-letter mb-0,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
|
||||
var iconFormIndet = helper.node("div|class:form-indent");
|
||||
var iconFormGroupWrap = helper.node("div|class:input-wrap");
|
||||
var iconFormGroup = helper.node("div|class:form-group auto-suggest-wrapper");
|
||||
var iconInput = helper.node("input|type:text,class:link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
|
||||
var iconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1,disabled");
|
||||
var iconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
|
||||
var iconFormGroupClearIcon = helper.node("span|class:icon-close");
|
||||
var iconPara = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-helper-icon input-helper small muted,disabled");
|
||||
var nameInputWrap = helper.node("div|class:input-wrap");
|
||||
var nameLabel = helper.node("label:Name|for:link-form-input-name");
|
||||
var nameInput = helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
|
||||
var urlInputWrap = helper.node("div|class:input-wrap");
|
||||
var urlLabel = helper.node("label:URL|for:link-form-input-url");
|
||||
var urlInput = helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
|
||||
var colorWrap = helper.node("div|class:input-wrap");
|
||||
var colorFormGroup = helper.node("div|class:form-group");
|
||||
var colorLabel = helper.node("label:Accent override|for:link-form-input-color");
|
||||
var colorInput = helper.node("input|id:link-form-input-color,class:link-form-input-color mb-0,type:color,value:" + helper.rgbToHex(state.get().theme.accent.current) + ",tabindex:1");
|
||||
var colorButtonRefresh = helper.node("button|class:button mb-0,type:button,tabindex:1");
|
||||
var colorButtonRefreshIcon = helper.node("span|class:icon-refresh");
|
||||
var colorPara = helper.node("p:Use this colour to override the global Accent colour.|class:input-helper small muted");
|
||||
var letterRadioInputWrap = helper.node("div|class:input-wrap");
|
||||
var letterRadioInput = helper.node("input|class:link-form-input-display-letter,id:link-form-input-display-letter,type:radio,name:link-form-input-display,tabindex:1,checked,value:letter");
|
||||
var letterRadioLable = helper.node("label:Letters|for:link-form-input-display-letter");
|
||||
var iconRadioInputWrap = helper.node("div|class:input-wrap");
|
||||
var iconRadioInput = helper.node("input|class:link-form-input-display-icon,id:link-form-input-display-icon,type:radio,name:link-form-input-display,tabindex:1,value:icon");
|
||||
var iconRadioLable = helper.node("label:Icon|for:link-form-input-display-icon");
|
||||
|
||||
letterRadioInputWrap.appendChild(letterRadioInput);
|
||||
letterRadioInputWrap.appendChild(letterRadioLable);
|
||||
fieldset.appendChild(letterRadioInputWrap);
|
||||
letterInputWrap.appendChild(letterInput);
|
||||
letterFormIndet.appendChild(letterInputWrap);
|
||||
fieldset.appendChild(letterFormIndet);
|
||||
iconRadioInputWrap.appendChild(iconRadioInput);
|
||||
iconRadioInputWrap.appendChild(iconRadioLable);
|
||||
fieldset.appendChild(iconRadioInputWrap);
|
||||
iconFormGroupClear.appendChild(iconFormGroupClearIcon);
|
||||
iconFormGroup.appendChild(iconInput);
|
||||
iconFormGroup.appendChild(iconFormGroupText);
|
||||
iconFormGroup.appendChild(iconFormGroupClear);
|
||||
iconFormGroupWrap.appendChild(iconFormGroup);
|
||||
iconFormGroupWrap.appendChild(iconPara);
|
||||
iconFormIndet.appendChild(iconFormGroupWrap);
|
||||
fieldset.appendChild(iconFormIndet);
|
||||
fieldset.appendChild(helper.node("hr"));
|
||||
nameInputWrap.appendChild(nameLabel);
|
||||
nameInputWrap.appendChild(nameInput);
|
||||
fieldset.appendChild(nameInputWrap);
|
||||
urlInputWrap.appendChild(urlLabel);
|
||||
urlInputWrap.appendChild(urlInput);
|
||||
fieldset.appendChild(urlInputWrap);
|
||||
fieldset.appendChild(helper.node("hr"));
|
||||
colorFormGroup.appendChild(colorInput);
|
||||
colorButtonRefresh.appendChild(colorButtonRefreshIcon);
|
||||
colorFormGroup.appendChild(colorButtonRefresh);
|
||||
colorWrap.appendChild(colorLabel);
|
||||
colorWrap.appendChild(colorFormGroup);
|
||||
colorWrap.appendChild(colorPara);
|
||||
fieldset.appendChild(colorWrap);
|
||||
form.appendChild(fieldset);
|
||||
|
||||
letterRadioInput.addEventListener("change", function(event) {
|
||||
stagedLink.data.display = this.value;
|
||||
}, false);
|
||||
iconRadioInput.addEventListener("change", function(event) {
|
||||
stagedLink.data.display = this.value;
|
||||
}, false);
|
||||
letterInput.addEventListener("input", function(event) {
|
||||
stagedLink.data.letter = this.value;
|
||||
}, false);
|
||||
nameInput.addEventListener("input", function(event) {
|
||||
stagedLink.data.name = this.value;
|
||||
}, false);
|
||||
urlInput.addEventListener("input", function(event) {
|
||||
stagedLink.data.url = this.value;
|
||||
}, false);
|
||||
colorInput.addEventListener("change", function(event) {
|
||||
stagedLink.data.accent.override = true;
|
||||
stagedLink.data.accent.color = helper.hexToRgb(this.value);
|
||||
}, false);
|
||||
colorButtonRefresh.addEventListener("click", function(event) {
|
||||
colorInput.value = helper.rgbToHex(state.get().theme.accent.current);
|
||||
stagedLink.data.accent.override = false;
|
||||
stagedLink.data.accent.color = {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
};
|
||||
}, false);
|
||||
iconFormGroupClear.addEventListener("click", function(event) {
|
||||
stagedLink.data.icon.name = null;
|
||||
stagedLink.data.icon.prefix = null;
|
||||
stagedLink.data.icon.label = null;
|
||||
var existingIcon = helper.e(".link-form-icon");
|
||||
if (existingIcon) {
|
||||
existingIcon.remove();
|
||||
};
|
||||
iconInput.value = "";
|
||||
}, false);
|
||||
letterRadioInput.addEventListener("change", function(event) {
|
||||
letterInput.removeAttribute("disabled");
|
||||
iconInput.setAttribute("disabled", "");
|
||||
iconFormGroupText.setAttribute("disabled", "");
|
||||
iconPara.setAttribute("disabled", "");
|
||||
iconFormGroupClear.setAttribute("disabled", "");
|
||||
iconFormGroupText.tabIndex = -1;
|
||||
}, false);
|
||||
iconRadioInput.addEventListener("change", function(event) {
|
||||
letterInput.setAttribute("disabled", "");
|
||||
iconInput.removeAttribute("disabled");
|
||||
iconFormGroupText.removeAttribute("disabled");
|
||||
iconPara.removeAttribute("disabled");
|
||||
iconFormGroupClear.removeAttribute("disabled");
|
||||
iconFormGroupText.tabIndex = 1;
|
||||
}, false);
|
||||
autoSuggest.bind({
|
||||
input: iconInput,
|
||||
type: "fontawesomeIcon",
|
||||
postFocus: iconFormGroupText
|
||||
});
|
||||
return form;
|
||||
};
|
||||
|
||||
render.autoSuggestIconAction = function(autoSuggestData) {
|
||||
stagedLink.data.icon.label = autoSuggestData.label;
|
||||
stagedLink.data.icon.name = autoSuggestData.name;
|
||||
if (autoSuggestData.styles.includes("solid")) {
|
||||
stagedLink.data.icon.prefix = "fas";
|
||||
} else if (autoSuggestData.styles.includes("brands")) {
|
||||
stagedLink.data.icon.prefix = "fab";
|
||||
};
|
||||
var existingIcon = helper.e(".link-form-icon");
|
||||
if (existingIcon) {
|
||||
existingIcon.remove();
|
||||
};
|
||||
helper.e(".link-form-input-icon").value = autoSuggestData.label;
|
||||
helper.e(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + stagedLink.data.icon.prefix + " fa-" + stagedLink.data.icon.name));
|
||||
helper.e(".link-form-text-icon").focus();
|
||||
};
|
||||
|
||||
var mod = {};
|
||||
|
||||
mod.accent = {
|
||||
clear: function() {
|
||||
bookmarks.get().forEach(function(arrayItem, index) {
|
||||
arrayItem.accent = {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
};
|
||||
});
|
||||
},
|
||||
rainbow: function() {
|
||||
var units = 360 / bookmarks.get().length;
|
||||
var degree = 0;
|
||||
bookmarks.get().forEach(function(arrayItem, index) {
|
||||
@ -678,20 +680,18 @@ var link = (function() {
|
||||
});
|
||||
degree = degree + units;
|
||||
});
|
||||
};
|
||||
|
||||
accent.clear = function() {
|
||||
bookmarks.get().forEach(function(arrayItem, index) {
|
||||
arrayItem.accent = {
|
||||
override: false,
|
||||
color: {
|
||||
r: null,
|
||||
g: null,
|
||||
b: null
|
||||
}
|
||||
};
|
||||
|
||||
mod.edit = function() {
|
||||
if (bookmarks.get().length <= 0) {
|
||||
helper.setObject({
|
||||
object: state.get(),
|
||||
path: "link.edit",
|
||||
newValue: false
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
render.area.width();
|
||||
@ -700,19 +700,13 @@ var link = (function() {
|
||||
render.item.display.letter();
|
||||
render.item.display.icon();
|
||||
render.item.name();
|
||||
bind();
|
||||
bind.sort();
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
return {
|
||||
stagedBookmarkData: stagedBookmarkData,
|
||||
autoSuggestIconAction: autoSuggestIconAction,
|
||||
accent: accent,
|
||||
init: init,
|
||||
clear: clear,
|
||||
add: add,
|
||||
edit: edit,
|
||||
remove: remove,
|
||||
mod: mod,
|
||||
render: render
|
||||
};
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ var search = (function() {
|
||||
searchInput.addEventListener("input", function() {
|
||||
mod.searching.set();
|
||||
render.clear.button();
|
||||
link.clear();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}, false);
|
||||
@ -19,7 +19,7 @@ var search = (function() {
|
||||
render.clear.input();
|
||||
mod.searching.set();
|
||||
render.clear.button();
|
||||
link.clear();
|
||||
link.render.clear();
|
||||
link.render.item.all();
|
||||
sortable(".link-area");
|
||||
}, false);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "3.40.0";
|
||||
var current = "3.41.0";
|
||||
|
||||
var compare = function(a, b) {
|
||||
var pa = a.split(".");
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "nightTab",
|
||||
"short_name": "nightTab",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"version": "3.40.0",
|
||||
"version": "3.41.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user