Bladeren bron

[minor] added preview to bookmark tab add and edit forms

leet1994 5 jaren geleden
bovenliggende
commit
f8944e49ab
2 gewijzigde bestanden met toevoegingen van 95 en 23 verwijderingen
  1. 25 17
      api/plugins/bookmark.php
  2. 70 6
      api/plugins/js/bookmark-settings.js

+ 25 - 17
api/plugins/bookmark.php

@@ -314,7 +314,7 @@ class Bookmark extends Organizr
 		<div class="panel bg-org panel-info">
 			<div class="panel-heading">
 				<span lang="en">Bookmark Tab Editor</span>
-				<button type="button" class="btn btn-info btn-circle pull-right popup-with-form m-r-5" href="#new-bookmark-tab-form" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>
+				<button type="button" class="btn btn-info btn-circle pull-right popup-with-form m-r-5" href="#new-bookmark-tab-form" onclick="newBookmarkTabForm()" data-effect="mfp-3d-unfold"><i class="fa fa-plus"></i> </button>
 				<button onclick="submitBookmarkTabOrder(newBookmarkTabsGlobal)" class="btn btn-sm btn-info btn-rounded waves-effect waves-light pull-right animated loop-animation rubberBand m-r-20 saveBookmarkTabOrderButton hidden" type="button"><span class="btn-label"><i class="fa fa-save"></i></span><span lang="en">Save Tab Order</span></button>
 			</div>
 			<div class="table-responsive">
@@ -342,12 +342,12 @@ class Bookmark extends Organizr
 			<h1 lang="en">Add New Tab</h1>
 			<fieldset style="border:0;">
 				<div class="form-group">
-					<label class="control-label" for="new-bookmark-tab-form-inputNameNew" lang="en">Tab Name</label>
-					<input type="text" class="form-control" id="new-bookmark-tab-form-inputNameNew" name="name" required="" autofocus>
+					<label class="control-label" for="new-bookmark-tab-form-inputName" lang="en">Tab Name</label>
+					<input type="text" class="form-control" id="new-bookmark-tab-form-inputName" name="name" required="" autofocus>
 				</div>
 				<div class="form-group">
-					<label class="control-label" for="new-bookmark-tab-form-inputURLNew" lang="en">Tab URL</label>
-					<input type="text" class="form-control" id="new-bookmark-tab-form-inputURLNew" name="url"  required="">
+					<label class="control-label" for="new-bookmark-tab-form-inputURL" lang="en">Tab URL</label>
+					<input type="text" class="form-control" id="new-bookmark-tab-form-inputURL" name="url"  required="">
 				</div>
 				<div class="row">
 					<div class="form-group col-lg-4">
@@ -366,17 +366,21 @@ class Bookmark extends Organizr
 					</div>
 				</div>
 				<div class="form-group">
-					<label class="control-label" for="new-bookmark-tab-form-inputImageNew" lang="en">Tab Image</label>
-					<input type="text" class="form-control" id="new-bookmark-tab-form-inputImageNew" name="image" required="">
+					<label class="control-label" for="new-bookmark-tab-form-inputImage" lang="en">Tab Image</label>
+					<input type="text" class="form-control" id="new-bookmark-tab-form-inputImage" name="image" required="">
 				</div>
 				<div class="row">
 					<div class="form-group col-lg-4">
-						<label class="control-label" for="new-bookmark-tab-form-inputBackgroundColorNew" lang="en">Background Color</label>
-						<input type="text" class="form-control pick-a-color-bookmark" id="new-bookmark-tab-form-inputBackgroundColorNew" name="background_color" required="">
+						<label class="control-label" for="new-bookmark-tab-form-inputBackgroundColor" lang="en">Background Color</label>
+						<input type="text" class="form-control pick-a-color-bookmark" id="new-bookmark-tab-form-inputBackgroundColor" name="background_color" required="" value="#fff">
+					</div>
+					<div class="form-group col-lg-4">
+						<label class="control-label" for="new-bookmark-tab-form-inputTextColor" lang="en">Text Color</label>
+						<input type="text" class="form-control pick-a-color-bookmark" id="new-bookmark-tab-form-inputTextColor" name="text_color" required="" value="#000">
 					</div>
 					<div class="form-group col-lg-4">
