diff --git a/assets/vendor/jsuites.js b/assets/vendor/jsuites.js index 3e9edb5..b19916d 100644 --- a/assets/vendor/jsuites.js +++ b/assets/vendor/jsuites.js @@ -17,7 +17,7 @@ var jSuites = {}; -var Version = '4.14.3'; +var Version = '4.17.5'; var Events = function() { @@ -325,10 +325,12 @@ var Events = function() { if (document.jsuitesComponents && document.jsuitesComponents.length) { if (item = document.jsuitesComponents[document.jsuitesComponents.length - 1]) { - if (e.key == "Escape" && typeof(item.close) == 'function') { - item.close(); - e.preventDefault(); - e.stopImmediatePropagation(); + if (e.key == "Escape" && typeof(item.isOpened) == 'function' && typeof(item.close) == 'function') { + if (item.isOpened()) { + item.close(); + e.preventDefault(); + e.stopImmediatePropagation(); + } } } } @@ -455,7 +457,7 @@ jSuites.setDictionary = function(d) { // Translate jSuites.translate = function(t) { - if (document.dictionary) { + if (typeof(document) !== "undefined" && document.dictionary) { return document.dictionary[t] || t; } else { return t; @@ -919,6 +921,8 @@ jSuites.calendar = (function(el, options) { position: null, // Data type dataType: null, + // Controls + controls: true, } // Loop through our object @@ -955,7 +959,7 @@ jSuites.calendar = (function(el, options) { if (jSuites.isNumeric(obj.options.value) && obj.options.value > 0) { obj.options.value = jSuites.calendar.numToDate(obj.options.value); - // Data type numberic + // Data type numeric obj.options.dataType = 'numeric'; } @@ -1163,6 +1167,8 @@ jSuites.calendar = (function(el, options) { if (! newValue) { obj.date = null; var val = ''; + el.classList.remove('jcalendar_warning'); + el.title = ''; } else { var value = obj.setLabel(newValue, obj.options); var date = newValue.split(' '); @@ -1178,6 +1184,35 @@ jSuites.calendar = (function(el, options) { var i = parseInt(time[1]); obj.date = [ y, m, d, h, i, 0 ]; var val = obj.setLabel(newValue, obj.options); + + // Current selection day + var current = jSuites.calendar.now(new Date(y, m-1, d), true); + + // Available ranges + if (obj.options.validRange) { + if (! obj.options.validRange[0] || current >= obj.options.validRange[0]) { + var test1 = true; + } else { + var test1 = false; + } + + if (! obj.options.validRange[1] || current <= obj.options.validRange[1]) { + var test2 = true; + } else { + var test2 = false; + } + + if (! (test1 && test2)) { + el.classList.add('jcalendar_warning'); + el.title = jSuites.translate('Date outside the valid range'); + } else { + el.classList.remove('jcalendar_warning'); + el.title = ''; + } + } else { + el.classList.remove('jcalendar_warning'); + el.title = ''; + } } // New value @@ -1201,6 +1236,10 @@ jSuites.calendar = (function(el, options) { } obj.getDays(); + // Render months + if (obj.options.type == 'year-month-picker') { + obj.getMonths(); + } } obj.getValue = function() { @@ -1330,8 +1369,8 @@ jSuites.calendar = (function(el, options) { // Reset cells container var row = document.createElement('tr'); row.setAttribute('align', 'center'); - // Data control - var emptyRow = true; + row.style.height = '34px'; + // Create cells for (var i = 0; i < 7; i++) { // Create cell @@ -1374,9 +1413,6 @@ jSuites.calendar = (function(el, options) { cell.classList.add('jcalendar-disabled'); } } - - // Control - emptyRow = false; } // Day cell row.appendChild(cell); @@ -1385,9 +1421,7 @@ jSuites.calendar = (function(el, options) { } // Add cell to the calendar body - if (emptyRow == false) { - calendarBody.appendChild(row); - } + calendarBody.appendChild(row); } // Show time controls @@ -1649,7 +1683,6 @@ jSuites.calendar = (function(el, options) { calendarContainer = document.createElement('div'); calendarContainer.className = 'jcalendar-container'; - calendarContent = document.createElement('div'); calendarContent.className = 'jcalendar-content'; calendarContainer.appendChild(calendarContent); @@ -1797,14 +1830,12 @@ jSuites.calendar = (function(el, options) { e.stopPropagation(); }); - el.onmouseup = function() { - obj.open(); - } - if ('ontouchend' in document.documentElement === true) { calendar.addEventListener("touchend", mouseUpControls); + el.addEventListener("touchend", obj.open); } else { calendar.addEventListener("mouseup", mouseUpControls); + el.addEventListener("mouseup", obj.open); } // Global controls @@ -1842,6 +1873,11 @@ jSuites.calendar = (function(el, options) { obj.open(); } + // Controls + if (obj.options.controls == false) { + calendarContainer.classList.add('jcalendar-hide-controls'); + } + // Change method el.change = obj.setValue; @@ -1979,23 +2015,31 @@ jSuites.calendar.toArray = function(value) { // Helper to extract date from a string jSuites.calendar.extractDateFromString = function(date, format) { - if (date > 0 && Number(date) == date) { + var o = jSuites.mask(date, { mask: format }, true); + + // Check if in format Excel (Need difference with format date or type detected is numeric) + if (date > 0 && Number(date) == date && (o.values.join("") !== o.value || o.type == "numeric")) { var d = new Date(Math.round((date - 25569)*86400*1000)); return d.getFullYear() + "-" + jSuites.two(d.getMonth()) + "-" + jSuites.two(d.getDate()) + ' 00:00:00'; } - var o = jSuites.mask(date, { mask: format }, true); - if (o.date[0] && o.date[1]) { + var complete = false; + + if (o.values.length === o.tokens.length && o.values[o.values.length-1].length >= o.tokens[o.tokens.length-1].length) { + complete = true; + } + + if (o.date[0] && o.date[1] && (o.date[2] || complete)) { if (! o.date[2]) { o.date[2] = 1; } return o.date[0] + '-' + jSuites.two(o.date[1]) + '-' + jSuites.two(o.date[2]) + ' ' + jSuites.two(o.date[3]) + ':' + jSuites.two(o.date[4])+ ':' + jSuites.two(o.date[5]); } + return ''; } - var excelInitialTime = Date.UTC(1900, 0, 0); var excelLeapYearBug = Date.UTC(1900, 1, 29); var millisecondsPerDay = 86400000; @@ -2062,17 +2106,20 @@ jSuites.calendar.getDateString = function(value, options) { } // Convert to number of hours - if (typeof(value) == 'number' && format.indexOf('[h]') >= 0) { - var result = parseFloat(24 * Number(value)); - if (format.indexOf('mm') >= 0) { - var h = (''+result).split('.'); - if (h[1]) { - var d = 60 * parseFloat('0.' + h[1]) - d = parseFloat(d.toFixed(2)); - } else { - var d = 0; + if (format.indexOf('[h]') >= 0) { + var result = 0; + if (value && jSuites.isNumeric(value)) { + result = parseFloat(24 * Number(value)); + if (format.indexOf('mm') >= 0) { + var h = (''+result).split('.'); + if (h[1]) { + var d = 60 * parseFloat('0.' + h[1]) + d = parseFloat(d.toFixed(2)); + } else { + var d = 0; + } + result = parseInt(h[0]) + ':' + jSuites.two(d); } - result = parseInt(h[0]) + ':' + jSuites.two(d); } return result; } @@ -2914,11 +2961,17 @@ jSuites.color = (function(el, options) { var hex = function(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } - if (/^#[0-9A-F]{6}$/i.test(rgb)) { - return rgb; - } else { - rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); - return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); + if (rgb) { + if (/^#[0-9A-F]{6}$/i.test(rgb)) { + return rgb; + } else { + rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); + if (rgb && rgb.length) { + return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); + } else { + return ""; + } + } } } @@ -3265,6 +3318,8 @@ jSuites.dropdown = (function(el, options) { } // Reset options obj.options.value = ''; + // Reset value + el.value = ''; } /** @@ -3544,7 +3599,7 @@ jSuites.dropdown = (function(el, options) { // Header obj.header = document.createElement('input'); - obj.header.className = 'jdropdown-header'; + obj.header.className = 'jdropdown-header jss_object'; obj.header.type = 'text'; obj.header.setAttribute('autocomplete', 'off'); obj.header.onfocus = function() { @@ -4933,29 +4988,29 @@ jSuites.editor = (function(el, options) { // Default configuration var defaults = { + // Load data from a remove location + url: null, // Initial HTML content - value: null, + value: '', // Initial snippet snippet: null, // Add toolbar - toolbar: null, + toolbar: true, + toolbarOnTop: false, // Website parser is to read websites and images from cross domain remoteParser: null, // Placeholder placeholder: null, // Parse URL - parseURL: false, filterPaste: true, // Accept drop files - dropZone: false, + dropZone: true, dropAsSnippet: false, - acceptImages: false, + acceptImages: true, acceptFiles: false, maxFileSize: 5000000, allowImageResize: true, // Style - border: true, - padding: true, maxHeight: null, height: null, focus: false, @@ -4967,7 +5022,8 @@ jSuites.editor = (function(el, options) { onkeyup: null, onkeydown: null, onchange: null, - userSearch: null, + extensions: null, + type: null, }; // Loop through our object @@ -4980,14 +5036,10 @@ jSuites.editor = (function(el, options) { } // Private controllers - var imageResize = 0; var editorTimer = null; var editorAction = null; var files = []; - // Make sure element is empty - el.innerHTML = ''; - // Keep the reference for the container obj.el = el; @@ -5000,16 +5052,6 @@ jSuites.editor = (function(el, options) { // Prepare container el.classList.add('jeditor-container'); - // Padding - if (obj.options.padding == true) { - el.classList.add('jeditor-padding'); - } - - // Border - if (obj.options.border == false) { - el.style.border = '0px'; - } - // Snippet var snippet = document.createElement('div'); snippet.className = 'jsnippet'; @@ -5019,39 +5061,52 @@ jSuites.editor = (function(el, options) { var toolbar = document.createElement('div'); toolbar.className = 'jeditor-toolbar'; - // Create editor - var editor = document.createElement('div'); - editor.setAttribute('contenteditable', true); - editor.setAttribute('spellcheck', false); - editor.className = 'jeditor'; + obj.editor = document.createElement('div'); + obj.editor.setAttribute('contenteditable', true); + obj.editor.setAttribute('spellcheck', false); + obj.editor.classList.add('jeditor'); // Placeholder if (obj.options.placeholder) { - editor.setAttribute('data-placeholder', obj.options.placeholder); + obj.editor.setAttribute('data-placeholder', obj.options.placeholder); } // Max height if (obj.options.maxHeight || obj.options.height) { - editor.style.overflowY = 'auto'; + obj.editor.style.overflowY = 'auto'; if (obj.options.maxHeight) { - editor.style.maxHeight = obj.options.maxHeight; + obj.editor.style.maxHeight = obj.options.maxHeight; } if (obj.options.height) { - editor.style.height = obj.options.height; + obj.editor.style.height = obj.options.height; } } // Set editor initial value - if (obj.options.value) { - var value = obj.options.value; + if (obj.options.url) { + jSuites.ajax({ + url: obj.options.url, + dataType: 'html', + success: function(result) { + obj.editor.innerHTML = result; + + jSuites.editor.setCursor(obj.editor, obj.options.focus == 'initial' ? true : false); + } + }) } else { - var value = el.innerHTML ? el.innerHTML : ''; + if (obj.options.value) { + obj.editor.innerHTML = obj.options.value; + } else { + // Create from existing elements + for (var i = 0; i < el.children.length; i++) { + obj.editor.appendChild(el.children[i]); + } + } } - if (! value) { - var value = ''; - } + // Make sure element is empty + el.innerHTML = ''; /** * Onchange event controllers @@ -5077,25 +5132,6 @@ jSuites.editor = (function(el, options) { } } - // Create node - var createUserSearchNode = function() { - // Get coordinates from caret - var sel = window.getSelection ? window.getSelection() : document.selection; - var range = sel.getRangeAt(0); - range.deleteContents(); - // Append text node - var input = document.createElement('a'); - input.innerText = '@'; - input.searchable = true; - range.insertNode(input); - var node = range.getBoundingClientRect(); - range.collapse(false); - // Position - userSearch.style.position = 'fixed'; - userSearch.style.top = node.top + node.height + 10 + 'px'; - userSearch.style.left = node.left + 2 + 'px'; - } - /** * Extract images from a HTML string */ @@ -5161,7 +5197,7 @@ jSuites.editor = (function(el, options) { */ var appendImage = function(image) { if (! snippet.innerHTML) { - appendElement({}); + obj.appendSnippet({}); } snippet.children[0].appendChild(image); updateTotalImages(); @@ -5171,7 +5207,7 @@ jSuites.editor = (function(el, options) { * Append snippet * @Param object data */ - var appendElement = function(data) { + obj.appendSnippet = function(data) { // Reset snippet snippet.innerHTML = ''; @@ -5199,86 +5235,8 @@ jSuites.editor = (function(el, options) { } } - editor.appendChild(document.createElement('br')); - editor.appendChild(snippet); - } - - var verifyEditor = function() { - clearTimeout(editorTimer); - editorTimer = setTimeout(function() { - var snippet = editor.querySelector('.jsnippet'); - if (! snippet) { - var html = editor.innerHTML.replace(/\n/g, ' '); - var container = document.createElement('div'); - container.innerHTML = html; - var text = container.innerText; - var url = jSuites.editor.detectUrl(text); - - if (url) { - if (url[0].substr(-3) == 'jpg' || url[0].substr(-3) == 'png' || url[0].substr(-3) == 'gif') { - obj.addImage(url[0], true); - } else { - var id = jSuites.editor.youtubeParser(url[0]); - obj.parseWebsite(url[0], id); - } - } - } - }, 1000); - } - - obj.parseContent = function() { - verifyEditor(); - } - - obj.parseWebsite = function(url, youtubeId) { - if (! obj.options.remoteParser) { - console.log('The remoteParser is not defined'); - } else { - // Youtube definitions - if (youtubeId) { - var url = 'https://www.youtube.com/watch?v=' + youtubeId; - } - - var p = { - title: '', - description: '', - image: '', - host: url.split('/')[2], - url: url, - } - - jSuites.ajax({ - url: obj.options.remoteParser + encodeURI(url.trim()), - method: 'GET', - dataType: 'json', - success: function(result) { - // Get title - if (result.title) { - p.title = result.title; - } - // Description - if (result.description) { - p.description = result.description; - } - // Host - if (result.host) { - p.host = result.host; - } - // Url - if (result.url) { - p.url = result.url; - } - // Append snippet - appendElement(p); - // Add image - if (result.image) { - obj.addImage(result.image, true); - } else if (result['og:image']) { - obj.addImage(result['og:image'], true); - } - } - }); - } + obj.editor.appendChild(document.createElement('br')); + obj.editor.appendChild(snippet); } /** @@ -5286,13 +5244,13 @@ jSuites.editor = (function(el, options) { */ obj.setData = function(o) { if (typeof(o) == 'object') { - editor.innerHTML = o.content; + obj.editor.innerHTML = o.content; } else { - editor.innerHTML = o; + obj.editor.innerHTML = o; } if (obj.options.focus) { - jSuites.editor.setCursor(editor, true); + jSuites.editor.setCursor(obj.editor, true); } // Reset files container @@ -5300,7 +5258,7 @@ jSuites.editor = (function(el, options) { } obj.getFiles = function() { - var f = editor.querySelectorAll('.jfile'); + var f = obj.editor.querySelectorAll('.jfile'); var d = []; for (var i = 0; i < f.length; i++) { if (files[f[i].src]) { @@ -5311,7 +5269,7 @@ jSuites.editor = (function(el, options) { } obj.getText = function() { - return editor.innerText; + return obj.editor.innerText; } /** @@ -5319,7 +5277,7 @@ jSuites.editor = (function(el, options) { */ obj.getData = function(json) { if (! json) { - var data = editor.innerHTML; + var data = obj.editor.innerHTML; } else { var data = { content : '', @@ -5357,25 +5315,9 @@ jSuites.editor = (function(el, options) { } } - // Users - if (userSearch) { - // Get tag users - var tagged = editor.querySelectorAll('a[data-user]'); - if (tagged.length) { - data.users = []; - for (var i = 0; i < tagged.length; i++) { - var userId = tagged[i].getAttribute('data-user'); - if (userId) { - data.users.push(userId); - } - } - data.users = data.users.join(','); - } - } - // Get content var d = document.createElement('div'); - d.innerHTML = editor.innerHTML; + d.innerHTML = obj.editor.innerHTML; var s = d.querySelector('.jsnippet'); if (s) { s.remove(); @@ -5386,6 +5328,9 @@ jSuites.editor = (function(el, options) { text = text.replace(/<\/div>/g, "<\/div>\n"); text = text.replace(/<(?:.|\n)*?>/gm, ""); data.content = text.trim(); + + // Process extensions + processExtensions('getData', data); } return data; @@ -5393,7 +5338,7 @@ jSuites.editor = (function(el, options) { // Reset obj.reset = function() { - editor.innerHTML = ''; + obj.editor.innerHTML = ''; snippet.innerHTML = ''; files = []; } @@ -5422,7 +5367,8 @@ jSuites.editor = (function(el, options) { content: data.result, } - insertNodeAtCaret(newImage); + //insertNodeAtCaret(newImage); + document.execCommand('insertHtml', false, newImage.outerHTML); }); } } @@ -5461,6 +5407,8 @@ jSuites.editor = (function(el, options) { newImage.src = window.URL.createObjectURL(blob); newImage.classList.add('jfile'); newImage.setAttribute('tabindex', '900'); + newImage.setAttribute('width', img.width); + newImage.setAttribute('height', img.height); files[newImage.src] = { file: newImage.src, extension: extension, @@ -5472,7 +5420,8 @@ jSuites.editor = (function(el, options) { // Just to understand the attachment is part of a snippet files[newImage.src].snippet = true; } else { - insertNodeAtCaret(newImage); + //insertNodeAtCaret(newImage); + document.execCommand('insertHtml', false, newImage.outerHTML); } change(); @@ -5530,203 +5479,41 @@ jSuites.editor = (function(el, options) { // Destroy obj.destroy = function() { - editor.removeEventListener('mouseup', editorMouseUp); - editor.removeEventListener('mousedown', editorMouseDown); - editor.removeEventListener('mousemove', editorMouseMove); - editor.removeEventListener('keyup', editorKeyUp); - editor.removeEventListener('keydown', editorKeyDown); - editor.removeEventListener('dragstart', editorDragStart); - editor.removeEventListener('dragenter', editorDragEnter); - editor.removeEventListener('dragover', editorDragOver); - editor.removeEventListener('drop', editorDrop); - editor.removeEventListener('paste', editorPaste); - editor.removeEventListener('blur', editorBlur); - editor.removeEventListener('focus', editorFocus); + obj.editor.removeEventListener('mouseup', editorMouseUp); + obj.editor.removeEventListener('mousedown', editorMouseDown); + obj.editor.removeEventListener('mousemove', editorMouseMove); + obj.editor.removeEventListener('keyup', editorKeyUp); + obj.editor.removeEventListener('keydown', editorKeyDown); + obj.editor.removeEventListener('dragstart', editorDragStart); + obj.editor.removeEventListener('dragenter', editorDragEnter); + obj.editor.removeEventListener('dragover', editorDragOver); + obj.editor.removeEventListener('drop', editorDrop); + obj.editor.removeEventListener('paste', editorPaste); + obj.editor.removeEventListener('blur', editorBlur); + obj.editor.removeEventListener('focus', editorFocus); el.editor = null; el.classList.remove('jeditor-container'); toolbar.remove(); snippet.remove(); - editor.remove(); + obj.editor.remove(); } - var isLetter = function (str) { - var regex = /([\u0041-\u005A\u0061-\u007A\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u0527\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0\u08A2-\u08AC\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0977\u0979-\u097F\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C33\u0C35-\u0C39\u0C3D\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191C\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA697\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA793\uA7A0-\uA7AA\uA7F8-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA80-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]+)/g; - return str.match(regex) ? 1 : 0; - } - - // Event handlers - var editorMouseUp = function(e) { - if (editorAction && editorAction.e) { - editorAction.e.classList.remove('resizing'); - } - - editorAction = false; - } - - var editorMouseDown = function(e) { - var close = function(snippet) { - var rect = snippet.getBoundingClientRect(); - if (rect.width - (e.clientX - rect.left) < 40 && e.clientY - rect.top < 40) { - snippet.innerHTML = ''; - snippet.remove(); - } - } - - if (e.target.tagName == 'IMG') { - if (e.target.style.cursor) { - var rect = e.target.getBoundingClientRect(); - editorAction = { - e: e.target, - x: e.clientX, - y: e.clientY, - w: rect.width, - h: rect.height, - d: e.target.style.cursor, - } - - if (! e.target.width) { - e.target.width = rect.width + 'px'; - } - - if (! e.target.height) { - e.target.height = rect.height + 'px'; - } - - var s = window.getSelection(); - if (s.rangeCount) { - for (var i = 0; i < s.rangeCount; i++) { - s.removeRange(s.getRangeAt(i)); - } - } - - e.target.classList.add('resizing'); - } else { - editorAction = true; - } - } else { - if (e.target.classList.contains('jsnippet')) { - close(e.target); - } else if (e.target.parentNode.classList.contains('jsnippet')) { - close(e.target.parentNode); - } - - editorAction = true; - } - } - - var editorMouseMove = function(e) { - if (e.target.tagName == 'IMG' && ! e.target.parentNode.classList.contains('jsnippet-image') && obj.options.allowImageResize == true) { - if (e.target.getAttribute('tabindex')) { - var rect = e.target.getBoundingClientRect(); - if (e.clientY - rect.top < 5) { - if (rect.width - (e.clientX - rect.left) < 5) { - e.target.style.cursor = 'ne-resize'; - } else if (e.clientX - rect.left < 5) { - e.target.style.cursor = 'nw-resize'; - } else { - e.target.style.cursor = 'n-resize'; - } - } else if (rect.height - (e.clientY - rect.top) < 5) { - if (rect.width - (e.clientX - rect.left) < 5) { - e.target.style.cursor = 'se-resize'; - } else if (e.clientX - rect.left < 5) { - e.target.style.cursor = 'sw-resize'; - } else { - e.target.style.cursor = 's-resize'; - } - } else if (rect.width - (e.clientX - rect.left) < 5) { - e.target.style.cursor = 'e-resize'; - } else if (e.clientX - rect.left < 5) { - e.target.style.cursor = 'w-resize'; - } else { - e.target.style.cursor = ''; - } - } - } - - // Move - if (e.which == 1 && editorAction && editorAction.d) { - if (editorAction.d == 'e-resize' || editorAction.d == 'ne-resize' || editorAction.d == 'se-resize') { - editorAction.e.width = (editorAction.w + (e.clientX - editorAction.x)); - - if (e.shiftKey) { - var newHeight = (e.clientX - editorAction.x) * (editorAction.h / editorAction.w); - editorAction.e.height = editorAction.h + newHeight; - } else { - var newHeight = null; - } - } - - if (! newHeight) { - if (editorAction.d == 's-resize' || editorAction.d == 'se-resize' || editorAction.d == 'sw-resize') { - if (! e.shiftKey) { - editorAction.e.height = editorAction.h + (e.clientY - editorAction.y); - } - } - } - } - } - - var editorKeyUp = function(e) { - if (! editor.innerHTML) { - editor.innerHTML = '

'; - } - - if (userSearch) { - var t = jSuites.getNode(); - if (t) { - if (t.searchable === true) { - if (t.innerText && t.innerText.substr(0,1) == '@') { - userSearchInstance(t.innerText.substr(1)); - } - } else if (t.searchable === false) { - if (t.innerText !== t.getAttribute('data-label')) { - t.searchable = true; - t.removeAttribute('href'); - } - } - } - } - - if (typeof(obj.options.onkeyup) == 'function') { - obj.options.onkeyup(el, obj, e); - } - } - - - var editorKeyDown = function(e) { - // Check for URL - if (obj.options.parseURL == true) { - verifyEditor(); - } - - if (userSearch) { - if (e.key == '@') { - createUserSearchNode(editor); - e.preventDefault(); - } else { - if (userSearchInstance.isOpened()) { - userSearchInstance.keydown(e); - } - } - } - - if (typeof(obj.options.onkeydown) == 'function') { - obj.options.onkeydown(el, obj, e); - } - - if (e.key == 'Delete') { - if (e.target.tagName == 'IMG' && e.target.parentNode.classList.contains('jsnippet-image')) { - e.target.remove(); - updateTotalImages(); - } - } + obj.upload = function() { + jSuites.click(obj.file); } // Elements to be removed - var remove = [HTMLUnknownElement,HTMLAudioElement,HTMLEmbedElement,HTMLIFrameElement,HTMLTextAreaElement,HTMLInputElement,HTMLScriptElement]; + var remove = [ + HTMLUnknownElement, + HTMLAudioElement, + HTMLEmbedElement, + HTMLIFrameElement, + HTMLTextAreaElement, + HTMLInputElement, + HTMLScriptElement + ]; // Valid properties var validProperty = ['width', 'height', 'align', 'border', 'src', 'tabindex']; @@ -5795,6 +5582,13 @@ jSuites.editor = (function(el, options) { } } + var select = function(e) { + var s = window.getSelection() + var r = document.createRange(); + r.selectNode(e); + s.addRange(r) + } + var filter = function(data) { if (data) { data = data.replace(new RegExp('', 'gsi'), ''); @@ -5829,7 +5623,7 @@ jSuites.editor = (function(el, options) { html.map(function(v) { var d = document.createElement('div'); d.innerText = v; - editor.appendChild(d); + obj.editor.appendChild(d); }); } else { html = html.map(function(v) { @@ -5912,16 +5706,14 @@ jSuites.editor = (function(el, options) { } var editorBlur = function(e) { - if (userSearch && userSearchInstance.isOpened()) { - userSearchInstance.close(); - } - + // Process extensions + processExtensions('onevent', e); + // Apply changes + change(e); // Blur if (typeof(obj.options.onblur) == 'function') { obj.options.onblur(el, obj, e); } - - change(e); } var editorFocus = function(e) { @@ -5931,82 +5723,260 @@ jSuites.editor = (function(el, options) { } } - editor.addEventListener('mouseup', editorMouseUp); - editor.addEventListener('mousedown', editorMouseDown); - editor.addEventListener('mousemove', editorMouseMove); - editor.addEventListener('keyup', editorKeyUp); - editor.addEventListener('keydown', editorKeyDown); - editor.addEventListener('dragstart', editorDragStart); - editor.addEventListener('dragenter', editorDragEnter); - editor.addEventListener('dragover', editorDragOver); - editor.addEventListener('drop', editorDrop); - editor.addEventListener('paste', editorPaste); - editor.addEventListener('focus', editorFocus); - editor.addEventListener('blur', editorBlur); - - // Onload - if (typeof(obj.options.onload) == 'function') { - obj.options.onload(el, obj, editor); + var editorKeyUp = function(e) { + if (! obj.editor.innerHTML) { + obj.editor.innerHTML = '

'; + } + if (typeof(obj.options.onkeyup) == 'function') { + obj.options.onkeyup(el, obj, e); + } } - // Set value to the editor - editor.innerHTML = value; + var editorKeyDown = function(e) { + // Process extensions + processExtensions('onevent', e); - // Append editor to the containre - el.appendChild(editor); + if (e.key == 'Delete') { + if (e.target.tagName == 'IMG') { + var parent = e.target.parentNode; + select(e.target); + if (parent.classList.contains('jsnippet-image')) { + updateTotalImages(); + } + } + } + if (typeof(obj.options.onkeydown) == 'function') { + obj.options.onkeydown(el, obj, e); + } + } + + var editorMouseUp = function(e) { + if (editorAction && editorAction.e) { + editorAction.e.classList.remove('resizing'); + + if (editorAction.e.changed == true) { + var image = editorAction.e.cloneNode() + image.width = parseInt(editorAction.e.style.width) || editorAction.e.getAttribute('width'); + image.height = parseInt(editorAction.e.style.height) || editorAction.e.getAttribute('height'); + editorAction.e.style.width = ''; + editorAction.e.style.height = ''; + select(editorAction.e); + document.execCommand('insertHtml', false, image.outerHTML); + } + } + + editorAction = false; + } + + var editorMouseDown = function(e) { + var close = function(snippet) { + var rect = snippet.getBoundingClientRect(); + if (rect.width - (e.clientX - rect.left) < 40 && e.clientY - rect.top < 40) { + snippet.innerHTML = ''; + snippet.remove(); + } + } + + if (e.target.tagName == 'IMG') { + if (e.target.style.cursor) { + var rect = e.target.getBoundingClientRect(); + editorAction = { + e: e.target, + x: e.clientX, + y: e.clientY, + w: rect.width, + h: rect.height, + d: e.target.style.cursor, + } + + if (! e.target.getAttribute('width')) { + e.target.setAttribute('width', rect.width) + } + + if (! e.target.getAttribute('height')) { + e.target.setAttribute('height', rect.height) + } + + var s = window.getSelection(); + if (s.rangeCount) { + for (var i = 0; i < s.rangeCount; i++) { + s.removeRange(s.getRangeAt(i)); + } + } + + e.target.classList.add('resizing'); + } else { + editorAction = true; + } + } else { + if (e.target.classList.contains('jsnippet')) { + close(e.target); + } else if (e.target.parentNode.classList.contains('jsnippet')) { + close(e.target.parentNode); + } + + editorAction = true; + } + } + + var editorMouseMove = function(e) { + if (e.target.tagName == 'IMG' && ! e.target.parentNode.classList.contains('jsnippet-image') && obj.options.allowImageResize == true) { + if (e.target.getAttribute('tabindex')) { + var rect = e.target.getBoundingClientRect(); + if (e.clientY - rect.top < 5) { + if (rect.width - (e.clientX - rect.left) < 5) { + e.target.style.cursor = 'ne-resize'; + } else if (e.clientX - rect.left < 5) { + e.target.style.cursor = 'nw-resize'; + } else { + e.target.style.cursor = 'n-resize'; + } + } else if (rect.height - (e.clientY - rect.top) < 5) { + if (rect.width - (e.clientX - rect.left) < 5) { + e.target.style.cursor = 'se-resize'; + } else if (e.clientX - rect.left < 5) { + e.target.style.cursor = 'sw-resize'; + } else { + e.target.style.cursor = 's-resize'; + } + } else if (rect.width - (e.clientX - rect.left) < 5) { + e.target.style.cursor = 'e-resize'; + } else if (e.clientX - rect.left < 5) { + e.target.style.cursor = 'w-resize'; + } else { + e.target.style.cursor = ''; + } + } + } + + // Move + if (e.which == 1 && editorAction && editorAction.d) { + if (editorAction.d == 'e-resize' || editorAction.d == 'ne-resize' || editorAction.d == 'se-resize') { + editorAction.e.style.width = (editorAction.w + (e.clientX - editorAction.x)); + + if (e.shiftKey) { + var newHeight = (e.clientX - editorAction.x) * (editorAction.h / editorAction.w); + editorAction.e.style.height = editorAction.h + newHeight; + } else { + var newHeight = null; + } + } + + if (! newHeight) { + if (editorAction.d == 's-resize' || editorAction.d == 'se-resize' || editorAction.d == 'sw-resize') { + if (! e.shiftKey) { + editorAction.e.style.height = editorAction.h + (e.clientY - editorAction.y); + } + } + } + + editorAction.e.changed = true; + } + } + + var processExtensions = function(method, data) { + if (obj.options.extensions) { + var ext = Object.keys(obj.options.extensions); + if (ext.length) { + for (var i = 0; i < ext.length; i++) + if (obj.options.extensions[ext[i]] && typeof(obj.options.extensions[ext[i]][method]) == 'function') { + obj.options.extensions[ext[i]][method].call(obj, data); + } + } + } + } + + var loadExtensions = function() { + if (obj.options.extensions) { + var ext = Object.keys(obj.options.extensions); + if (ext.length) { + for (var i = 0; i < ext.length; i++) { + if (obj.options.extensions[ext[i]] && typeof (obj.options.extensions[ext[i]]) == 'function') { + obj.options.extensions[ext[i]] = obj.options.extensions[ext[i]](el, obj); + } + } + } + } + } + + document.addEventListener('mouseup', editorMouseUp); + document.addEventListener('mousemove', editorMouseMove); + obj.editor.addEventListener('mousedown', editorMouseDown); + obj.editor.addEventListener('keyup', editorKeyUp); + obj.editor.addEventListener('keydown', editorKeyDown); + obj.editor.addEventListener('dragstart', editorDragStart); + obj.editor.addEventListener('dragenter', editorDragEnter); + obj.editor.addEventListener('dragover', editorDragOver); + obj.editor.addEventListener('drop', editorDrop); + obj.editor.addEventListener('paste', editorPaste); + obj.editor.addEventListener('focus', editorFocus); + obj.editor.addEventListener('blur', editorBlur); + + // Append editor to the container + el.appendChild(obj.editor); // Snippet if (obj.options.snippet) { - appendElement(obj.options.snippet); - } - - // Default toolbar - if (obj.options.toolbar == null) { - obj.options.toolbar = jSuites.editor.getDefaultToolbar(); + obj.appendSnippet(obj.options.snippet); } // Add toolbar if (obj.options.toolbar) { - // Append to the DOM - el.appendChild(toolbar); - // Create toolbar - jSuites.toolbar(toolbar, { - container: true, - responsive: true, - items: obj.options.toolbar - }); - } - - // Add user search - var userSearch = null; - var userSearchInstance = null; - if (obj.options.userSearch) { - userSearch = document.createElement('div'); - el.appendChild(userSearch); - - // Component - userSearchInstance = jSuites.search(userSearch, { - data: obj.options.userSearch, - placeholder: jSuites.translate('Type the name a user'), - onselect: function(a,b,c,d) { - if (userSearchInstance.isOpened()) { - var t = jSuites.getNode(); - if (t && t.searchable == true && (t.innerText.trim() && t.innerText.substr(1))) { - t.innerText = '@' + c; - t.href = '/' + c; - t.setAttribute('data-user', d); - t.setAttribute('data-label', t.innerText); - t.searchable = false; - jSuites.focus(t); - } - } + // Default toolbar configuration + if (Array.isArray(obj.options.toolbar)) { + var toolbarOptions = { + container: true, + responsive: true, + items: obj.options.toolbar } - }); + } else if (obj.options.toolbar === true) { + var toolbarOptions = { + container: true, + responsive: true, + items: [], + } + } else { + var toolbarOptions = obj.options.toolbar; + } + + // Default items + if (! (toolbarOptions.items && toolbarOptions.items.length)) { + toolbarOptions.items = jSuites.editor.getDefaultToolbar(obj); + } + + if (obj.options.toolbarOnTop) { + // Add class + el.classList.add('toolbar-on-top'); + // Append to the DOM + el.insertBefore(toolbar, el.firstChild); + } else { + // Add padding to the editor + obj.editor.style.padding = '15px'; + // Append to the DOM + el.appendChild(toolbar); + } + + // Create toolbar + jSuites.toolbar(toolbar, toolbarOptions); + + toolbar.addEventListener('click', function() { + obj.editor.focus(); + }) } + // Upload file + obj.file = document.createElement('input'); + obj.file.style.display = 'none'; + obj.file.type = 'file'; + obj.file.setAttribute('accept', 'image/*'); + obj.file.onchange = function() { + obj.addFile(this.files); + } + el.appendChild(obj.file); + // Focus to the editor - if (obj.options.focus) { - jSuites.editor.setCursor(editor, obj.options.focus == 'initial' ? true : false); + if (obj.editor.innerHTML && obj.options.focus) { + jSuites.editor.setCursor(obj.editor, obj.options.focus == 'initial' ? true : false); } // Change method @@ -6023,8 +5993,15 @@ jSuites.editor = (function(el, options) { } } + loadExtensions(); + el.editor = obj; + // Onload + if (typeof(obj.options.onload) == 'function') { + obj.options.onload(el, obj, obj.editor); + } + return obj; }); @@ -6046,219 +6023,278 @@ jSuites.editor.setCursor = function(element, first) { sel.addRange(range); } -jSuites.editor.getDomain = function(url) { - return url.replace('http://','').replace('https://','').replace('www.','').split(/[/?#]/)[0].split(/:/g)[0]; -} +jSuites.editor.getDefaultToolbar = function(obj) { -jSuites.editor.detectUrl = function(text) { - var expression = /(((https?:\/\/)|(www\.))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]+)/ig; - var links = text.match(expression); - - if (links) { - if (links[0].substr(0,3) == 'www') { - links[0] = 'http://' + links[0]; + var color = function(a,b,c) { + if (! c.color) { + var t = null; + var colorPicker = jSuites.color(c, { + onchange: function(o, v) { + if (c.k === 'color') { + document.execCommand('foreColor', false, v); + } else { + document.execCommand('backColor', false, v); + } + } + }); + c.color.open(); } } - return links; -} + var items = []; -jSuites.editor.youtubeParser = function(url) { - var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/; - var match = url.match(regExp); + items.push({ + content: 'undo', + onclick: function() { + document.execCommand('undo'); + } + }); - return (match && match[7].length == 11) ? match[7] : false; -} + items.push({ + content: 'redo', + onclick: function() { + document.execCommand('redo'); + } + }); -jSuites.editor.getDefaultToolbar = function() { - return [ - { - content: 'undo', - onclick: function() { - document.execCommand('undo'); + items.push({ + type: 'divisor' + }); + + if (obj.options.toolbarOnTop) { + items.push({ + type: 'select', + width: '140px', + options: ['Default', 'Verdana', 'Arial', 'Courier New'], + render: function (e) { + return '' + e + ''; + }, + onchange: function (a,b,c,d,e) { + document.execCommand("fontName", false, d); } - }, - { - content: 'redo', - onclick: function() { - document.execCommand('redo'); - } - }, - { - type:'divisor' - }, - { - content: 'format_bold', - onclick: function(a,b,c) { - document.execCommand('bold'); + }); - if (document.queryCommandState("bold")) { - c.classList.add('selected'); - } else { - c.classList.remove('selected'); - } + items.push({ + type: 'select', + content: 'format_size', + options: ['x-small', 'small', 'medium', 'large', 'x-large'], + render: function (e) { + return '' + e + ''; + }, + onchange: function (a,b,c,d,e) { + //var html = `${text}`; + //document.execCommand('insertHtml', false, html); + document.execCommand("fontSize", false, parseInt(e)+1); + //var f = window.getSelection().anchorNode.parentNode + //f.removeAttribute("size"); + //f.style.fontSize = d; } - }, - { - content: 'format_italic', - onclick: function(a,b,c) { - document.execCommand('italic'); + }); - if (document.queryCommandState("italic")) { - c.classList.add('selected'); - } else { - c.classList.remove('selected'); - } + items.push({ + type: 'select', + options: ['format_align_left', 'format_align_center', 'format_align_right', 'format_align_justify'], + render: function (e) { + return '' + e + ''; + }, + onchange: function (a,b,c,d,e) { + var options = ['JustifyLeft','justifyCenter','justifyRight','justifyFull']; + document.execCommand(options[e]); } - }, - { - content: 'format_underline', - onclick: function(a,b,c) { - document.execCommand('underline'); + }); - if (document.queryCommandState("underline")) { - c.classList.add('selected'); - } else { - c.classList.remove('selected'); - } - } - }, - { - type:'divisor' - }, - { - content: 'format_list_bulleted', - onclick: function(a,b,c) { - document.execCommand('insertUnorderedList'); + items.push({ + type: 'divisor' + }); - if (document.queryCommandState("insertUnorderedList")) { - c.classList.add('selected'); - } else { - c.classList.remove('selected'); - } - } - }, - { - content: 'format_list_numbered', - onclick: function(a,b,c) { - document.execCommand('insertOrderedList'); + items.push({ + content: 'format_color_text', + k: 'color', + onclick: color, + }); - if (document.queryCommandState("insertOrderedList")) { - c.classList.add('selected'); - } else { - c.classList.remove('selected'); - } - } - }, - { - content: 'format_indent_increase', - onclick: function(a,b,c) { - document.execCommand('indent', true, null); + items.push({ + content: 'format_color_fill', + k: 'background-color', + onclick: color, + }); + } - if (document.queryCommandState("indent")) { - c.classList.add('selected'); - } else { - c.classList.remove('selected'); - } - } - }, - { - content: 'format_indent_decrease', - onclick: function() { - document.execCommand('outdent'); + items.push({ + content: 'format_bold', + onclick: function(a,b,c) { + document.execCommand('bold'); - if (document.queryCommandState("outdent")) { - this.classList.add('selected'); - } else { - this.classList.remove('selected'); - } - } - }/*, - { - icon: ['format_align_left', 'format_align_right', 'format_align_center'], - onclick: function() { - document.execCommand('justifyCenter'); - - if (document.queryCommandState("justifyCenter")) { - this.classList.add('selected'); - } else { - this.classList.remove('selected'); - } + if (document.queryCommandState("bold")) { + c.classList.add('selected'); + } else { + c.classList.remove('selected'); } } - { - type:'select', - items: ['Verdana','Arial','Courier New'], - onchange: function() { - } - }, - { - type:'select', - items: ['10px','12px','14px','16px','18px','20px','22px'], - onchange: function() { - } - }, - { - icon:'format_align_left', - onclick: function() { - document.execCommand('JustifyLeft'); + }); - if (document.queryCommandState("JustifyLeft")) { - this.classList.add('selected'); - } else { - this.classList.remove('selected'); - } - } - }, - { - icon:'format_align_center', - onclick: function() { - document.execCommand('justifyCenter'); + items.push({ + content: 'format_italic', + onclick: function(a,b,c) { + document.execCommand('italic'); - if (document.queryCommandState("justifyCenter")) { - this.classList.add('selected'); - } else { - this.classList.remove('selected'); - } + if (document.queryCommandState("italic")) { + c.classList.add('selected'); + } else { + c.classList.remove('selected'); } - }, - { - icon:'format_align_right', - onclick: function() { - document.execCommand('justifyRight'); + } + }); - if (document.queryCommandState("justifyRight")) { - this.classList.add('selected'); - } else { - this.classList.remove('selected'); - } - } - }, - { - icon:'format_align_justify', - onclick: function() { - document.execCommand('justifyFull'); + items.push({ + content: 'format_underline', + onclick: function(a,b,c) { + document.execCommand('underline'); - if (document.queryCommandState("justifyFull")) { - this.classList.add('selected'); - } else { - this.classList.remove('selected'); - } + if (document.queryCommandState("underline")) { + c.classList.add('selected'); + } else { + c.classList.remove('selected'); } - }, - { - icon:'format_list_bulleted', - onclick: function() { - document.execCommand('insertUnorderedList'); + } + }); - if (document.queryCommandState("insertUnorderedList")) { - this.classList.add('selected'); - } else { - this.classList.remove('selected'); - } + items.push({ + type:'divisor' + }); + + items.push({ + content: 'format_list_bulleted', + onclick: function(a,b,c) { + document.execCommand('insertUnorderedList'); + + if (document.queryCommandState("insertUnorderedList")) { + c.classList.add('selected'); + } else { + c.classList.remove('selected'); } - }*/ - ]; + } + }); + + items.push({ + content: 'format_list_numbered', + onclick: function(a,b,c) { + document.execCommand('insertOrderedList'); + + if (document.queryCommandState("insertOrderedList")) { + c.classList.add('selected'); + } else { + c.classList.remove('selected'); + } + } + }); + + items.push({ + content: 'format_indent_increase', + onclick: function(a,b,c) { + document.execCommand('indent', true, null); + + if (document.queryCommandState("indent")) { + c.classList.add('selected'); + } else { + c.classList.remove('selected'); + } + } + }); + + items.push({ + content: 'format_indent_decrease', + onclick: function() { + document.execCommand('outdent'); + + if (document.queryCommandState("outdent")) { + this.classList.add('selected'); + } else { + this.classList.remove('selected'); + } + } + }); + + if (obj.options.toolbarOnTop) { + items.push({ + type: 'divisor' + }); + + items.push({ + content: 'photo', + onclick: function () { + obj.upload(); + } + }); + + items.push({ + type: 'select', + content: 'table_view', + columns: 10, + right: true, + options: [ + '0x0', '1x0', '2x0', '3x0', '4x0', '5x0', '6x0', '7x0', '8x0', '9x0', + '0x1', '1x1', '2x1', '3x1', '4x1', '5x1', '6x1', '7x1', '8x1', '9x1', + '0x2', '1x2', '2x2', '3x2', '4x2', '5x2', '6x2', '7x2', '8x2', '9x2', + '0x3', '1x3', '2x3', '3x3', '4x3', '5x3', '6x3', '7x3', '8x3', '9x3', + '0x4', '1x4', '2x4', '3x4', '4x4', '5x4', '6x4', '7x4', '8x4', '9x4', + '0x5', '1x5', '2x5', '3x5', '4x5', '5x5', '6x5', '7x5', '8x5', '9x5', + '0x6', '1x6', '2x6', '3x6', '4x6', '5x6', '6x6', '7x6', '8x6', '9x6', + '0x7', '1x7', '2x7', '3x7', '4x7', '5x7', '6x7', '7x7', '8x7', '9x7', + '0x8', '1x8', '2x8', '3x8', '4x8', '5x8', '6x8', '7x8', '8x8', '9x8', + '0x9', '1x9', '2x9', '3x9', '4x9', '5x9', '6x9', '7x9', '8x9', '9x9', + ], + render: function (e, item) { + if (item) { + item.onmouseover = this.onmouseover; + e = e.split('x'); + item.setAttribute('data-x', e[0]); + item.setAttribute('data-y', e[1]); + } + var element = document.createElement('div'); + item.style.margin = '1px'; + item.style.border = '1px solid #ddd'; + return element; + }, + onmouseover: function (e) { + var x = parseInt(e.target.getAttribute('data-x')); + var y = parseInt(e.target.getAttribute('data-y')); + for (var i = 0; i < e.target.parentNode.children.length; i++) { + var element = e.target.parentNode.children[i]; + var ex = parseInt(element.getAttribute('data-x')); + var ey = parseInt(element.getAttribute('data-y')); + if (ex <= x && ey <= y) { + element.style.backgroundColor = '#cae1fc'; + element.style.borderColor = '#2977ff'; + } else { + element.style.backgroundColor = ''; + element.style.borderColor = '#ddd'; + } + } + }, + onchange: function (a, b, c) { + c = c.split('x'); + var table = document.createElement('table'); + var tbody = document.createElement('tbody'); + for (var y = 0; y <= c[1]; y++) { + var tr = document.createElement('tr'); + for (var x = 0; x <= c[0]; x++) { + var td = document.createElement('td'); + td.innerHTML = ''; + tr.appendChild(td); + } + tbody.appendChild(tr); + } + table.appendChild(tbody); + table.setAttribute('width', '100%'); + table.setAttribute('cellpadding', '6'); + table.setAttribute('cellspacing', '0'); + document.execCommand('insertHTML', false, table.outerHTML); + } + }); + } + + return items; } @@ -7099,10 +7135,6 @@ jSuites.sha512 = (function(str) { return binb2hex(binarray); }); -if (! jSuites.login) { - jSuites.login = {}; - jSuites.login.sha512 = jSuites.sha512; -} jSuites.image = jSuites.upload = (function(el, options) { var obj = {}; @@ -7472,12 +7504,19 @@ jSuites.loading = (function() { var loading = null; - obj.show = function() { + obj.show = function(timeout) { if (! loading) { loading = document.createElement('div'); loading.className = 'jloading'; } document.body.appendChild(loading); + + // Max timeout in seconds + if (timeout > 0) { + setTimeout(function() { + obj.hide(); + }, timeout * 1000) + } } obj.hide = function() { @@ -7501,7 +7540,7 @@ jSuites.mask = (function() { // Number numeric: [ '0{1}(.{1}0+)?' ], // Data tokens - datetime: [ 'YYYY', 'YYY', 'YY', 'MMMMM', 'MMMM', 'MMM', 'MM', 'DDDDD', 'DDDD', 'DDD', 'DD', 'DY', 'DAY', 'WD', 'D', 'Q', 'HH24', 'HH12', 'HH', '\\[H\\]', 'H', 'AM/PM', 'PM', 'AM', 'MI', 'SS', 'MS', 'MONTH', 'MON', 'Y', 'M' ], + datetime: [ 'YYYY', 'YYY', 'YY', 'MMMMM', 'MMMM', 'MMM', 'MM', 'DDDDD', 'DDDD', 'DDD', 'DD', 'DY', 'DAY', 'WD', 'D', 'Q', 'MONTH', 'MON', 'HH24', 'HH12', 'HH', '\\[H\\]', 'H', 'AM/PM', 'PM', 'AM', 'MI', 'SS', 'MS', 'Y', 'M' ], // Other general: [ 'A', '0', '[0-9a-zA-Z\$]+', '.'] } @@ -7530,6 +7569,31 @@ jSuites.mask = (function() { return v; } + var extractDate = function() { + var v = ''; + if (! (this.date[0] && this.date[1] && this.date[2]) && (this.date[3] || this.date[4])) { + if (this.mask.toLowerCase().indexOf('[h]') !== -1) { + v = parseInt(this.date[3]); + } else { + v = parseInt(this.date[3]) % 24; + } + if (this.date[4]) { + v += parseFloat(this.date[4] / 60); + } + v /= 24; + } else if (this.date[0] || this.date[1] || this.date[2] || this.date[3] || this.date[4] || this.date[5]) { + if (this.date[0] && this.date[1] && ! this.date[2]) { + this.date[2] = 1; + } + var t = jSuites.calendar.now(this.date); + v = jSuites.calendar.dateToNum(t); + if (this.date[4]) { + v += parseFloat(this.date[4] / 60); + } + } + return v; + } + var isBlank = function(v) { return v === null || v === '' || v === undefined ? true : false; } @@ -7857,6 +7921,10 @@ jSuites.mask = (function() { if (isBlank(this.values[this.index])) { this.values[this.index] = ''; } + if (this.event && this.event.inputType && this.event.inputType.indexOf('delete') > -1) { + this.values[this.index] += v; + return; + } var pos = 0; var count = 0; var value = (this.values[this.index] + v).toLowerCase(); @@ -7884,12 +7952,18 @@ jSuites.mask = (function() { this.date[1] = ret + 1; } }, + 'MON': function(v) { + parser['MMM'].call(this, v); + }, 'MMMM': function(v) { var ret = parser.FIND.call(this, v, monthsFull); if (ret !== undefined) { this.date[1] = ret + 1; } }, + 'MONTH': function(v) { + parser['MMMM'].call(this, v); + }, 'MMMMM': function(v) { if (isBlank(this.values[this.index])) { this.values[this.index] = ''; @@ -8021,9 +8095,15 @@ jSuites.mask = (function() { 'DDD': function(v) { parser.FIND.call(this, v, weekDays); }, + 'DY': function(v) { + parser['DDD'].call(this, v); + }, 'DDDD': function(v) { parser.FIND.call(this, v, weekDaysFull); }, + 'DAY': function(v) { + parser['DDDD'].call(this, v); + }, 'HH12': function(v, two) { if (isBlank(this.values[this.index])) { if (parseInt(v) > 1 && parseInt(v) < 10) { @@ -8553,6 +8633,7 @@ jSuites.mask = (function() { // Get tokens o.tokens = getTokens.call(o, o.mask); } + // On new input if (typeof(e) !== 'object' || ! e.inputType || ! e.inputType.indexOf('insert') || ! e.inputType.indexOf('delete')) { // Start transformation @@ -8565,6 +8646,8 @@ jSuites.mask = (function() { } else { // Get tokens o.methods = getMethods.call(o, o.tokens); + o.event = e; + // Go through all tokes while (o.position < o.value.length && typeof(o.tokens[o.index]) !== 'undefined') { // Get the appropriate parser @@ -8698,7 +8781,9 @@ jSuites.mask = (function() { var t = options.mask.split(';'); options.mask = t[0]; } + options.mask = options.mask.replace(new RegExp(/\[h]/),'|h|'); options.mask = options.mask.replace(new RegExp(/\[.*?\]/),''); + options.mask = options.mask.replace(new RegExp(/\|h\|/),'[h]'); } // Get decimal @@ -8725,9 +8810,7 @@ jSuites.mask = (function() { if (jSuites.isNumeric(v)) { value = v; } else { - var value = getDate.call(o); - var t = jSuites.calendar.now(o.date); - value = jSuites.calendar.dateToNum(t); + var value = extractDate.call(o); } } else { var value = Extract.call(options, v); @@ -8802,7 +8885,6 @@ jSuites.mask = (function() { if (t) { value = t; } - if (options.mask && fullMask) { fillWithBlanks = true; } @@ -8814,7 +8896,7 @@ jSuites.mask = (function() { // Number of decimal places if (typeof(value) === 'number') { var t = null; - if (options.mask && fullMask) { + if (options.mask && fullMask && ((''+value).indexOf('e') === -1)) { var d = getDecimal.call(options, options.mask); if (options.mask.indexOf(d) !== -1) { d = options.mask.split(d); @@ -8927,12 +9009,14 @@ jSuites.modal = (function(el, options) { url: null, onopen: null, onclose: null, + onload: null, closed: false, width: null, height: null, title: null, padding: null, backdrop: true, + icon: null, }; // Loop through our object @@ -8954,6 +9038,12 @@ jSuites.modal = (function(el, options) { temp.appendChild(el.children[0]); } + obj.title = document.createElement('div'); + obj.title.className = 'jmodal_title'; + if (obj.options.icon) { + obj.title.setAttribute('data-icon', obj.options.icon); + } + obj.content = document.createElement('div'); obj.content.className = 'jmodal_content'; obj.content.innerHTML = el.innerHTML; @@ -8964,6 +9054,7 @@ jSuites.modal = (function(el, options) { obj.container = document.createElement('div'); obj.container.className = 'jmodal'; + obj.container.appendChild(obj.title); obj.container.appendChild(obj.content); if (obj.options.padding) { @@ -8976,10 +9067,11 @@ jSuites.modal = (function(el, options) { obj.container.style.height = obj.options.height; } if (obj.options.title) { - obj.container.setAttribute('title', obj.options.title); - } else { - obj.container.classList.add('no-title'); + var title = document.createElement('h4'); + title.innerText = obj.options.title; + obj.title.appendChild(title); } + el.innerHTML = ''; el.style.display = 'none'; el.appendChild(obj.container); @@ -9094,7 +9186,7 @@ jSuites.modal = (function(el, options) { if (rect.width - (x - rect.left) < 50 && (y - rect.top) < 50) { // Do nothing } else { - if (e.target.getAttribute('title') && (y - rect.top) < 50) { + if (y - rect.top < 50) { if (document.selection) { document.selection.empty(); } else if ( window.getSelection ) { @@ -9150,12 +9242,20 @@ jSuites.modal = (function(el, options) { if (! obj.options.closed) { obj.open(); } + + if (typeof(obj.options.onload) === 'function') { + obj.options.onload(obj); + } } }); } else { if (! obj.options.closed) { obj.open(); } + + if (typeof(obj.options.onload) === 'function') { + obj.options.onload(obj); + } } // Keep object available from the node @@ -9384,6 +9484,13 @@ jSuites.picker = (function(el, options) { var dropdownHeader = null; var dropdownContent = null; + /** + * The element passed is a DOM element + */ + var isDOM = function(o) { + return (o instanceof Element || o instanceof HTMLDocument); + } + /** * Create the content options */ @@ -9401,7 +9508,12 @@ jSuites.picker = (function(el, options) { dropdownItem.k = keys[i]; dropdownItem.v = obj.options.data[keys[i]]; // Label - dropdownItem.innerHTML = obj.getLabel(keys[i]); + var item = obj.getLabel(keys[i], dropdownItem); + if (isDOM(item)) { + dropdownItem.appendChild(item); + } else { + dropdownItem.innerHTML = item; + } // Append dropdownContent.appendChild(dropdownItem); } @@ -9417,6 +9529,7 @@ jSuites.picker = (function(el, options) { data: null, render: null, onchange: null, + onmouseover: null, onselect: null, onopen: null, onclose: null, @@ -9424,8 +9537,10 @@ jSuites.picker = (function(el, options) { width: null, header: true, right: false, + bottom: false, content: false, columns: null, + grid: null, height: null, } @@ -9468,8 +9583,13 @@ jSuites.picker = (function(el, options) { } if (obj.options.columns > 0) { - dropdownContent.classList.add('jpicker-columns'); - dropdownContent.style.width = obj.options.width ? obj.options.width : 36 * obj.options.columns + 'px'; + if (! obj.options.grid) { + dropdownContent.classList.add('jpicker-columns'); + dropdownContent.style.width = obj.options.width ? obj.options.width : 36 * obj.options.columns + 'px'; + } else { + dropdownContent.classList.add('jpicker-grid'); + dropdownContent.style.gridTemplateColumns = 'repeat(' + obj.options.grid + ', 1fr)'; + } } if (isNaN(obj.options.value)) { @@ -9514,22 +9634,29 @@ jSuites.picker = (function(el, options) { } } - obj.getLabel = function(v) { + obj.getLabel = function(v, item) { var label = obj.options.data[v] || null; if (typeof(obj.options.render) == 'function') { - label = obj.options.render(label); + label = obj.options.render(label, item); } return label; } obj.setLabel = function(v) { - if (obj.options.content) { - var label = '' + obj.options.content + ''; - } else { - var label = obj.getLabel(v); - } + var item; - dropdownHeader.innerHTML = label; + if (obj.options.content) { + item = '' + obj.options.content + ''; + } else { + item = obj.getLabel(v, null); + } + // Label + if (isDOM(item)) { + dropdownHeader.innerHTML = ''; + dropdownHeader.appendChild(item); + } else { + dropdownHeader.innerHTML = item; + } } obj.open = function() { @@ -9549,7 +9676,7 @@ jSuites.picker = (function(el, options) { var rectHeader = dropdownHeader.getBoundingClientRect(); var rectContent = dropdownContent.getBoundingClientRect(); - if (window.innerHeight < rectHeader.bottom + rectContent.height) { + if (window.innerHeight < rectHeader.bottom + rectContent.height || obj.options.bottom) { top = -1 * (rectContent.height + 4); } else { top = rectHeader.height + 4; @@ -10139,7 +10266,7 @@ jSuites.search = (function(el, options) { } obj.keyup = function(e) { - if (! obj.options.searchByNode) { + if (! obj.options.searchByNode && obj.options.input) { if (obj.options.input.tagName === 'DIV') { var terms = obj.options.input.innerText; } else { @@ -11403,7 +11530,7 @@ jSuites.tags = (function(el, options) { } var setFocus = function(node) { - if (el.children.length > 1) { + if (el.children.length) { var range = document.createRange(); var sel = window.getSelection(); if (! node) { @@ -11464,25 +11591,27 @@ jSuites.tags = (function(el, options) { */ var filter = function() { for (var i = 0; i < el.children.length; i++) { - // Create label design - if (! obj.getValue(i)) { - el.children[i].classList.remove('jtags_label'); - } else { - el.children[i].classList.add('jtags_label'); + if (el.children[i].tagName === 'DIV') { + // Create label design + if (!obj.getValue(i)) { + el.children[i].classList.remove('jtags_label'); + } else { + el.children[i].classList.add('jtags_label'); - // Validation in place - if (typeof(obj.options.validation) == 'function') { - if (obj.getValue(i)) { - if (! obj.options.validation(el.children[i], el.children[i].innerText, el.children[i].getAttribute('data-value'))) { - el.children[i].classList.add('jtags_error'); + // Validation in place + if (typeof (obj.options.validation) == 'function') { + if (obj.getValue(i)) { + if (!obj.options.validation(el.children[i], el.children[i].innerText, el.children[i].getAttribute('data-value'))) { + el.children[i].classList.add('jtags_error'); + } else { + el.children[i].classList.remove('jtags_error'); + } } else { el.children[i].classList.remove('jtags_error'); } } else { el.children[i].classList.remove('jtags_error'); } - } else { - el.children[i].classList.remove('jtags_error'); } } } @@ -11493,8 +11622,10 @@ jSuites.tags = (function(el, options) { var isEmpty = function() { // Can't be empty if (! el.innerText.trim()) { - el.innerHTML = '
'; - el.classList.add('jtags-empty'); + if (! el.children.length || el.children[0].tagName === 'BR') { + el.innerHTML = ''; + setFocus(createElement()); + } } else { el.classList.remove('jtags-empty'); } @@ -11583,6 +11714,9 @@ jSuites.tags = (function(el, options) { if (search) { search.keydown(e); } + + // Verify if is empty + isEmpty(); } /** @@ -11874,6 +12008,10 @@ jSuites.toolbar = (function(el, options) { toolbarItem.classList.add('jtoolbar-active'); } + if (items[i].disabled) { + toolbarItem.classList.add('jtoolbar-disabled'); + } + if (items[i].type == 'select' || items[i].type == 'dropdown') { jSuites.picker(toolbarItem, items[i]); } else if (items[i].type == 'divisor') { @@ -12003,7 +12141,7 @@ jSuites.toolbar = (function(el, options) { obj.setReadonly = function(state) { state = state ? 'add' : 'remove'; - el.classList[state]('jtoolbar-readonly'); + el.classList[state]('jtoolbar-disabled'); } el.onclick = function(e) { @@ -12173,6 +12311,14 @@ jSuites.validations = (function() { return !data.toString(); } + component.empty = function(data) { + return !data.toString(); + } + + component.notEmpty = function(data) { + return !!data.toString(); + } + component.number = function(data, options) { if (! isNumeric(data)) { return false; diff --git a/build.bash b/build.bash index 566cd8f..b8da5b4 100644 --- a/build.bash +++ b/build.bash @@ -7,10 +7,10 @@ JS_VENDOR=assets/vendor/ JSUITES_JS_URL="https://jsuites.net/v4/jsuites.js" JSPREADSHEET_JS_URL="https://bossanova.uk/jspreadsheet/v4/jexcel.js" -JSUITES_CSS_URL="https://raw.githubusercontent.com/jsuites/jsuites/master/dist/jsuites.basic.css" +JSUITES_CSS_URL="https://raw.githubusercontent.com/jsuites/jsuites/master/dist/jsuites.css" JSPREADSHEET_CSS_URL="https://bossanova.uk/jspreadsheet/v4/jexcel.css" -JSUITES_CSS_FILE=jsuites.basic.css +JSUITES_CSS_FILE=jsuites.css JSUITES_SCSS_FILE=jsuites.scss JSUITES_SCSS_FILE_LOCATION=$SCSS_VENDOR$JSUITES_SCSS_FILE diff --git a/scss/vendor/jsuites.scss b/scss/vendor/jsuites.scss index 32b9cec..dcbd6c0 100644 --- a/scss/vendor/jsuites.scss +++ b/scss/vendor/jsuites.scss @@ -1,14 +1,4 @@ .jexcel_container { - /** - * (c) jSuites Javascript Web Components - * - * Website: https://jsuites.net - * Description: Create amazing web based applications. - * - * MIT License - * - */ - :root { --button-color: #298ba8; --active-color: #007aff; @@ -93,6 +83,7 @@ cursor: pointer; box-sizing: border-box; width: 100%; + max-width: 100%; max-height: 100%; min-height: 180px; } @@ -136,6 +127,7 @@ color: #eee; width: 100%; height: 100%; + text-align: center; } .jremove { @@ -178,6 +170,44 @@ opacity: 1; } } + /** Loading */ + .jloading { + position: fixed; + z-index: 10001; + width: 100%; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.7); + } + + .jloading::after { + content: ""; + display: block; + margin: 0 auto; + margin-top: 50vh; + width: 40px; + height: 40px; + border-style: solid; + border-color: white; + border-top-color: transparent; + border-width: 4px; + border-radius: 50%; + -webkit-animation: spin 0.8s linear infinite; + animation: spin 0.8s linear infinite; + } + + .jloading.spin { + background-color: transparent; + } + + .jloading.spin::after { + margin: 0 auto; + margin-top: 80px; + border-color: #aaa; + border-top-color: transparent; + } /** Animations **/ .fade-in { @@ -228,6 +258,26 @@ animation: slide-bottom-out 0.1s forwards; } + .slide-left-in > div { + -webkit-transform: translateZ(0px); + -webkit-transform: translate3d(0, 0, 0); + } + + .slide-left-out > div { + -webkit-transform: translateZ(0px); + -webkit-transform: translate3d(0, 0, 0); + } + + .slide-right-in > div { + -webkit-transform: translateZ(0px); + -webkit-transform: translate3d(0, 0, 0); + } + + .slide-right-out > div { + -webkit-transform: translateZ(0px); + -webkit-transform: translate3d(0, 0, 0); + } + .spin { animation: spin 2s infinite linear; } @@ -434,7 +484,6 @@ transform: rotate(359deg); } } - .jcalendar { position: absolute; z-index: 9000; @@ -494,14 +543,14 @@ .jcalendar-prev { cursor: pointer; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z' fill='%23000' /%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z%27 fill=%27%23000%27 /%3E%3Cpath fill=%27none%27 d=%27M0 0h24v24H0V0z%27/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; } .jcalendar-next { cursor: pointer; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z' fill='%23000' /%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z%27 fill=%27%23000%27 /%3E%3Cpath fill=%27none%27 d=%27M0 0h24v24H0V0z%27/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; } @@ -512,6 +561,10 @@ padding: 14px; } + .jcalendar-table { + padding: 10px; + } + .jcalendar-table > table { width: 100%; background-color: #fff; @@ -526,6 +579,10 @@ height: 40px; } + .jcalendar-table > table > tbody > tr { + height: 34px; + } + .jcalendar-table > table > tbody td { box-sizing: border-box; cursor: pointer; @@ -544,7 +601,7 @@ .jcalendar-input { padding-right: 18px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='gray'%3E%3Cpath d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27gray%27%3E%3Cpath d=%27M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z%27/%3E%3Cpath fill=%27none%27 d=%27M0 0h24v24H0z%27/%3E%3C/svg%3E"); background-position: top 50% right 5px; background-repeat: no-repeat; box-sizing: border-box; @@ -642,6 +699,14 @@ display: flex; } + .jcalendar_warning { + color: red; + } + + .jcalendar-hide-controls .jcalendar-controls { + display: none; + } + .jcolor { display: none; outline: none; @@ -650,7 +715,7 @@ .jcolor-input { padding-right: 24px !important; - background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") + background: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27black%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z%27/%3E%3C/svg%3E") top 50% right 4px no-repeat, content-box; box-sizing: border-box; @@ -717,7 +782,7 @@ background-repeat: no-repeat; background-size: 16px; background-position: center; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='white'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z%27 fill=%27white%27/%3E%3C/svg%3E"); } .jcolor-fullscreen { @@ -900,7 +965,6 @@ padding-right: 15px !important; font-size: 0.8em; } - .jcontextmenu { position: fixed; z-index: 10000; @@ -946,6 +1010,7 @@ font-size: 15px; position: absolute; left: 9px; + line-height: 24px; } .jcontextmenu.symbols > div::before { @@ -960,6 +1025,7 @@ color: #555; text-decoration: none; flex: 1; + cursor: pointer; } .jcontextmenu > div span { @@ -970,6 +1036,10 @@ color: #ccc; } + .jcontextmenu .jcontextmenu-disabled::before { + color: #ccc; + } + .jcontextmenu > div:hover { background: #ebebeb; } @@ -1091,13 +1161,14 @@ } .jdropdown-default.jdropdown-focus .jdropdown-header.jdropdown-add { - background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gray' width='24px' height='24px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27gray%27 width=%2724px%27 height=%2724px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z%27/%3E%3C/svg%3E"); } .jdropdown-container-header { padding: 0px; margin: 0px; position: relative; + box-sizing: border-box; } .jdropdown-header { @@ -1105,7 +1176,7 @@ appearance: none; background-repeat: no-repeat; background-position: top 50% right 5px; - background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27none%27 d=%27M0 0h24v24H0V0z%27/%3E%3Cpath d=%27M7 10l5 5 5-5H7z%27 fill=%27gray%27/%3E%3C/svg%3E"); text-overflow: ellipsis; cursor: pointer; box-sizing: border-box; @@ -1136,7 +1207,7 @@ color: var(--active-color); text-transform: uppercase; text-align: right; - padding: 15px; + padding: 12px; font-weight: bold; } @@ -1243,7 +1314,7 @@ } .jdropdown-default .jdropdown-selected { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPjxwYXRoIGQ9Ik05IDE2LjE3TDQuODMgMTJsLTEuNDIgMS40MUw5IDE5IDIxIDdsLTEuNDEtMS40MXoiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPgo="); + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPjxwYXRoIGQ9Ik05IDE2LjE3TDQuODMgMTJsLTEuNDIgMS40MUw5IDE5IDIxIDdsLTEuNDEtMS40MXoiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPgo=); background-repeat: no-repeat; background-position: top 50% right 5px; background-color: #1f93ff; @@ -1342,7 +1413,7 @@ } .jdropdown-picker .jdropdown-selected { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPjxwYXRoIGQ9Ik05IDE2LjE3TDQuODMgMTJsLTEuNDIgMS40MUw5IDE5IDIxIDdsLTEuNDEtMS40MXoiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPgo="); + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPjxwYXRoIGQ9Ik05IDE2LjE3TDQuODMgMTJsLTEuNDIgMS40MUw5IDE5IDIxIDdsLTEuNDEtMS40MXoiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPgo=); background-repeat: no-repeat; background-position: top 50% right 15px; background-color: #1f93ff; @@ -1375,18 +1446,17 @@ top: 0px; left: 0px; z-index: 9002; - padding: 10px; + padding: 6px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - max-height: 24px; width: 100%; } .jdropdown-searchbar.jdropdown-focus .jdropdown-header { - border: 0px; + border: 0px !important; + background-position-x: 0% !important; + background-position-y: 40% !important; background-repeat: no-repeat; - background-position-x: 0%; - background-position-y: 40%; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUuNSAxNGgtLjc5bC0uMjgtLjI3QzE1LjQxIDEyLjU5IDE2IDExLjExIDE2IDkuNSAxNiA1LjkxIDEzLjA5IDMgOS41IDNTMyA1LjkxIDMgOS41IDUuOTEgMTYgOS41IDE2YzEuNjEgMCAzLjA5LS41OSA0LjIzLTEuNTdsLjI3LjI4di43OWw1IDQuOTlMMjAuNDkgMTlsLTQuOTktNXptLTYgMEM3LjAxIDE0IDUgMTEuOTkgNSA5LjVTNy4wMSA1IDkuNSA1IDE0IDcuMDEgMTQgOS41IDExLjk5IDE0IDkuNSAxNHoiIGZpbGw9IiNlNmU2ZTgiLz48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PC9zdmc+); padding-left: 30px !important; padding-right: 60px !important; @@ -1465,7 +1535,7 @@ } .jdropdown-searchbar .jdropdown-selected { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTYuMTdMNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIgZmlsbD0iIzAwN2FmZiIvPjwvc3ZnPg=="); + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTYuMTdMNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIgZmlsbD0iIzAwN2FmZiIvPjwvc3ZnPg==); background-repeat: no-repeat; background-position: top 50% right 15px; } @@ -1504,7 +1574,7 @@ } .jdropdown-list .jdropdown-selected { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTYuMTdMNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIgZmlsbD0iIzAwN2FmZiIvPjwvc3ZnPg=="); + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTYuMTdMNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIgZmlsbD0iIzAwN2FmZiIvPjwvc3ZnPg==); background-repeat: no-repeat; background-position: top 50% right 10px; } @@ -1549,18 +1619,18 @@ opacity: 0.5; pointer-events: none; } - .jeditor-container { border: 1px solid #ccc; box-sizing: border-box; } - .jeditor-dragging { - border: 1px dashed #000; + .jeditor-container.with-margin { + background-color: #f2f2f2; + max-width: 1200px; } - .jeditor-container.jeditor-padding { - padding: 10px; + .jeditor-dragging { + border: 1px dashed #000; } .jeditor { @@ -1568,17 +1638,19 @@ word-break: break-word; } + .jeditor-container.with-margin .jeditor { + background-color: #fff; + margin: 80px; + min-height: 800px; + padding: 80px; + max-width: 800px; + } + .jeditor[data-placeholder]:empty:before { content: attr(data-placeholder); color: lightgray; } - .jeditor-container.jeditor-padding .jeditor { - min-height: 100px; - margin-bottom: 10px; - padding: 10px; - } - /** Snippet **/ .jsnippet { @@ -1670,7 +1742,7 @@ } .jeditor .pdf { - background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cpath style='fill:%23C30B15;' d='M511.344,274.266C511.77,268.231,512,262.143,512,256C512,114.615,397.385,0,256,0S0,114.615,0,256 c0,117.769,79.53,216.949,187.809,246.801L511.344,274.266z'/%3E%3Cpath style='fill:%2385080E;' d='M511.344,274.266L314.991,77.913L119.096,434.087l68.714,68.714C209.522,508.787,232.385,512,256,512 C391.243,512,501.976,407.125,511.344,274.266z'/%3E%3Cpolygon style='fill:%23FFFFFF;' points='278.328,333.913 255.711,77.913 119.096,77.913 119.096,311.652 '/%3E%3Cpolygon style='fill:%23E8E6E6;' points='392.904,311.652 392.904,155.826 337.252,133.565 314.991,77.913 255.711,77.913 256.067,333.913 '/%3E%3Cpolygon style='fill:%23FFFFFF;' points='314.991,155.826 314.991,77.913 392.904,155.826 '/%3E%3Crect x='119.096' y='311.652' style='fill:%23FC0F1A;' width='273.809' height='122.435'/%3E%3Cg%3E%3Cpath style='fill:%23FFFFFF;' d='M204.871,346.387c13.547,0,21.341,6.659,21.341,18.465c0,12.412-7.795,19.601-21.341,19.601h-9.611 v14.909h-13.471v-52.975L204.871,346.387L204.871,346.387z M195.26,373.858h8.93c5.904,0,9.308-2.952,9.308-8.552 c0-5.525-3.406-8.324-9.308-8.324h-8.93V373.858z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M257.928,346.387c16.649,0,28.152,10.746,28.152,26.487c0,15.666-11.655,26.488-28.683,26.488 h-22.25v-52.975H257.928z M248.619,388.615h9.611c8.249,0,14.151-6.357,14.151-15.665c0-9.384-6.205-15.817-14.757-15.817h-9.006 V388.615z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M308.563,356.982v12.26h23.763v10.596h-23.763v19.525h-13.471v-52.975h39.277v10.595h-25.806 V356.982z'/%3E%3C/g%3E%3C/svg%3E%0A"); + background-image: url("data:image/svg+xml,%3Csvg version=%271.1%27 id=%27Layer_1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 viewBox=%270 0 512 512%27 style=%27enable-background:new 0 0 512 512;%27 xml:space=%27preserve%27%3E%3Cpath style=%27fill:%23C30B15;%27 d=%27M511.344,274.266C511.77,268.231,512,262.143,512,256C512,114.615,397.385,0,256,0S0,114.615,0,256 c0,117.769,79.53,216.949,187.809,246.801L511.344,274.266z%27/%3E%3Cpath style=%27fill:%2385080E;%27 d=%27M511.344,274.266L314.991,77.913L119.096,434.087l68.714,68.714C209.522,508.787,232.385,512,256,512 C391.243,512,501.976,407.125,511.344,274.266z%27/%3E%3Cpolygon style=%27fill:%23FFFFFF;%27 points=%27278.328,333.913 255.711,77.913 119.096,77.913 119.096,311.652 %27/%3E%3Cpolygon style=%27fill:%23E8E6E6;%27 points=%27392.904,311.652 392.904,155.826 337.252,133.565 314.991,77.913 255.711,77.913 256.067,333.913 %27/%3E%3Cpolygon style=%27fill:%23FFFFFF;%27 points=%27314.991,155.826 314.991,77.913 392.904,155.826 %27/%3E%3Crect x=%27119.096%27 y=%27311.652%27 style=%27fill:%23FC0F1A;%27 width=%27273.809%27 height=%27122.435%27/%3E%3Cg%3E%3Cpath style=%27fill:%23FFFFFF;%27 d=%27M204.871,346.387c13.547,0,21.341,6.659,21.341,18.465c0,12.412-7.795,19.601-21.341,19.601h-9.611 v14.909h-13.471v-52.975L204.871,346.387L204.871,346.387z M195.26,373.858h8.93c5.904,0,9.308-2.952,9.308-8.552 c0-5.525-3.406-8.324-9.308-8.324h-8.93V373.858z%27/%3E%3Cpath style=%27fill:%23FFFFFF;%27 d=%27M257.928,346.387c16.649,0,28.152,10.746,28.152,26.487c0,15.666-11.655,26.488-28.683,26.488 h-22.25v-52.975H257.928z M248.619,388.615h9.611c8.249,0,14.151-6.357,14.151-15.665c0-9.384-6.205-15.817-14.757-15.817h-9.006 V388.615z%27/%3E%3Cpath style=%27fill:%23FFFFFF;%27 d=%27M308.563,356.982v12.26h23.763v10.596h-23.763v19.525h-13.471v-52.975h39.277v10.595h-25.806 V356.982z%27/%3E%3C/g%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: cover; width: 60px; @@ -1681,44 +1753,270 @@ width: fit-content; max-width: 100%; box-sizing: border-box; + margin: 10px; } - .jloading { - position: fixed; - z-index: 10001; - width: 100%; - left: 0; - right: 0; - top: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.7); - } - - .jloading::after { - content: ""; + .toolbar-on-top .jeditor-toolbar { + width: initial; + margin: 0px; + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); display: block; - margin: 0 auto; - margin-top: 50vh; - width: 40px; - height: 40px; - border-style: solid; - border-color: white; - border-top-color: transparent; - border-width: 4px; - border-radius: 50%; - -webkit-animation: spin 0.8s linear infinite; - animation: spin 0.8s linear infinite; } - .jloading.spin { - background-color: transparent; + .toolbar-on-top .jeditor { + padding: 15px; } - .jloading.spin::after { - margin: 0 auto; - margin-top: 80px; - border-color: #aaa; - border-top-color: transparent; + .toolbar-on-top .jtoolbar .material-icons { + font-size: 24px; + transform: initial; + margin: 4px; + } + + .toolbar-on-top .jtoolbar .jpicker-header { + font-size: 1em; + margin-top: 4px; + margin-bottom: 4px; + } + + .jeditor table { + border-collapse: collapse; + } + + .jeditor table td { + border: 1px solid #bbb; + height: 2em; + } + + .jeditor table td:focus { + border: 1px solid blue; + } + + .jeditor .line-break { + border-top: 1px dashed #ccc; + display: flex; + justify-content: center; + pointer-events: none; + } + + .jeditor .line-break:before { + content: "New page"; + background-color: #fff; + color: #ccc; + margin: -1em; + padding: 6px; + position: absolute; + } + .jfloating { + position: fixed; + bottom: 0px; + right: 0px; + margin-right: 5px; + + -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); + border: 1px solid #ccc; + background-color: #fff; + box-sizing: border-box; + padding-top: 50px !important; + z-index: 9002; + border-radius: 8px; + } + + .jfloating.jfloating-big { + width: 510px !important; + height: 472px !important; + } + + .jfloating.jfloating-small { + width: 300px !important; + height: 320px !important; + } + + .jfloating.jfloating-large { + width: 600px !important; + height: 600px !important; + } + + .jfloating:before { + position: absolute; + top: 0; + left: 0; + width: 100%; + content: attr(title); + padding: 15px; + box-sizing: border-box; + font-size: 1.2em; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); + background-color: #fff; + border-radius: 8px 8px 0px 0px; + background-color: #404040; + font-size: 0.93rem; + font-weight: 600; + color: white; + letter-spacing: 0.5px; + } + + .jfloating:after { + content: ""; + background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23FFF%27 d=%27M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); + position: absolute; + top: 0; + right: 0; + margin: 14px; + font-size: 24px; + width: 24px; + height: 24px; + cursor: pointer; + text-shadow: 0px 0px 5px #fff; + } + + .jfloating_content { + padding: 20px; + overflow-y: auto; + max-height: 100%; + box-sizing: border-box; + height: -webkit-fill-available; + } + + .jfloating.jfloating-minimized { + height: 50px !important; + } + + .jfloating.jfloating-minimized .jfloating_content { + display: none; + } + + .jmodal { + position: fixed; + top: 50%; + left: 50%; + width: 60%; + height: 60%; + -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); + border: 1px solid #ccc; + background-color: #fff; + transform: translate(-50%, -50%); + box-sizing: border-box; + z-index: 9002; + border-radius: 4px; + display: flex; + flex-direction: column; + } + + .jmodal_title { + padding: 20px; + height: 70px; + box-sizing: border-box; + font-size: 1.4em; + background-color: #fff; + border-radius: 8px 8px 0px 0px; + pointer-events: none; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + align-items: center; + border-bottom: 1px solid #eee; + } + + .jmodal_title > div { + font-size: 1.4em; + } + + .jmodal_title[data-icon]:before { + content: attr(data-icon); + font-family: "Material Icons" !important; + width: 24px; + height: 24px; + font-size: 24px; + margin-right: 10px; + line-height: 24px; + } + + .jmodal_content { + padding: 20px; + overflow-y: auto; + height: 100%; + box-sizing: border-box; + scrollbar-width: thin; + scrollbar-color: #333 transparent; + } + + .jmodal_title:empty { + display: none; + } + + .jmodal_title:empty + .jmodal_content { + height: 100%; + } + + .jmodal_content::-webkit-scrollbar { + height: 12px; + } + + .jmodal_content::-webkit-scrollbar { + width: 12px; + } + + .jmodal_content::-webkit-scrollbar-track { + border: 1px solid #fff; + background: #eee; + } + + .jmodal_content::-webkit-scrollbar-thumb { + border: 1px solid #fff; + background: #888; + } + + .jmodal:after { + content: ""; + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); + position: absolute; + top: 0; + right: 0; + margin: 25px; + font-size: 24px; + width: 24px; + height: 24px; + cursor: pointer; + text-shadow: 0px 0px 5px #fff; + } + + .jmodal_fullscreen { + width: 100% !important; + height: 100% !important; + top: 0px; + left: 0px; + transform: none; + border: 0px; + border-radius: 0px; + } + + .jmodal_backdrop { + position: fixed; + top: 0px; + left: 0px; + min-width: 100%; + min-height: 100%; + background-color: rgba(0, 0, 0, 0.2); + border: 0px; + padding: 0px; + z-index: 8000; + display: none; + + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently + supported by Chrome and Opera */ + } + + .jmodal_content .jcalendar .jcalendar-content, + .jmodal_content .jdropdown-container { + position: fixed; } .jnotification { @@ -1751,7 +2049,7 @@ .jnotification-close { content: ""; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27 fill=%27white%27%3E%3Cpath d=%27M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); font-size: 20px; width: 20px; height: 20px; @@ -1816,7 +2114,7 @@ color: #790909; } .jnotification-close { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27 fill=%27black%27%3E%3Cpath d=%27M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); } } @@ -1834,7 +2132,6 @@ -ms-flex-align: center; align-items: center; } - .jpicker { cursor: pointer; white-space: nowrap; @@ -1850,7 +2147,7 @@ .jpicker-header { background-repeat: no-repeat; background-position: top 50% right 5px; - background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27none%27 d=%27M0 0h24v24H0V0z%27/%3E%3Cpath d=%27M7 10l5 5 5-5H7z%27 fill=%27gray%27/%3E%3C/svg%3E"); text-overflow: ellipsis; cursor: pointer; box-sizing: border-box; @@ -1866,7 +2163,7 @@ } .jpicker-header:hover { - background-color: #eee; + background-color: #f2f2f2; } .jpicker-content { @@ -1880,7 +2177,7 @@ padding: 4px; z-index: 50; text-align: left; - max-height: 200px; + max-height: 250px; scrollbar-width: thin; scrollbar-color: #333 transparent; } @@ -1926,6 +2223,49 @@ flex-wrap: wrap; } + .jpicker-focus .jpicker-content.jpicker-grid { + display: inline-grid; + } + + .jprogressbar { + cursor: pointer; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: #fff; + -webkit-tap-highlight-color: transparent; + display: inline-block; + box-sizing: border-box; + cursor: pointer; + border: 1px solid #ccc; + position: relative; + } + + .jprogressbar::before { + content: attr(data-value); + position: absolute; + margin: 5px; + margin-left: 10px; + } + + .jprogressbar-header::placeholder { + color: #000; + } + + .jprogressbar::focus { + outline: auto 5px -webkit-focus-ring-color; + } + + .jprogressbar > div { + background-color: #eee; + background-color: red; + box-sizing: border-box; + height: 31px; + } .jrating { display: flex; } @@ -1933,16 +2273,367 @@ width: 24px; height: 24px; line-height: 24px; - background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z' fill='gray'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z%27 fill=%27gray%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); } .jrating .jrating-over { - background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27black%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); opacity: 0.7; } .jrating .jrating-selected { - background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='red'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27red%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); + } + + .jsearch { + position: relative; + display: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + .jsearch_container { + position: absolute; + box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), + 0 2px 6px 2px rgba(60, 64, 67, 0.149); + border: none; + -webkit-border-radius: 4px; + border-radius: 4px; + width: 280px; + padding: 8px 0; + z-index: 1; + + -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + -webkit-transition: opacity 0.218s; + transition: opacity 0.218s; + background: #fff; + border: 1px solid rgba(0, 0, 0, 0.2); + cursor: pointer; + margin: 0; + min-width: 300px; + outline: none; + width: auto; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + .jsearch_container:empty:after { + content: attr(data-placeholder); + } + + .jsearch_container > div { + color: #333; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: flex; + padding: 5px 10px; + user-select: none; + -webkit-align-items: center; + align-items: center; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + .jsearch_container > div:hover { + background-color: #e8eaed; + } + + .jsearch_container > div > img { + width: 32px; + height: 32px; + user-select: none; + border-radius: 16px; + margin-right: 2px; + } + + .jsearch_container > div > div { + overflow: hidden; + text-overflow: ellipsis; + margin-left: 2px; + max-width: 300px; + white-space: nowrap; + user-select: none; + } + + .jsearch_container .selected { + background-color: #e8eaed; + } + .jslider { + outline: none; + } + + .jslider-focus { + width: 100% !important; + height: 100% !important; + } + + .jslider-focus img { + display: none; + } + + .jslider img { + width: 100px; + } + + .jslider-left::before { + position: fixed; + left: 15px; + top: 50%; + content: "arrow_back_ios"; + color: #fff; + width: 30px; + height: 30px; + font-family: "Material Icons"; + font-size: 30px; + /* before it was 0px 0px 0px #000 */ + text-shadow: 0px 0px 6px rgb(56, 56, 56); + text-align: center; + cursor: pointer; + } + + .jslider-right::after { + position: fixed; + right: 15px; + top: 50%; + content: "arrow_forward_ios"; + color: #fff; + width: 30px; + height: 30px; + font-family: "Material Icons"; + font-size: 30px; + /* before it was 0px 0px 0px #000 */ + text-shadow: 0px 0px 6px rgb(56, 56, 56); + text-align: center; + cursor: pointer; + } + + .jslider-close { + width: 24px; + height: 24px; + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27white%27%3E%3Cpath d=%27M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); + position: fixed; + top: 15px; + right: 15px; + cursor: pointer; + z-index: 3000; + + display: block !important; + } + + .jslider-counter { + height: 24px; + background-color: transparent; + position: fixed; + left: 50%; + transform: translateX(-50%); + bottom: 15px; + cursor: pointer; + z-index: 3000; + + display: flex; + display: -webkit-flex; + -webkit-justify-content: center; + -webkit-align-items: center; + -webkit-flex-direction: row; + justify-content: center; + align-items: center; + flex-direction: row; + } + + .jslider-caption { + position: fixed; + max-width: 90vw; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + top: 15px; + left: 15px; + z-index: 3000; + color: #fff; + font-size: 1rem; + + display: block !important; + } + + .jslider-counter div { + width: 10px; + height: 10px; + background: #fff; + border-radius: 50%; + margin: 0px 5px; + + display: block !important; + } + + .jslider-counter .jslider-counter-focus { + background-color: cornflowerblue; + pointer-events: none; + } + + .jslider-focus { + position: fixed; + left: 0; + top: 0; + width: 100%; + min-height: 100%; + max-height: 100%; + z-index: 2000; + margin: 0px; + box-sizing: border-box; + + background-color: rgba(0, 0, 0, 0.8); + -webkit-transition-duration: 0.05s; + transition-duration: 0.05s; + display: flex; + -ms-flex-align: center; + -webkit-align-items: center; + -webkit-box-align: center; + + align-items: center; + } + + .jslider-focus img { + width: 50vw; + height: auto; + box-sizing: border-box; + margin: 0 auto; + vertical-align: middle; + display: none; + } + + .jslider-focus img.jslider-vertical { + width: auto; + /* before it was 50vh */ + height: 80vh; + } + + @media only screen and (max-width: 576px) { + .jslider-focus img.jslider-vertical { + width: 99vw !important; + height: auto !important; + } + + .jslider-focus img { + width: 100vw !important; + height: auto !important; + } + } + + .jslider-grid { + display: -ms-grid; + display: grid; + grid-gap: 1px; + position: relative; + } + + .jslider-grid[data-number="2"] { + -ms-grid-columns: 1fr 50%; + grid-template-columns: 1fr 50%; + } + + .jslider-grid[data-number="3"] { + -ms-grid-columns: 1fr 33%; + grid-template-columns: 1fr 33%; + } + + .jslider-grid[data-number="4"] { + -ms-grid-columns: 1fr 25%; + grid-template-columns: 1fr 25%; + } + + .jslider-grid img { + display: none; + width: 100%; + height: 100%; + object-fit: cover; + } + + .jslider-grid[data-total]:after { + content: attr(data-total) "+"; + font-size: 1.5em; + position: absolute; + color: #fff; + right: 15px; + bottom: 6px; + } + + .jslider-grid img:first-child { + -ms-grid-column: 1; + -ms-grid-row: 1; + grid-column: 1; + grid-row: 1; + display: block; + } + + .jslider-grid[data-number="2"] img:nth-child(2) { + -ms-grid-column: 2; + -ms-grid-row: 1; + grid-column: 2; + grid-row: 1; + display: block; + } + + .jslider-grid[data-number="3"] img:first-child { + -ms-grid-column: 1 / 2; + -ms-grid-row: 1 / 4; + grid-column: 1 / 2; + grid-row: 1 / 4; + } + + .jslider-grid[data-number="3"] img:nth-child(2) { + -ms-grid-column: 2; + -ms-grid-row: 1; + grid-column: 2; + grid-row: 1; + display: block; + } + + .jslider-grid[data-number="3"] img:nth-child(3) { + -ms-grid-column: 2; + -ms-grid-row: 2; + grid-column: 2; + grid-row: 2; + display: block; + } + + .jslider-grid[data-number="4"] img:first-child { + -ms-grid-column: 1 / 2; + -ms-grid-row: 1 / 4; + grid-column: 1 / 2; + grid-row: 1 / 4; + } + + .jslider-grid[data-number="4"] img:nth-child(2) { + -ms-grid-column: 2; + -ms-grid-row: 1; + grid-column: 2; + grid-row: 1; + display: block; + } + + .jslider-grid[data-number="4"] img:nth-child(3) { + -ms-grid-column: 2; + -ms-grid-row: 2; + grid-column: 2; + grid-row: 2; + display: block; + } + + .jslider-grid[data-number="4"] img:nth-child(4) { + -ms-grid-column: 2; + -ms-grid-row: 3; + grid-column: 2; + grid-row: 3; + display: block; } .jtabs { @@ -2035,24 +2726,24 @@ .jtabs .jtabs-prev { margin-left: 10px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gray' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27gray%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z%27/%3E%3C/svg%3E"); } .jtabs .jtabs-prev.disabled { margin-left: 10px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='lightgray' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27lightgray%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z%27/%3E%3C/svg%3E"); } .jtabs .jtabs-next { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gray' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27gray%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z%27/%3E%3C/svg%3E"); } .jtabs .jtabs-next.disabled { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='lightgray' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27lightgray%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z%27/%3E%3C/svg%3E"); } .jtabs .jtabs-add { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z' fill='%23bbbbbb'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2724%27 viewBox=%270 0 24 24%27 width=%2724%27%3E%3Cpath d=%27M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z%27 fill=%27%23bbbbbb%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); } /** Modern skin **/ @@ -2085,10 +2776,76 @@ .jtabs.jtabs-modern .jtabs-border { background-color: rgba(194, 197, 188, 0.884); } + .jtags { + display: flex; + flex-wrap: wrap; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-pack: flex-start; + -webkit-justify-content: space-between; + justify-content: flex-start; + padding: 1px; + border: 1px solid #ccc; + position: relative; + } + + .jtags.jtags-empty:not(.jtags-focus)::before { + position: absolute; + margin: 3px; + color: #ccc; + content: attr(data-placeholder); + top: 0px; + margin-left: 6px; + } + + .jtags > div { + padding: 5px; + padding-left: 10px; + padding-right: 22px; + position: relative; + border-radius: 1px; + margin: 2px; + display: block; + outline: none; + } + + .jtags > div:empty:before { + content: " "; + white-space: pre; + } + + .jtags > div::after { + content: "x"; + position: absolute; + top: 6px; + right: 4px; + width: 12px; + height: 12px; + cursor: pointer; + font-size: 11px; + display: none; + } + + .jtags_label { + background-color: #eeeeee !important; + } + + .jtags_label::after { + display: inline-block !important; + } + + .jtags_error::after { + color: #fff !important; + } + + .jtags_error { + background-color: #d93025 !important; + color: #fff; + } .jtoolbar-container { border-radius: 2px; - margin-bottom: 5px; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); display: inline-flex !important; @@ -2106,13 +2863,9 @@ font-size: 13px; } - .jtoolbar-readonly { + .jtoolbar-disabled { pointer-events: none; - } - - .jtoolbar-readonly div, - .jtoolbar-readonly .jtoolbar-item i { - color: gray; + opacity: 0.4; } .jtoolbar-mobile { @@ -2254,7 +3007,7 @@ .jtoolbar .jtoolbar-arrow { background-repeat: no-repeat; background-position: center; - background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27black%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z%27/%3E%3C/svg%3E"); width: 24px; height: 16px; margin-left: 4px;