|
|
@@ -55,6 +55,11 @@ function bookmarkTabsLaunch(){
|
|
|
$('#settings-main-tab-editor .nav-tabs').append(menuList);
|
|
|
}
|
|
|
|
|
|
+function getColorPickerOptionsWithCallback(func){
|
|
|
+ return ;
|
|
|
+}
|
|
|
+
|
|
|
+var colorPickerInitialized = false;
|
|
|
function buildBookmarkTabEditor(){
|
|
|
organizrAPI2('GET','api/v2/plugins/bookmark/tabs').success(function(data) {
|
|
|
try {
|
|
|
@@ -63,6 +68,22 @@ function buildBookmarkTabEditor(){
|
|
|
organizrCatchError(e,data);
|
|
|
}
|
|
|
$('#bookmarkTabEditorTable').html(buildBookmarkTabEditorItem(response.data));
|
|
|
+
|
|
|
+ // initialize color pickers only first time
|
|
|
+ if(!colorPickerInitialized){
|
|
|
+ $("input.bookmark-pick-a-color").ColorPickerSliders({
|
|
|
+ placement: 'bottom',
|
|
|
+ color: '#987654',
|
|
|
+ hsvpanel: true,
|
|
|
+ previewformat: 'hex',
|
|
|
+ flat: true,
|
|
|
+ onchange: function(container, color){
|
|
|
+ generatePreviewBookmarkNewTab();
|
|
|
+ generatePreviewBookmarkEditTab();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ colorPickerInitialized = true;
|
|
|
+ }
|
|
|
}).fail(function(xhr) {
|
|
|
OrganizrApiError(xhr);
|
|
|
});
|
|
|
@@ -135,14 +156,15 @@ function editBookmarkTabForm(id){
|
|
|
$('#originalBookmarkTabName').html(response.data.name);
|
|
|
$('#edit-bookmark-tab-form [name=url]').val(response.data.url);
|
|
|
$('#edit-bookmark-tab-form [name=image]').val(response.data.image);
|
|
|
- $('#edit-bookmark-tab-form [name=background_color]').val(response.data.background_color);
|
|
|
- $('#edit-bookmark-tab-form [name=text_color]').val(response.data.text_color);
|
|
|
+ $('#edit-bookmark-tab-form [name=background_color]').val(response.data.background_color).change();
|
|
|
+ $('#edit-bookmark-tab-form [name=text_color]').val(response.data.text_color).change();
|
|
|
$('#edit-bookmark-tab-form [name=id]').val(response.data.id);
|
|
|
if( response.data.url.indexOf('/?v') > 0){
|
|
|
$('#edit-bookmark-tab-form [name=url]').prop('disabled', 'true');
|
|
|
}else{
|
|
|
$('#edit-bookmark-tab-form [name=url]').prop('disabled', null);
|
|
|
}
|
|
|
+ generatePreviewBookmarkEditTab();
|
|
|
}catch(e) {
|
|
|
organizrCatchError(e,data);
|
|
|
}
|
|
|
@@ -151,6 +173,10 @@ function editBookmarkTabForm(id){
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+function newBookmarkTabForm(){
|
|
|
+ generatePreviewBookmarkNewTab();
|
|
|
+}
|
|
|
+
|
|
|
// CHANGE ENABLED TAB
|
|
|
$(document).on("change", ".bookmarkEnabledSwitch", function () {
|
|
|
var id = $(this).parent().parent().attr("data-id");
|
|
|
@@ -362,28 +388,89 @@ function submitBookmarkTabOrder(newTabs){
|
|
|
$(document).on('change', "#new-bookmark-tab-form-chooseImage", function (e) {
|
|
|
var newIcon = $('#new-bookmark-tab-form-chooseImage').val();
|
|
|
if(newIcon !== 'Select or type Icon'){
|
|
|
- $('#new-bookmark-tab-form-inputImageNew').val(newIcon);
|
|
|
+ $('#new-bookmark-tab-form-inputImage').val(newIcon).change();
|
|
|
}
|
|
|
});
|
|
|
$(document).on('change', "#edit-bookmark-tab-form-chooseImage", function (e) {
|
|
|
var newIcon = $('#edit-bookmark-tab-form-chooseImage').val();
|
|
|
if(newIcon !== 'Select or type Icon'){
|
|
|
- $('#edit-bookmark-tab-form-inputImage').val(newIcon);
|
|
|
+ $('#edit-bookmark-tab-form-inputImage').val(newIcon).change();
|
|
|
}
|
|
|
});
|
|
|
$(document).on('change', "#new-bookmark-tab-form-chooseIcon", function (e) {
|
|
|
var newIcon = $('#new-bookmark-tab-form-chooseIcon').val();
|
|
|
if(newIcon !== 'Select or type Icon'){
|
|
|
- $('#new-bookmark-tab-form-inputImageNew').val(newIcon);
|
|
|
+ $('#new-bookmark-tab-form-inputImage').val(newIcon).change();
|
|
|
}
|
|
|
});
|
|
|
$(document).on('change', "#edit-bookmark-tab-form-chooseIcon", function (e) {
|
|
|
var newIcon = $('#edit-bookmark-tab-form-chooseIcon').val();
|
|
|
if(newIcon !== 'Select or type Icon'){
|
|
|
- $('#edit-bookmark-tab-form-inputImage').val(newIcon);
|
|
|
+ $('#edit-bookmark-tab-form-inputImage').val(newIcon).change();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+// TAB PREVIEWS
|
|
|
+function adjustBrightness(hexCode, adjustPercent){
|
|
|
+ hexCode = hexCode.replace('#','');
|
|
|
+ if(hexCode.length != 6 && hexCode.length != 3) return;
|
|
|
+ if(hexCode.length == 3)
|
|
|
+ hexCode = hexCode[0]+hexCode[0]+hexCode[1]+hexCode[1]+hexCode[2]+hexCode[2];
|
|
|
+ var result = ['#'];
|
|
|
+ for (var i = 0; i < 3; ++i) {
|
|
|
+ var color = parseInt(hexCode[2*i] + hexCode[2*i+1], 16);
|
|
|
+ var adjustableLimit = adjustPercent < 0 ? color : 255 - color;
|
|
|
+ var adjustAmount = Math.ceil(adjustableLimit * adjustPercent);
|
|
|
+ var hex = (color + adjustAmount).toString(16).padStart(2, '0');
|
|
|
+ result.push(hex);
|
|
|
+ }
|
|
|
+ return result.join('');
|
|
|
+}
|
|
|
+
|
|
|
+function generatePreview(preview, name, image, colorBg, colorText){
|
|
|
+ var result = '<div class="BOOKMARK-category-content"> \
|
|
|
+ <a href="#" target="_SELF"> \
|
|
|
+ <div class="BOOKMARK-tab" style="border-color: ' + adjustBrightness(colorBg, 0.3) + '; background: linear-gradient(90deg, ' + adjustBrightness(colorBg, -0.3) + ' 0%, ' + colorBg + ' 70%, ' + adjustBrightness(colorBg, 0.1) + ' 100%);"> \
|
|
|
+ <span class="BOOKMARK-tab-image">' + iconPrefix(image) + '</span> \
|
|
|
+ <span class="BOOKMARK-tab-title" style="color: ' + colorText + ';">' + name + '</span> \
|
|
|
+ </div> \
|
|
|
+ </a> \
|
|
|
+ </div>';
|
|
|
+
|
|
|
+ preview.html(result);
|
|
|
+ $(".BOOKMARK-tab-image>img, .BOOKMARK-tab-image>i").removeClass("fa-fw");
|
|
|
+}
|
|
|
+
|
|
|
+function generatePreviewBookmarkNewTab(){
|
|
|
+ var preview = $('#new-bookmark-preview');
|
|
|
+ var name = $('#new-bookmark-tab-form-inputName').val();
|
|
|
+ var image = $('#new-bookmark-tab-form-inputImage').val();
|
|
|
+ var colorBg = $('#new-bookmark-tab-form-inputBackgroundColor').val();
|
|
|
+ var colorText = $('#new-bookmark-tab-form-inputTextColor').val();
|
|
|
+
|
|
|
+ generatePreview(preview, name, image, colorBg, colorText);
|
|
|
+}
|
|
|
+
|
|
|
+function generatePreviewBookmarkEditTab(){
|
|
|
+ var preview = $('#edit-bookmark-preview');
|
|
|
+ var name = $('#edit-bookmark-tab-form-inputName').val();
|
|
|
+ var image = $('#edit-bookmark-tab-form-inputImage').val();
|
|
|
+ var colorBg = $('#edit-bookmark-tab-form-inputBackgroundColor').val();
|
|
|
+ var colorText = $('#edit-bookmark-tab-form-inputTextColor').val();
|
|
|
+
|
|
|
+ generatePreview(preview, name, image, colorBg, colorText);
|
|
|
+}
|
|
|
+
|
|
|
+$(document).on('input', "#new-bookmark-tab-form-inputName", generatePreviewBookmarkNewTab);
|
|
|
+$(document).on('input change', "#new-bookmark-tab-form-inputImage", generatePreviewBookmarkNewTab);
|
|
|
+$(document).on('input', "#new-bookmark-tab-form-inputBackgroundColor", generatePreviewBookmarkNewTab);
|
|
|
+$(document).on('input', "#new-bookmark-tab-form-inputTextColor", generatePreviewBookmarkNewTab);
|
|
|
+
|
|
|
+$(document).on('input', "#edit-bookmark-tab-form-inputName", generatePreviewBookmarkEditTab);
|
|
|
+$(document).on('input change', "#edit-bookmark-tab-form-inputImage", generatePreviewBookmarkEditTab);
|
|
|
+$(document).on('input', "#edit-bookmark-tab-form-inputBackgroundColor", generatePreviewBookmarkEditTab);
|
|
|
+$(document).on('input', "#edit-bookmark-tab-form-inputTextColor", generatePreviewBookmarkEditTab);
|
|
|
+
|
|
|
// CATEGORY MANAGEMENT
|
|
|
function bookmarkCategoriesLaunch(){
|
|
|
var menuList = `<li onclick="changeSettingsMenu('Settings::Tab Editor::Bookmark Categories');loadSettingsPage2('api/v2/plugins/bookmark/settings_tab_editor_bookmark_categories','#settings-tab-editor-tabs','Tab Editor');" role="presentation"><a id="settings-tab-editor-tabs-anchor" href="#settings-tab-editor-tabs" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="visible-xs"><i class="ti-layout-tab-v"></i></span><span class="hidden-xs" lang="en">Bookmark Categories</span></a></li>`;
|
|
|
@@ -567,5 +654,3 @@ function submitBookmarkCategoryOrder(){
|
|
|
OrganizrApiError(xhr, 'Update Error');
|
|
|
});
|
|
|
}
|
|
|
-
|
|
|
-// TAB MANAGEMENT
|
causefx