-						<label class="control-label" for="new-bookmark-tab-form-inputTextColorNew" lang="en">Text Color</label>
-						<input type="text" class="form-control pick-a-color-bookmark" id="new-bookmark-tab-form-inputTextColorNew" name="text_color" required="">
+						<label class="control-label" for="new-bookmark-preview" lang="en">Preview</label>
+						<div id="new-bookmark-preview"></div>
 					</div>
 				</div>
 			</fieldset>
@@ -418,12 +422,16 @@ class Bookmark extends Organizr
 				</div>
 				<div class="row">
 					<div class="form-group col-lg-4">
-						<label class="control-label" for="new-bookmark-tab-form-inputBackgroundColor" lang="en">Background Color</label>
-						<input type="text" class="form-control pick-a-color-bookmark" id="new-bookmark-tab-form-inputBackgroundColor" name="background_color" required="">
+						<label class="control-label" for="edit-bookmark-tab-form-inputBackgroundColor" lang="en">Background Color</label>
+						<input type="text" class="form-control pick-a-color-bookmark" id="edit-bookmark-tab-form-inputBackgroundColor" name="background_color" required="">
 					</div>
 					<div class="form-group col-lg-4">
-						<label class="control-label" for="new-bookmark-tab-form-inputTextColor" lang="en">Text Color</label>
-						<input type="text" class="form-control pick-a-color-bookmark" id="new-bookmark-tab-form-inputTextColor" name="text_color" required="">
+						<label class="control-label" for="edit-bookmark-tab-form-inputTextColor" lang="en">Text Color</label>
+						<input type="text" class="form-control pick-a-color-bookmark" id="edit-bookmark-tab-form-inputTextColor" name="text_color" required="">
+					</div>
+					<div class="form-group col-lg-4">
+						<label class="control-label" for="edit-bookmark-preview" lang="en">Preview</label>
+						<div id="edit-bookmark-preview"></div>
 					</div>
 				</div>
 			</fieldset>
@@ -709,8 +717,8 @@ class Bookmark extends Organizr
 		<h1 lang="en">Add New Bookmark Category</h1>
 		<fieldset style="border:0;">
 			<div class="form-group">
-				<label class="control-label" for="new-bookmark-category-form-inputNameNew" lang="en">Category Name</label>
-				<input type="text" class="form-control" id="new-bookmark-category-form-inputNameNew" name="category" required="" autofocus>
+				<label class="control-label" for="new-bookmark-category-form-inputName" lang="en">Category Name</label>
+				<input type="text" class="form-control" id="new-bookmark-category-form-inputName" name="category" required="" autofocus>
 			</div>
 		</fieldset>
 		<button class="btn btn-sm btn-info btn-rounded waves-effect waves-light pull-right row b-none addNewBookmarkCategory" type="button"><span class="btn-label"><i class="fa fa-plus"></i></span><span lang="en">Add Category</span></button>

+ 70 - 6
api/plugins/js/bookmark-settings.js

@@ -143,6 +143,7 @@ function editBookmarkTabForm(id){
 			}else{
 				$('#edit-bookmark-tab-form [name=url]').prop('disabled', null);
 			}
+			generatePreviewBookmarkEditTab();
 		}catch(e) {
 			organizrCatchError(e,data);
 		}
@@ -151,6 +152,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 +367,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 +633,3 @@ function submitBookmarkCategoryOrder(){
 		OrganizrApiError(xhr, 'Update Error');
 	});
 }
-
-// TAB MANAGEMENT