- WIP Add texteditor for system description field, #698
This commit is contained in:
Mark Friedrich
92
js/app.js
92
js/app.js
@@ -25,37 +25,38 @@ requirejs.config({
|
||||
admin: './app/admin', // initial start "admin page" view
|
||||
notification: './app/notification', // "notification" view
|
||||
|
||||
jquery: 'lib/jquery-3.3.1.min', // v3.3.1 jQuery
|
||||
bootstrap: 'lib/bootstrap.min', // v3.3.0 Bootstrap js code - http://getbootstrap.com/javascript
|
||||
text: 'lib/requirejs/text', // v2.0.12 A RequireJS/AMD loader plugin for loading text resources.
|
||||
mustache: 'lib/mustache.min', // v1.0.0 Javascript template engine - http://mustache.github.io
|
||||
localForage: 'lib/localforage.min', // v1.4.2 localStorage library - https://mozilla.github.io/localForage
|
||||
velocity: 'lib/velocity.min', // v1.5.1 animation engine - http://julian.com/research/velocity
|
||||
velocityUI: 'lib/velocity.ui.min', // v5.2.0 plugin for velocity - http://julian.com/research/velocity/#uiPack
|
||||
slidebars: 'lib/slidebars', // v0.10 Slidebars - side menu plugin http://plugins.adchsm.me/slidebars
|
||||
jsPlumb: 'lib/dom.jsPlumb-1.7.6', // v1.7.6 jsPlumb (Vanilla)- main map draw plugin https://jsplumbtoolkit.com
|
||||
farahey: 'lib/farahey-0.5', // v0.5 jsPlumb "magnetizing" extension - https://github.com/jsplumb/farahey
|
||||
customScrollbar: 'lib/jquery.mCustomScrollbar.min', // v3.1.5 Custom scroll bars - http://manos.malihu.gr
|
||||
mousewheel: 'lib/jquery.mousewheel.min', // v3.1.13 Mousewheel - https://github.com/jquery/jquery-mousewheel
|
||||
xEditable: 'lib/bootstrap-editable.min', // v1.5.1 X-editable - in placed editing
|
||||
morris: 'lib/morris.min', // v0.5.1 Morris.js - graphs and charts
|
||||
raphael: 'lib/raphael-min', // v2.1.2 Raphaël - required for morris (dependency)
|
||||
bootbox: 'lib/bootbox.min', // v4.4.0 Bootbox.js - custom dialogs - http://bootboxjs.com
|
||||
easyPieChart: 'lib/jquery.easypiechart.min', // v2.1.6 Easy Pie Chart - HTML 5 pie charts - http://rendro.github.io/easy-pie-chart
|
||||
peityInlineChart: 'lib/jquery.peity.min', // v3.2.1 Inline Chart - http://benpickles.github.io/peity/
|
||||
dragToSelect: 'lib/jquery.dragToSelect', // v1.1 Drag to Select - http://andreaslagerkvist.com/jquery/drag-to-select
|
||||
hoverIntent: 'lib/jquery.hoverIntent.min', // v1.9.0 Hover intention - http://cherne.net/brian/resources/jquery.hoverIntent.html
|
||||
fullScreen: 'lib/jquery.fullscreen.min', // v0.6.0 Full screen mode - https://github.com/private-face/jquery.fullscreen
|
||||
select2: 'lib/select2.min', // v4.0.3 Drop Down customization - https://select2.github.io
|
||||
validator: 'lib/validator.min', // v0.10.1 Validator for Bootstrap 3 - https://github.com/1000hz/bootstrap-validator
|
||||
lazylinepainter: 'lib/jquery.lazylinepainter-1.5.1.min', // v1.5.1 SVG line animation plugin - http://lazylinepainter.info
|
||||
blueImpGallery: 'lib/blueimp-gallery', // v2.21.3 Image Gallery - https://github.com/blueimp/Gallery
|
||||
blueImpGalleryHelper: 'lib/blueimp-helper', // helper function for Blue Imp Gallery
|
||||
blueImpGalleryBootstrap: 'lib/bootstrap-image-gallery', // v3.4.2 Bootstrap extension for Blue Imp Gallery - https://blueimp.github.io/Bootstrap-Image-Gallery
|
||||
bootstrapConfirmation: 'lib/bootstrap-confirmation', // v1.0.5 Bootstrap extension for inline confirm dialog - https://github.com/tavicu/bs-confirmation
|
||||
bootstrapToggle: 'lib/bootstrap-toggle.min', // v2.2.0 Bootstrap Toggle (Checkbox) - http://www.bootstraptoggle.com
|
||||
lazyload: 'lib/jquery.lazyload.min', // v1.9.5 LazyLoader images - http://www.appelsiini.net/projects/lazyload
|
||||
sortable: 'lib/sortable.min', // v1.6.0 Sortable - drag&drop reorder - https://github.com/rubaxa/Sortable
|
||||
jquery: 'lib/jquery-3.3.1.min', // v3.3.1 jQuery
|
||||
bootstrap: 'lib/bootstrap.min', // v3.3.0 Bootstrap js code - http://getbootstrap.com/javascript
|
||||
text: 'lib/requirejs/text', // v2.0.12 A RequireJS/AMD loader plugin for loading text resources.
|
||||
mustache: 'lib/mustache.min', // v1.0.0 Javascript template engine - http://mustache.github.io
|
||||
localForage: 'lib/localforage.min', // v1.4.2 localStorage library - https://mozilla.github.io/localForage
|
||||
velocity: 'lib/velocity.min', // v1.5.1 animation engine - http://julian.com/research/velocity
|
||||
velocityUI: 'lib/velocity.ui.min', // v5.2.0 plugin for velocity - http://julian.com/research/velocity/#uiPack
|
||||
slidebars: 'lib/slidebars', // v0.10 Slidebars - side menu plugin http://plugins.adchsm.me/slidebars
|
||||
jsPlumb: 'lib/dom.jsPlumb-1.7.6', // v1.7.6 jsPlumb (Vanilla)- main map draw plugin https://jsplumbtoolkit.com
|
||||
farahey: 'lib/farahey-0.5', // v0.5 jsPlumb "magnetizing" extension - https://github.com/jsplumb/farahey
|
||||
customScrollbar: 'lib/jquery.mCustomScrollbar.min', // v3.1.5 Custom scroll bars - http://manos.malihu.gr
|
||||
mousewheel: 'lib/jquery.mousewheel.min', // v3.1.13 Mousewheel - https://github.com/jquery/jquery-mousewheel
|
||||
xEditable: 'lib/bootstrap-editable.min', // v1.5.1 X-editable - in placed editing
|
||||
morris: 'lib/morris.min', // v0.5.1 Morris.js - graphs and charts
|
||||
raphael: 'lib/raphael-min', // v2.1.2 Raphaël - required for morris (dependency)
|
||||
bootbox: 'lib/bootbox.min', // v4.4.0 Bootbox.js - custom dialogs - http://bootboxjs.com
|
||||
easyPieChart: 'lib/jquery.easypiechart.min', // v2.1.6 Easy Pie Chart - HTML 5 pie charts - http://rendro.github.io/easy-pie-chart
|
||||
peityInlineChart: 'lib/jquery.peity.min', // v3.2.1 Inline Chart - http://benpickles.github.io/peity/
|
||||
dragToSelect: 'lib/jquery.dragToSelect', // v1.1 Drag to Select - http://andreaslagerkvist.com/jquery/drag-to-select
|
||||
hoverIntent: 'lib/jquery.hoverIntent.min', // v1.9.0 Hover intention - http://cherne.net/brian/resources/jquery.hoverIntent.html
|
||||
fullScreen: 'lib/jquery.fullscreen.min', // v0.6.0 Full screen mode - https://github.com/private-face/jquery.fullscreen
|
||||
select2: 'lib/select2.min', // v4.0.3 Drop Down customization - https://select2.github.io
|
||||
validator: 'lib/validator.min', // v0.10.1 Validator for Bootstrap 3 - https://github.com/1000hz/bootstrap-validator
|
||||
lazylinepainter: 'lib/jquery.lazylinepainter-1.5.1.min', // v1.5.1 SVG line animation plugin - http://lazylinepainter.info
|
||||
blueImpGallery: 'lib/blueimp-gallery', // v2.21.3 Image Gallery - https://github.com/blueimp/Gallery
|
||||
blueImpGalleryHelper: 'lib/blueimp-helper', // helper function for Blue Imp Gallery
|
||||
blueImpGalleryBootstrap: 'lib/bootstrap-image-gallery', // v3.4.2 Bootstrap extension for Blue Imp Gallery - https://blueimp.github.io/Bootstrap-Image-Gallery
|
||||
bootstrapConfirmation: 'lib/bootstrap-confirmation', // v1.0.5 Bootstrap extension for inline confirm dialog - https://github.com/tavicu/bs-confirmation
|
||||
bootstrapToggle: 'lib/bootstrap-toggle.min', // v2.2.0 Bootstrap Toggle (Checkbox) - http://www.bootstraptoggle.com
|
||||
lazyload: 'lib/jquery.lazyload.min', // v1.9.5 LazyLoader images - http://www.appelsiini.net/projects/lazyload
|
||||
sortable: 'lib/sortable.min', // v1.6.0 Sortable - drag&drop reorder - https://github.com/rubaxa/Sortable
|
||||
summernote: 'lib/summernote/summernote.min', // v0.8.10 Summernote WYSIWYG editor
|
||||
|
||||
// header animation
|
||||
easePack: 'lib/EasePack.min',
|
||||
@@ -135,44 +136,47 @@ requirejs.config({
|
||||
}
|
||||
},
|
||||
pnotify: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
easyPieChart: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
peityInlineChart: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
dragToSelect: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
hoverIntent: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
fullScreen: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
select2: {
|
||||
deps : ['jquery', 'mousewheel'],
|
||||
deps: ['jquery', 'mousewheel'],
|
||||
exports: 'Select2'
|
||||
},
|
||||
validator: {
|
||||
deps : ['jquery', 'bootstrap']
|
||||
deps: ['jquery', 'bootstrap']
|
||||
},
|
||||
lazylinepainter: {
|
||||
deps : ['jquery', 'bootstrap']
|
||||
deps: ['jquery', 'bootstrap']
|
||||
},
|
||||
blueImpGallery: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
bootstrapConfirmation: {
|
||||
deps : ['bootstrap']
|
||||
deps: ['bootstrap']
|
||||
},
|
||||
bootstrapToggle: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
lazyload: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
summernote: {
|
||||
deps: ['jquery']
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -6,9 +6,9 @@ define([
|
||||
'jquery',
|
||||
'app/init',
|
||||
'app/util',
|
||||
'app/render',
|
||||
'app/map/util'
|
||||
], ($, Init, Util, Render, MapUtil) => {
|
||||
'app/map/util',
|
||||
'summernote'
|
||||
], ($, Init, Util, MapUtil) => {
|
||||
'use strict';
|
||||
|
||||
let config = {
|
||||
@@ -40,49 +40,223 @@ define([
|
||||
// description field
|
||||
descriptionArea: 'pf-system-info-description-area', // class for "description" area
|
||||
addDescriptionButtonClass: 'pf-system-info-description-button', // class for "add description" button
|
||||
moduleElementToolbarClass: 'pf-table-tools', // class for "module toolbar" element
|
||||
tableToolsActionClass: 'pf-table-tools-action', // class for "edit" action
|
||||
|
||||
descriptionTextareaElementClass: 'pf-system-info-description', // class for "description" textarea element (xEditable)
|
||||
descriptionTextareaCharCounter: 'pf-form-field-char-count', // class for "character counter" element for form field
|
||||
|
||||
// fonts
|
||||
fontTriglivianClass: 'pf-triglivian' // class for "Triglivian" names (e.g. Abyssal systems)
|
||||
fontTriglivianClass: 'pf-triglivian', // class for "Triglivian" names (e.g. Abyssal systems)
|
||||
|
||||
// Summernote
|
||||
defaultBgColor: '#e2ce48'
|
||||
};
|
||||
|
||||
// disable Module update temporary (in case e.g. textarea is currently active)
|
||||
let disableModuleUpdate = false;
|
||||
|
||||
// animation speed values
|
||||
let animationSpeedToolbarAction = 200;
|
||||
|
||||
// max character length for system description
|
||||
let maxDescriptionLength = 512;
|
||||
|
||||
/**
|
||||
* shows the tool action element by animation
|
||||
* @param toolsActionElement
|
||||
*/
|
||||
let showToolsActionElement = (toolsActionElement) => {
|
||||
toolsActionElement.velocity('stop').velocity({
|
||||
opacity: 1,
|
||||
height: '100%'
|
||||
},{
|
||||
duration: animationSpeedToolbarAction,
|
||||
display: 'block',
|
||||
visibility: 'visible'
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* hides the tool action element by animation
|
||||
* @param toolsActionElement
|
||||
*/
|
||||
let hideToolsActionElement = (toolsActionElement) => {
|
||||
toolsActionElement.velocity('stop').velocity('reverse', {
|
||||
display: 'none',
|
||||
visibility: 'hidden'
|
||||
let initTextEditor = (element, options) => {
|
||||
|
||||
// "length" hint plugin ---------------------------------------------------------------------------------------
|
||||
$.extend($.summernote.plugins, {
|
||||
/**
|
||||
* @param {Object} context - context object has status of editor.
|
||||
*/
|
||||
lengthField: function (context){
|
||||
let self = this;
|
||||
let ui = $.summernote.ui;
|
||||
|
||||
// add counter
|
||||
context.memo('button.lengthField', () => {
|
||||
return $('<kbd>', {
|
||||
class: ['text-right', 'txt-color'].join(' ')
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* update counter element with left chars
|
||||
* @param contents
|
||||
*/
|
||||
let updateCounter = (contents) => {
|
||||
let maxTextLength = context.options.maxTextLength;
|
||||
let textLength = contents.length;
|
||||
let counter = context.layoutInfo.toolbar.find('kbd');
|
||||
let counterLeft = maxTextLength - textLength;
|
||||
|
||||
counter.text(counterLeft).data('charCount', counterLeft);
|
||||
counter.toggleClass('txt-color-red', maxTextLength <= textLength);
|
||||
|
||||
// disable "save" button
|
||||
let saveBtn = context.layoutInfo.toolbar.find('.btn-save');
|
||||
saveBtn.prop('disabled', maxTextLength < textLength);
|
||||
};
|
||||
|
||||
// events
|
||||
this.events = {
|
||||
'summernote.init': function (we, e) {
|
||||
updateCounter(context.$note.summernote('code'));
|
||||
},
|
||||
'summernote.change': function(we, contents){
|
||||
updateCounter(contents);
|
||||
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// "discard" button plugin ------------------------------------------------------------------------------------
|
||||
$.extend($.summernote.plugins, {
|
||||
/**
|
||||
* @param {Object} context - context object has status of editor.
|
||||
*/
|
||||
discardBtn: function (context){
|
||||
let self = this;
|
||||
let ui = $.summernote.ui;
|
||||
|
||||
// add button
|
||||
context.memo('button.discardBtn', () => {
|
||||
let button = ui.button({
|
||||
contents: '<i class="fas fw fa-times"/>',
|
||||
container: 'body',
|
||||
click: function(){
|
||||
// show confirmation dialog
|
||||
$(this).confirmation('show');
|
||||
}
|
||||
});
|
||||
let $button = button.render();
|
||||
|
||||
// show "discard" changes confirmation
|
||||
let confirmationSettings = {
|
||||
container: 'body',
|
||||
placement: 'top',
|
||||
btnCancelClass: 'btn btn-sm btn-default',
|
||||
btnCancelLabel: 'cancel',
|
||||
btnCancelIcon: 'fas fa-fw fa-ban',
|
||||
title: 'discard changes',
|
||||
btnOkClass: 'btn btn-sm btn-warning',
|
||||
btnOkLabel: 'discard',
|
||||
btnOkIcon: 'fas fa-fw fa-times',
|
||||
onConfirm: (e, target) => {
|
||||
// discard all changes
|
||||
context.$note.summernote('reset');
|
||||
context.$note.summernote('destroy');
|
||||
}
|
||||
};
|
||||
$button.confirmation(confirmationSettings);
|
||||
|
||||
return $button;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// "save button -----------------------------------------------------------------------------------------------
|
||||
let saveBtn = context => {
|
||||
let ui = $.summernote.ui;
|
||||
let button = ui.button({
|
||||
contents: '<i class="fas fw fa-check"/>',
|
||||
container: 'body',
|
||||
className: ['btn-success', 'btn-save'],
|
||||
click: e => {
|
||||
// save changes
|
||||
if( !context.$note.summernote('isEmpty') ){
|
||||
// get current code
|
||||
let description = context.$note.summernote('code');
|
||||
console.log('code to save: ', description)
|
||||
}
|
||||
|
||||
context.$note.summernote('destroy');
|
||||
}
|
||||
});
|
||||
|
||||
return button.render();
|
||||
};
|
||||
|
||||
let defaultOptions = {
|
||||
height: 68, // set editor height
|
||||
minHeight: 68, // set minimum height of editor
|
||||
maxHeight: 500, // set maximum height of editor
|
||||
dialogsInBody: true,
|
||||
dialogsFade: true,
|
||||
|
||||
//textareaAutoSync: false,
|
||||
//hintDirection: 'right',
|
||||
//tooltip: 'right',
|
||||
//container: 'body',
|
||||
|
||||
toolbar: [
|
||||
['style', ['style']],
|
||||
['font', ['bold', 'underline', 'strikethrough', 'clear']],
|
||||
['color', ['color']],
|
||||
//['para', ['ul', 'ol', 'paragraph']],
|
||||
['table', ['table']],
|
||||
['insert', ['link', 'hr']],
|
||||
//['view', ['codeview', 'help']],
|
||||
['misc', ['undo', 'redo']],
|
||||
['lengthField'],
|
||||
['customBtn', [ 'discardBtn', 'saveBtn']]
|
||||
],
|
||||
buttons: {
|
||||
saveBtn: saveBtn
|
||||
},
|
||||
insertTableMaxSize: {
|
||||
col: 4,
|
||||
row: 4
|
||||
},
|
||||
icons: {
|
||||
//'align': 'note-icon-align',
|
||||
'alignCenter': 'fas fa-align-center',
|
||||
'alignJustify': 'fas fa-align-justify',
|
||||
'alignLeft': 'fas fa-align-left',
|
||||
'alignRight': 'fas fa-align-right',
|
||||
//'rowBelow': 'note-icon-row-below',
|
||||
//'colBefore': 'note-icon-col-before',
|
||||
//'colAfter': 'note-icon-col-after',
|
||||
//'rowAbove': 'note-icon-row-above',
|
||||
//'rowRemove': 'note-icon-row-remove',
|
||||
//'colRemove': 'note-icon-col-remove',
|
||||
'indent': 'fas fa-indent',
|
||||
'outdent': 'fas fa-outdent',
|
||||
'arrowsAlt': 'fas fa-expand-arrows-alt',
|
||||
'bold': 'fas fa-bold',
|
||||
'caret': 'fas fa-caret-down',
|
||||
'circle': 'fas fa-circle',
|
||||
'close': 'fas fa-time',
|
||||
'code': 'fas fa-code',
|
||||
'eraser': 'fas fa-eraser',
|
||||
'font': 'fas fa-font',
|
||||
//'frame': 'note-icon-frame',
|
||||
'italic': 'fas fa-italic',
|
||||
'link': 'fas fa-link',
|
||||
'unlink': 'fas fa-unlink',
|
||||
'magic': 'fas fa-magic',
|
||||
'menuCheck': 'fas fa-check',
|
||||
'minus': 'fas fa-minus',
|
||||
'orderedlist': 'fas fa-list-ol',
|
||||
'pencil': 'fa-pen',
|
||||
'picture': 'fas fa-image',
|
||||
'question': 'fas fa-question',
|
||||
'redo': 'fas fa-redo',
|
||||
'square': 'fas fa-square',
|
||||
'strikethrough': 'fas fa-strikethrough',
|
||||
'subscript': 'fas fa-subscript',
|
||||
'superscript': 'fas fa-superscript',
|
||||
'table': 'fas fa-table',
|
||||
'textHeight': 'fas fa-text-height',
|
||||
'trash': 'fas fa-trash',
|
||||
'underline': 'fas fa-underline',
|
||||
'undo': 'fas fa-undo',
|
||||
'unorderedlist': 'fas fa-list-ul',
|
||||
'video': 'fab fa-youtube'
|
||||
},
|
||||
colors: [
|
||||
['#5cb85c', '#e28a0d', '#d9534f', '#e06fdf', '#9fa8da', '#e2ce48', '#428bca']
|
||||
],
|
||||
colorsName: [
|
||||
['Green', 'Orange', 'Red', 'Pink', 'Indigo', 'Yellow', 'Blue']
|
||||
],
|
||||
};
|
||||
|
||||
options = $.extend({}, defaultOptions, options);
|
||||
|
||||
element.summernote(options);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -112,42 +286,19 @@ define([
|
||||
|
||||
// update description textarea ----------------------------------------------------------------------------
|
||||
let descriptionTextareaElement = moduleElement.find('.' + config.descriptionTextareaElementClass);
|
||||
let description = descriptionTextareaElement.editable('getValue', true);
|
||||
|
||||
if(
|
||||
!disableModuleUpdate && // don´t update if field is active
|
||||
description !== systemData.description
|
||||
){
|
||||
// description changed
|
||||
let descriptionButton = moduleElement.find('.' + config.addDescriptionButtonClass);
|
||||
|
||||
// set new value
|
||||
descriptionTextareaElement.editable('setValue', systemData.description);
|
||||
|
||||
let actionElement = descriptionButton.siblings('.' + config.tableToolsActionClass);
|
||||
|
||||
if(systemData.description.length === 0){
|
||||
// show/activate description field
|
||||
// show button if value is empty
|
||||
descriptionButton.show();
|
||||
hideToolsActionElement(actionElement);
|
||||
}else{
|
||||
// hide/disable description field
|
||||
// hide tool button
|
||||
descriptionButton.hide();
|
||||
showToolsActionElement(actionElement);
|
||||
if(typeof descriptionTextareaElement.data().summernote === 'object'){
|
||||
// "Summernote" editor is currently open
|
||||
console.log('Open');
|
||||
}else{
|
||||
// not open
|
||||
console.log('NOT open');
|
||||
let description = descriptionTextareaElement.html();
|
||||
console.log(description);
|
||||
console.log('update: ', description === systemData.description);
|
||||
if(description !== systemData.description){
|
||||
descriptionTextareaElement.html(systemData.description);
|
||||
}
|
||||
}
|
||||
|
||||
// created/updated tooltip --------------------------------------------------------------------------------
|
||||
let nameRowElement = moduleElement.find('.' + config.systemInfoNameClass);
|
||||
|
||||
let tooltipData = {
|
||||
created: systemData.created,
|
||||
updated: systemData.updated
|
||||
};
|
||||
|
||||
nameRowElement.addCharacterInfoTooltip( tooltipData );
|
||||
}
|
||||
|
||||
moduleElement.find('.' + config.descriptionArea).hideLoadingAnimation();
|
||||
@@ -181,188 +332,7 @@ define([
|
||||
let effectName = MapUtil.getEffectInfoForSystem(systemData.effect, 'name');
|
||||
let effectClass = MapUtil.getEffectInfoForSystem(systemData.effect, 'class');
|
||||
|
||||
// systemInfo template config
|
||||
let moduleConfig = {
|
||||
name: 'modules/system_info',
|
||||
position: moduleElement,
|
||||
link: 'append',
|
||||
functions: {
|
||||
after: function(conf){
|
||||
let tempModuleElement = conf.position;
|
||||
// lock "description" field until first update
|
||||
tempModuleElement.find('.' + config.descriptionArea).showLoadingAnimation();
|
||||
// "add description" button
|
||||
let descriptionButton = tempModuleElement.find('.' + config.addDescriptionButtonClass);
|
||||
// description textarea element
|
||||
let descriptionTextareaElement = tempModuleElement.find('.' + config.descriptionTextareaElementClass);
|
||||
|
||||
// init description textarea
|
||||
descriptionTextareaElement.editable({
|
||||
url: Init.path.saveSystem,
|
||||
dataType: 'json',
|
||||
pk: systemData.id,
|
||||
type: 'textarea',
|
||||
mode: 'inline',
|
||||
emptytext: '',
|
||||
onblur: 'cancel',
|
||||
showbuttons: true,
|
||||
value: '', // value is set by trigger function updateModule()
|
||||
rows: 5,
|
||||
name: 'description',
|
||||
inputclass: config.descriptionTextareaElementClass,
|
||||
tpl: '<textarea maxlength="' + maxDescriptionLength + '"></textarea>',
|
||||
params: function(params){
|
||||
params.mapData = {
|
||||
id: mapId
|
||||
};
|
||||
|
||||
params.systemData = {};
|
||||
params.systemData.id = params.pk;
|
||||
params.systemData[params.name] = params.value;
|
||||
|
||||
// clear unnecessary data
|
||||
delete params.pk;
|
||||
delete params.name;
|
||||
delete params.value;
|
||||
|
||||
return params;
|
||||
},
|
||||
validate: function(value){
|
||||
if(value.length > 0 && $.trim(value).length === 0){
|
||||
return {newValue: ''};
|
||||
}
|
||||
},
|
||||
success: function(response, newValue){
|
||||
Util.showNotify({title: 'System updated', text: 'Name: ' + response.name, type: 'success'});
|
||||
},
|
||||
error: function(jqXHR, newValue){
|
||||
let reason = '';
|
||||
let status = '';
|
||||
if(jqXHR.name){
|
||||
// save error new sig (mass save)
|
||||
reason = jqXHR.name;
|
||||
status = 'Error';
|
||||
}else{
|
||||
reason = jqXHR.responseJSON.text;
|
||||
status = jqXHR.status;
|
||||
}
|
||||
|
||||
Util.showNotify({title: status + ': save system information', text: reason, type: 'warning'});
|
||||
$(document).setProgramStatus('problem');
|
||||
return reason;
|
||||
}
|
||||
});
|
||||
|
||||
// on xEditable open ------------------------------------------------------------------------------
|
||||
descriptionTextareaElement.on('shown', function(e, editable){
|
||||
let textarea = editable.input.$input;
|
||||
|
||||
// disable module update until description field is open
|
||||
disableModuleUpdate = true;
|
||||
|
||||
// create character counter
|
||||
let charCounter = $('<kbd>', {
|
||||
class: [config.descriptionTextareaCharCounter, 'txt-color', 'text-right'].join(' ')
|
||||
});
|
||||
textarea.parent().next().append(charCounter);
|
||||
|
||||
// update character counter
|
||||
Util.updateCounter(textarea, charCounter, maxDescriptionLength);
|
||||
|
||||
textarea.on('keyup', function(){
|
||||
Util.updateCounter($(this), charCounter, maxDescriptionLength);
|
||||
});
|
||||
});
|
||||
|
||||
// on xEditable close -----------------------------------------------------------------------------
|
||||
descriptionTextareaElement.on('hidden', function(e){
|
||||
let value = $(this).editable('getValue', true);
|
||||
if(value.length === 0){
|
||||
// show button if value is empty
|
||||
hideToolsActionElement(descriptionButton.siblings('.' + config.tableToolsActionClass));
|
||||
descriptionButton.show();
|
||||
}
|
||||
|
||||
// enable module update
|
||||
disableModuleUpdate = false;
|
||||
});
|
||||
|
||||
// enable xEditable field on Button click ---------------------------------------------------------
|
||||
descriptionButton.on('click', function(e){
|
||||
e.stopPropagation();
|
||||
let descriptionButton = $(this);
|
||||
|
||||
// hide tool buttons
|
||||
descriptionButton.hide();
|
||||
|
||||
// show field *before* showing the element
|
||||
descriptionTextareaElement.editable('show');
|
||||
|
||||
showToolsActionElement(descriptionButton.siblings('.' + config.tableToolsActionClass));
|
||||
});
|
||||
|
||||
// init tooltips ----------------------------------------------------------------------------------
|
||||
let tooltipElements = tempModuleElement.find('[data-toggle="tooltip"]');
|
||||
tooltipElements.tooltip({
|
||||
container: 'body',
|
||||
placement: 'top'
|
||||
});
|
||||
|
||||
// init system effect popover ---------------------------------------------------------------------
|
||||
tempModuleElement.find('.' + config.systemInfoEffectClass).addSystemEffectTooltip(systemData.security, systemData.effect);
|
||||
|
||||
// init planets popover ---------------------------------------------------------------------------
|
||||
tempModuleElement.find('.' + config.systemInfoPlanetsClass).addSystemPlanetsTooltip(systemData.planets);
|
||||
|
||||
// init static wormhole information ---------------------------------------------------------------
|
||||
for(let staticData of staticsData){
|
||||
let staticRowElement = tempModuleElement.find('.' + config.systemInfoWormholeClass + staticData.name);
|
||||
staticRowElement.addWormholeInfoTooltip(staticData);
|
||||
}
|
||||
|
||||
// copy system deeplink URL -----------------------------------------------------------------------
|
||||
tempModuleElement.find('.' + config.urlLinkClass).on('click', function(){
|
||||
let mapUrl = $(this).attr('data-url');
|
||||
Util.copyToClipboard(mapUrl).then(payload => {
|
||||
if(payload.data){
|
||||
Util.showNotify({title: 'Copied to clipbaord', text: mapUrl, type: 'success'});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// constellation popover --------------------------------------------------------------------------
|
||||
tempModuleElement.find('a.popup-ajax').popover({
|
||||
html: true,
|
||||
trigger: 'hover',
|
||||
placement: 'top',
|
||||
delay: 200,
|
||||
container: 'body',
|
||||
content: function(){
|
||||
return details_in_popup(this);
|
||||
}
|
||||
});
|
||||
|
||||
function details_in_popup(popoverElement){
|
||||
popoverElement = $(popoverElement);
|
||||
let popover = popoverElement.data('bs.popover');
|
||||
|
||||
$.ajax({
|
||||
url: popoverElement.data('url'),
|
||||
success: function(data){
|
||||
let systemEffectTable = Util.getSystemsInfoTable( data.systemsData );
|
||||
popover.options.content = systemEffectTable;
|
||||
// reopen popover (new content size)
|
||||
popover.show();
|
||||
}
|
||||
});
|
||||
return 'Loading...';
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let moduleData = {
|
||||
let data = {
|
||||
system: systemData,
|
||||
static: staticsData,
|
||||
moduleHeadlineIconClass: config.moduleHeadlineIconClass,
|
||||
@@ -385,9 +355,7 @@ define([
|
||||
trueSecClass: Util.getTrueSecClassForSystem( systemData.trueSec ),
|
||||
effectName: effectName,
|
||||
effectClass: effectClass,
|
||||
moduleToolbarClass: config.moduleElementToolbarClass,
|
||||
descriptionButtonClass: config.addDescriptionButtonClass,
|
||||
tableToolsActionClass: config.tableToolsActionClass,
|
||||
descriptionTextareaClass: config.descriptionTextareaElementClass,
|
||||
systemNameClass: () => {
|
||||
return (val, render) => {
|
||||
@@ -409,7 +377,109 @@ define([
|
||||
systemUrlLinkClass: config.urlLinkClass
|
||||
};
|
||||
|
||||
Render.showModule(moduleConfig, moduleData);
|
||||
requirejs(['text!templates/modules/system_info.html', 'mustache'], (template, Mustache) => {
|
||||
let content = Mustache.render(template, data);
|
||||
moduleElement.append(content);
|
||||
|
||||
// lock "description" field until first update
|
||||
moduleElement.find('.' + config.descriptionArea).showLoadingAnimation();
|
||||
|
||||
// WYSIWYG init on button click ---------------------------------------------------------------------------
|
||||
let descriptionButton = moduleElement.find('.' + config.addDescriptionButtonClass);
|
||||
let descriptionTextareaElement = moduleElement.find('.' + config.descriptionTextareaElementClass);
|
||||
|
||||
descriptionButton.on('click', function(e){
|
||||
e.stopPropagation();
|
||||
let descriptionButton = $(this);
|
||||
// hide edit button
|
||||
descriptionButton.hide();
|
||||
|
||||
initTextEditor(descriptionTextareaElement, {
|
||||
focus: true,
|
||||
placeholder: false,
|
||||
maxTextLength: maxDescriptionLength,
|
||||
disableDragAndDrop: true,
|
||||
shortcuts: false,
|
||||
callbacks: {
|
||||
onInit: function(context){
|
||||
// set default background color
|
||||
// -> could not figure out how to set by API as default color
|
||||
context.toolbar.find('.note-current-color-button').attr('data-backcolor', config.defaultBgColor)
|
||||
.find('.note-recent-color').css('background-color', config.defaultBgColor);
|
||||
},
|
||||
onDestroy: function(context){
|
||||
descriptionButton.show();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// init system effect popover -----------------------------------------------------------------------------
|
||||
moduleElement.find('.' + config.systemInfoEffectClass).addSystemEffectTooltip(systemData.security, systemData.effect);
|
||||
|
||||
// init planets popover -----------------------------------------------------------------------------------
|
||||
moduleElement.find('.' + config.systemInfoPlanetsClass).addSystemPlanetsTooltip(systemData.planets);
|
||||
|
||||
// init static wormhole information -----------------------------------------------------------------------
|
||||
for(let staticData of staticsData){
|
||||
let staticRowElement = moduleElement.find('.' + config.systemInfoWormholeClass + staticData.name);
|
||||
staticRowElement.addWormholeInfoTooltip(staticData);
|
||||
}
|
||||
|
||||
// copy system deeplink URL -------------------------------------------------------------------------------
|
||||
moduleElement.find('.' + config.urlLinkClass).on('click', function(){
|
||||
let mapUrl = $(this).attr('data-url');
|
||||
Util.copyToClipboard(mapUrl).then(payload => {
|
||||
if(payload.data){
|
||||
Util.showNotify({title: 'Copied to clipbaord', text: mapUrl, type: 'success'});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// created/updated tooltip --------------------------------------------------------------------------------
|
||||
let nameRowElement = moduleElement.find('.' + config.systemInfoNameClass);
|
||||
|
||||
let tooltipData = {
|
||||
created: systemData.created,
|
||||
updated: systemData.updated
|
||||
};
|
||||
|
||||
nameRowElement.addCharacterInfoTooltip( tooltipData );
|
||||
|
||||
// constellation popover ----------------------------------------------------------------------------------
|
||||
moduleElement.find('a.popup-ajax').popover({
|
||||
html: true,
|
||||
trigger: 'hover',
|
||||
placement: 'top',
|
||||
delay: 200,
|
||||
container: 'body',
|
||||
content: function(){
|
||||
return details_in_popup(this);
|
||||
}
|
||||
});
|
||||
|
||||
let details_in_popup = popoverElement => {
|
||||
popoverElement = $(popoverElement);
|
||||
let popover = popoverElement.data('bs.popover');
|
||||
|
||||
$.ajax({
|
||||
url: popoverElement.data('url'),
|
||||
success: function(data){
|
||||
popover.options.content = Util.getSystemsInfoTable(data.systemsData);
|
||||
// reopen popover (new content size)
|
||||
popover.show();
|
||||
}
|
||||
});
|
||||
return 'Loading...';
|
||||
};
|
||||
|
||||
// init tooltips ------------------------------------------------------------------------------------------
|
||||
let tooltipElements = moduleElement.find('[data-toggle="tooltip"]');
|
||||
tooltipElements.tooltip({
|
||||
container: 'body',
|
||||
placement: 'top'
|
||||
});
|
||||
});
|
||||
|
||||
return moduleElement;
|
||||
};
|
||||
@@ -418,10 +488,8 @@ define([
|
||||
* efore module destroy callback
|
||||
* @param moduleElement
|
||||
*/
|
||||
let beforeDestroy = (moduleElement) => {
|
||||
// remove xEditable description textarea
|
||||
let descriptionTextareaElement = moduleElement.find('.' + config.descriptionTextareaElementClass);
|
||||
descriptionTextareaElement.editable('destroy');
|
||||
let beforeDestroy = moduleElement => {
|
||||
moduleElement.find('.' + config.descriptionTextareaElementClass).summernote('destroy');
|
||||
|
||||
moduleElement.destroyPopover(true);
|
||||
};
|
||||
@@ -433,6 +501,3 @@ define([
|
||||
beforeDestroy: beforeDestroy
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -500,6 +500,8 @@ define([
|
||||
let data = {};
|
||||
|
||||
if(
|
||||
tooltipData.created &&
|
||||
tooltipData.updated &&
|
||||
tooltipData.created.character &&
|
||||
tooltipData.updated.character
|
||||
){
|
||||
@@ -525,39 +527,41 @@ define([
|
||||
createdStatusClass: statusCreatedClass,
|
||||
updatedStatusClass: statusUpdatedClass
|
||||
};
|
||||
}
|
||||
|
||||
let defaultOptions = {
|
||||
placement: 'top',
|
||||
html: true,
|
||||
trigger: 'hover',
|
||||
container: 'body',
|
||||
title: 'Created / Updated',
|
||||
delay: {
|
||||
show: 150,
|
||||
hide: 0
|
||||
}
|
||||
};
|
||||
|
||||
options = $.extend({}, defaultOptions, options);
|
||||
|
||||
return this.each(function(){
|
||||
let element = $(this);
|
||||
|
||||
requirejs(['text!templates/tooltip/character_info.html', 'mustache'], (template, Mustache) => {
|
||||
let content = Mustache.render(template, data);
|
||||
|
||||
element.popover(options);
|
||||
|
||||
// set new popover content
|
||||
let popover = element.data('bs.popover');
|
||||
popover.options.content = content;
|
||||
|
||||
if(options.show){
|
||||
element.popover('show');
|
||||
let defaultOptions = {
|
||||
placement: 'top',
|
||||
html: true,
|
||||
trigger: 'hover',
|
||||
container: 'body',
|
||||
title: 'Created / Updated',
|
||||
delay: {
|
||||
show: 150,
|
||||
hide: 0
|
||||
}
|
||||
};
|
||||
|
||||
options = $.extend({}, defaultOptions, options);
|
||||
|
||||
return this.each(function(){
|
||||
let element = $(this);
|
||||
|
||||
requirejs(['text!templates/tooltip/character_info.html', 'mustache'], (template, Mustache) => {
|
||||
let content = Mustache.render(template, data);
|
||||
|
||||
element.popover(options);
|
||||
|
||||
// set new popover content
|
||||
let popover = element.data('bs.popover');
|
||||
popover.options.content = content;
|
||||
|
||||
if(options.show){
|
||||
element.popover('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}else{
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -1777,7 +1781,7 @@ define([
|
||||
/**
|
||||
* get a HTML table with system effect information
|
||||
* e.g. for popover
|
||||
* @param data
|
||||
* @param effects
|
||||
* @returns {string}
|
||||
*/
|
||||
let getSystemEffectTable = effects => {
|
||||
|
||||
3
js/lib/summernote/summernote.min.js
vendored
Normal file
3
js/lib/summernote/summernote.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
public/fonts/summernote.eot
Normal file
BIN
public/fonts/summernote.eot
Normal file
Binary file not shown.
BIN
public/fonts/summernote.ttf
Normal file
BIN
public/fonts/summernote.ttf
Normal file
Binary file not shown.
BIN
public/fonts/summernote.woff
Normal file
BIN
public/fonts/summernote.woff
Normal file
Binary file not shown.
@@ -25,37 +25,38 @@ requirejs.config({
|
||||
admin: './app/admin', // initial start "admin page" view
|
||||
notification: './app/notification', // "notification" view
|
||||
|
||||
jquery: 'lib/jquery-3.3.1.min', // v3.3.1 jQuery
|
||||
bootstrap: 'lib/bootstrap.min', // v3.3.0 Bootstrap js code - http://getbootstrap.com/javascript
|
||||
text: 'lib/requirejs/text', // v2.0.12 A RequireJS/AMD loader plugin for loading text resources.
|
||||
mustache: 'lib/mustache.min', // v1.0.0 Javascript template engine - http://mustache.github.io
|
||||
localForage: 'lib/localforage.min', // v1.4.2 localStorage library - https://mozilla.github.io/localForage
|
||||
velocity: 'lib/velocity.min', // v1.5.1 animation engine - http://julian.com/research/velocity
|
||||
velocityUI: 'lib/velocity.ui.min', // v5.2.0 plugin for velocity - http://julian.com/research/velocity/#uiPack
|
||||
slidebars: 'lib/slidebars', // v0.10 Slidebars - side menu plugin http://plugins.adchsm.me/slidebars
|
||||
jsPlumb: 'lib/dom.jsPlumb-1.7.6', // v1.7.6 jsPlumb (Vanilla)- main map draw plugin https://jsplumbtoolkit.com
|
||||
farahey: 'lib/farahey-0.5', // v0.5 jsPlumb "magnetizing" extension - https://github.com/jsplumb/farahey
|
||||
customScrollbar: 'lib/jquery.mCustomScrollbar.min', // v3.1.5 Custom scroll bars - http://manos.malihu.gr
|
||||
mousewheel: 'lib/jquery.mousewheel.min', // v3.1.13 Mousewheel - https://github.com/jquery/jquery-mousewheel
|
||||
xEditable: 'lib/bootstrap-editable.min', // v1.5.1 X-editable - in placed editing
|
||||
morris: 'lib/morris.min', // v0.5.1 Morris.js - graphs and charts
|
||||
raphael: 'lib/raphael-min', // v2.1.2 Raphaël - required for morris (dependency)
|
||||
bootbox: 'lib/bootbox.min', // v4.4.0 Bootbox.js - custom dialogs - http://bootboxjs.com
|
||||
easyPieChart: 'lib/jquery.easypiechart.min', // v2.1.6 Easy Pie Chart - HTML 5 pie charts - http://rendro.github.io/easy-pie-chart
|
||||
peityInlineChart: 'lib/jquery.peity.min', // v3.2.1 Inline Chart - http://benpickles.github.io/peity/
|
||||
dragToSelect: 'lib/jquery.dragToSelect', // v1.1 Drag to Select - http://andreaslagerkvist.com/jquery/drag-to-select
|
||||
hoverIntent: 'lib/jquery.hoverIntent.min', // v1.9.0 Hover intention - http://cherne.net/brian/resources/jquery.hoverIntent.html
|
||||
fullScreen: 'lib/jquery.fullscreen.min', // v0.6.0 Full screen mode - https://github.com/private-face/jquery.fullscreen
|
||||
select2: 'lib/select2.min', // v4.0.3 Drop Down customization - https://select2.github.io
|
||||
validator: 'lib/validator.min', // v0.10.1 Validator for Bootstrap 3 - https://github.com/1000hz/bootstrap-validator
|
||||
lazylinepainter: 'lib/jquery.lazylinepainter-1.5.1.min', // v1.5.1 SVG line animation plugin - http://lazylinepainter.info
|
||||
blueImpGallery: 'lib/blueimp-gallery', // v2.21.3 Image Gallery - https://github.com/blueimp/Gallery
|
||||
blueImpGalleryHelper: 'lib/blueimp-helper', // helper function for Blue Imp Gallery
|
||||
blueImpGalleryBootstrap: 'lib/bootstrap-image-gallery', // v3.4.2 Bootstrap extension for Blue Imp Gallery - https://blueimp.github.io/Bootstrap-Image-Gallery
|
||||
bootstrapConfirmation: 'lib/bootstrap-confirmation', // v1.0.5 Bootstrap extension for inline confirm dialog - https://github.com/tavicu/bs-confirmation
|
||||
bootstrapToggle: 'lib/bootstrap-toggle.min', // v2.2.0 Bootstrap Toggle (Checkbox) - http://www.bootstraptoggle.com
|
||||
lazyload: 'lib/jquery.lazyload.min', // v1.9.5 LazyLoader images - http://www.appelsiini.net/projects/lazyload
|
||||
sortable: 'lib/sortable.min', // v1.6.0 Sortable - drag&drop reorder - https://github.com/rubaxa/Sortable
|
||||
jquery: 'lib/jquery-3.3.1.min', // v3.3.1 jQuery
|
||||
bootstrap: 'lib/bootstrap.min', // v3.3.0 Bootstrap js code - http://getbootstrap.com/javascript
|
||||
text: 'lib/requirejs/text', // v2.0.12 A RequireJS/AMD loader plugin for loading text resources.
|
||||
mustache: 'lib/mustache.min', // v1.0.0 Javascript template engine - http://mustache.github.io
|
||||
localForage: 'lib/localforage.min', // v1.4.2 localStorage library - https://mozilla.github.io/localForage
|
||||
velocity: 'lib/velocity.min', // v1.5.1 animation engine - http://julian.com/research/velocity
|
||||
velocityUI: 'lib/velocity.ui.min', // v5.2.0 plugin for velocity - http://julian.com/research/velocity/#uiPack
|
||||
slidebars: 'lib/slidebars', // v0.10 Slidebars - side menu plugin http://plugins.adchsm.me/slidebars
|
||||
jsPlumb: 'lib/dom.jsPlumb-1.7.6', // v1.7.6 jsPlumb (Vanilla)- main map draw plugin https://jsplumbtoolkit.com
|
||||
farahey: 'lib/farahey-0.5', // v0.5 jsPlumb "magnetizing" extension - https://github.com/jsplumb/farahey
|
||||
customScrollbar: 'lib/jquery.mCustomScrollbar.min', // v3.1.5 Custom scroll bars - http://manos.malihu.gr
|
||||
mousewheel: 'lib/jquery.mousewheel.min', // v3.1.13 Mousewheel - https://github.com/jquery/jquery-mousewheel
|
||||
xEditable: 'lib/bootstrap-editable.min', // v1.5.1 X-editable - in placed editing
|
||||
morris: 'lib/morris.min', // v0.5.1 Morris.js - graphs and charts
|
||||
raphael: 'lib/raphael-min', // v2.1.2 Raphaël - required for morris (dependency)
|
||||
bootbox: 'lib/bootbox.min', // v4.4.0 Bootbox.js - custom dialogs - http://bootboxjs.com
|
||||
easyPieChart: 'lib/jquery.easypiechart.min', // v2.1.6 Easy Pie Chart - HTML 5 pie charts - http://rendro.github.io/easy-pie-chart
|
||||
peityInlineChart: 'lib/jquery.peity.min', // v3.2.1 Inline Chart - http://benpickles.github.io/peity/
|
||||
dragToSelect: 'lib/jquery.dragToSelect', // v1.1 Drag to Select - http://andreaslagerkvist.com/jquery/drag-to-select
|
||||
hoverIntent: 'lib/jquery.hoverIntent.min', // v1.9.0 Hover intention - http://cherne.net/brian/resources/jquery.hoverIntent.html
|
||||
fullScreen: 'lib/jquery.fullscreen.min', // v0.6.0 Full screen mode - https://github.com/private-face/jquery.fullscreen
|
||||
select2: 'lib/select2.min', // v4.0.3 Drop Down customization - https://select2.github.io
|
||||
validator: 'lib/validator.min', // v0.10.1 Validator for Bootstrap 3 - https://github.com/1000hz/bootstrap-validator
|
||||
lazylinepainter: 'lib/jquery.lazylinepainter-1.5.1.min', // v1.5.1 SVG line animation plugin - http://lazylinepainter.info
|
||||
blueImpGallery: 'lib/blueimp-gallery', // v2.21.3 Image Gallery - https://github.com/blueimp/Gallery
|
||||
blueImpGalleryHelper: 'lib/blueimp-helper', // helper function for Blue Imp Gallery
|
||||
blueImpGalleryBootstrap: 'lib/bootstrap-image-gallery', // v3.4.2 Bootstrap extension for Blue Imp Gallery - https://blueimp.github.io/Bootstrap-Image-Gallery
|
||||
bootstrapConfirmation: 'lib/bootstrap-confirmation', // v1.0.5 Bootstrap extension for inline confirm dialog - https://github.com/tavicu/bs-confirmation
|
||||
bootstrapToggle: 'lib/bootstrap-toggle.min', // v2.2.0 Bootstrap Toggle (Checkbox) - http://www.bootstraptoggle.com
|
||||
lazyload: 'lib/jquery.lazyload.min', // v1.9.5 LazyLoader images - http://www.appelsiini.net/projects/lazyload
|
||||
sortable: 'lib/sortable.min', // v1.6.0 Sortable - drag&drop reorder - https://github.com/rubaxa/Sortable
|
||||
summernote: 'lib/summernote/summernote.min', // v0.8.10 Summernote WYSIWYG editor
|
||||
|
||||
// header animation
|
||||
easePack: 'lib/EasePack.min',
|
||||
@@ -135,44 +136,47 @@ requirejs.config({
|
||||
}
|
||||
},
|
||||
pnotify: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
easyPieChart: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
peityInlineChart: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
dragToSelect: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
hoverIntent: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
fullScreen: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
select2: {
|
||||
deps : ['jquery', 'mousewheel'],
|
||||
deps: ['jquery', 'mousewheel'],
|
||||
exports: 'Select2'
|
||||
},
|
||||
validator: {
|
||||
deps : ['jquery', 'bootstrap']
|
||||
deps: ['jquery', 'bootstrap']
|
||||
},
|
||||
lazylinepainter: {
|
||||
deps : ['jquery', 'bootstrap']
|
||||
deps: ['jquery', 'bootstrap']
|
||||
},
|
||||
blueImpGallery: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
bootstrapConfirmation: {
|
||||
deps : ['bootstrap']
|
||||
deps: ['bootstrap']
|
||||
},
|
||||
bootstrapToggle: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
lazyload: {
|
||||
deps : ['jquery']
|
||||
deps: ['jquery']
|
||||
},
|
||||
summernote: {
|
||||
deps: ['jquery']
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -2809,7 +2809,7 @@ define([
|
||||
let interval = mapElement.getMapOverlayInterval();
|
||||
|
||||
if(
|
||||
! interval ||
|
||||
!interval ||
|
||||
options.forceData === true
|
||||
){
|
||||
|
||||
|
||||
@@ -6,9 +6,9 @@ define([
|
||||
'jquery',
|
||||
'app/init',
|
||||
'app/util',
|
||||
'app/render',
|
||||
'app/map/util'
|
||||
], ($, Init, Util, Render, MapUtil) => {
|
||||
'app/map/util',
|
||||
'summernote'
|
||||
], ($, Init, Util, MapUtil) => {
|
||||
'use strict';
|
||||
|
||||
let config = {
|
||||
@@ -40,49 +40,223 @@ define([
|
||||
// description field
|
||||
descriptionArea: 'pf-system-info-description-area', // class for "description" area
|
||||
addDescriptionButtonClass: 'pf-system-info-description-button', // class for "add description" button
|
||||
moduleElementToolbarClass: 'pf-table-tools', // class for "module toolbar" element
|
||||
tableToolsActionClass: 'pf-table-tools-action', // class for "edit" action
|
||||
|
||||
descriptionTextareaElementClass: 'pf-system-info-description', // class for "description" textarea element (xEditable)
|
||||
descriptionTextareaCharCounter: 'pf-form-field-char-count', // class for "character counter" element for form field
|
||||
|
||||
// fonts
|
||||
fontTriglivianClass: 'pf-triglivian' // class for "Triglivian" names (e.g. Abyssal systems)
|
||||
fontTriglivianClass: 'pf-triglivian', // class for "Triglivian" names (e.g. Abyssal systems)
|
||||
|
||||
// Summernote
|
||||
defaultBgColor: '#e2ce48'
|
||||
};
|
||||
|
||||
// disable Module update temporary (in case e.g. textarea is currently active)
|
||||
let disableModuleUpdate = false;
|
||||
|
||||
// animation speed values
|
||||
let animationSpeedToolbarAction = 200;
|
||||
|
||||
// max character length for system description
|
||||
let maxDescriptionLength = 512;
|
||||
|
||||
/**
|
||||
* shows the tool action element by animation
|
||||
* @param toolsActionElement
|
||||
*/
|
||||
let showToolsActionElement = (toolsActionElement) => {
|
||||
toolsActionElement.velocity('stop').velocity({
|
||||
opacity: 1,
|
||||
height: '100%'
|
||||
},{
|
||||
duration: animationSpeedToolbarAction,
|
||||
display: 'block',
|
||||
visibility: 'visible'
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* hides the tool action element by animation
|
||||
* @param toolsActionElement
|
||||
*/
|
||||
let hideToolsActionElement = (toolsActionElement) => {
|
||||
toolsActionElement.velocity('stop').velocity('reverse', {
|
||||
display: 'none',
|
||||
visibility: 'hidden'
|
||||
let initTextEditor = (element, options) => {
|
||||
|
||||
// "length" hint plugin ---------------------------------------------------------------------------------------
|
||||
$.extend($.summernote.plugins, {
|
||||
/**
|
||||
* @param {Object} context - context object has status of editor.
|
||||
*/
|
||||
lengthField: function (context){
|
||||
let self = this;
|
||||
let ui = $.summernote.ui;
|
||||
|
||||
// add counter
|
||||
context.memo('button.lengthField', () => {
|
||||
return $('<kbd>', {
|
||||
class: ['text-right', 'txt-color'].join(' ')
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* update counter element with left chars
|
||||
* @param contents
|
||||
*/
|
||||
let updateCounter = (contents) => {
|
||||
let maxTextLength = context.options.maxTextLength;
|
||||
let textLength = contents.length;
|
||||
let counter = context.layoutInfo.toolbar.find('kbd');
|
||||
let counterLeft = maxTextLength - textLength;
|
||||
|
||||
counter.text(counterLeft).data('charCount', counterLeft);
|
||||
counter.toggleClass('txt-color-red', maxTextLength <= textLength);
|
||||
|
||||
// disable "save" button
|
||||
let saveBtn = context.layoutInfo.toolbar.find('.btn-save');
|
||||
saveBtn.prop('disabled', maxTextLength < textLength);
|
||||
};
|
||||
|
||||
// events
|
||||
this.events = {
|
||||
'summernote.init': function (we, e) {
|
||||
updateCounter(context.$note.summernote('code'));
|
||||
},
|
||||
'summernote.change': function(we, contents){
|
||||
updateCounter(contents);
|
||||
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// "discard" button plugin ------------------------------------------------------------------------------------
|
||||
$.extend($.summernote.plugins, {
|
||||
/**
|
||||
* @param {Object} context - context object has status of editor.
|
||||
*/
|
||||
discardBtn: function (context){
|
||||
let self = this;
|
||||
let ui = $.summernote.ui;
|
||||
|
||||
// add button
|
||||
context.memo('button.discardBtn', () => {
|
||||
let button = ui.button({
|
||||
contents: '<i class="fas fw fa-times"/>',
|
||||
container: 'body',
|
||||
click: function(){
|
||||
// show confirmation dialog
|
||||
$(this).confirmation('show');
|
||||
}
|
||||
});
|
||||
let $button = button.render();
|
||||
|
||||
// show "discard" changes confirmation
|
||||
let confirmationSettings = {
|
||||
container: 'body',
|
||||
placement: 'top',
|
||||
btnCancelClass: 'btn btn-sm btn-default',
|
||||
btnCancelLabel: 'cancel',
|
||||
btnCancelIcon: 'fas fa-fw fa-ban',
|
||||
title: 'discard changes',
|
||||
btnOkClass: 'btn btn-sm btn-warning',
|
||||
btnOkLabel: 'discard',
|
||||
btnOkIcon: 'fas fa-fw fa-times',
|
||||
onConfirm: (e, target) => {
|
||||
// discard all changes
|
||||
context.$note.summernote('reset');
|
||||
context.$note.summernote('destroy');
|
||||
}
|
||||
};
|
||||
$button.confirmation(confirmationSettings);
|
||||
|
||||
return $button;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// "save button -----------------------------------------------------------------------------------------------
|
||||
let saveBtn = context => {
|
||||
let ui = $.summernote.ui;
|
||||
let button = ui.button({
|
||||
contents: '<i class="fas fw fa-check"/>',
|
||||
container: 'body',
|
||||
className: ['btn-success', 'btn-save'],
|
||||
click: e => {
|
||||
// save changes
|
||||
if( !context.$note.summernote('isEmpty') ){
|
||||
// get current code
|
||||
let description = context.$note.summernote('code');
|
||||
console.log('code to save: ', description)
|
||||
}
|
||||
|
||||
context.$note.summernote('destroy');
|
||||
}
|
||||
});
|
||||
|
||||
return button.render();
|
||||
};
|
||||
|
||||
let defaultOptions = {
|
||||
height: 68, // set editor height
|
||||
minHeight: 68, // set minimum height of editor
|
||||
maxHeight: 500, // set maximum height of editor
|
||||
dialogsInBody: true,
|
||||
dialogsFade: true,
|
||||
|
||||
//textareaAutoSync: false,
|
||||
//hintDirection: 'right',
|
||||
//tooltip: 'right',
|
||||
//container: 'body',
|
||||
|
||||
toolbar: [
|
||||
['style', ['style']],
|
||||
['font', ['bold', 'underline', 'strikethrough', 'clear']],
|
||||
['color', ['color']],
|
||||
//['para', ['ul', 'ol', 'paragraph']],
|
||||
['table', ['table']],
|
||||
['insert', ['link', 'hr']],
|
||||
//['view', ['codeview', 'help']],
|
||||
['misc', ['undo', 'redo']],
|
||||
['lengthField'],
|
||||
['customBtn', [ 'discardBtn', 'saveBtn']]
|
||||
],
|
||||
buttons: {
|
||||
saveBtn: saveBtn
|
||||
},
|
||||
insertTableMaxSize: {
|
||||
col: 4,
|
||||
row: 4
|
||||
},
|
||||
icons: {
|
||||
//'align': 'note-icon-align',
|
||||
'alignCenter': 'fas fa-align-center',
|
||||
'alignJustify': 'fas fa-align-justify',
|
||||
'alignLeft': 'fas fa-align-left',
|
||||
'alignRight': 'fas fa-align-right',
|
||||
//'rowBelow': 'note-icon-row-below',
|
||||
//'colBefore': 'note-icon-col-before',
|
||||
//'colAfter': 'note-icon-col-after',
|
||||
//'rowAbove': 'note-icon-row-above',
|
||||
//'rowRemove': 'note-icon-row-remove',
|
||||
//'colRemove': 'note-icon-col-remove',
|
||||
'indent': 'fas fa-indent',
|
||||
'outdent': 'fas fa-outdent',
|
||||
'arrowsAlt': 'fas fa-expand-arrows-alt',
|
||||
'bold': 'fas fa-bold',
|
||||
'caret': 'fas fa-caret-down',
|
||||
'circle': 'fas fa-circle',
|
||||
'close': 'fas fa-time',
|
||||
'code': 'fas fa-code',
|
||||
'eraser': 'fas fa-eraser',
|
||||
'font': 'fas fa-font',
|
||||
//'frame': 'note-icon-frame',
|
||||
'italic': 'fas fa-italic',
|
||||
'link': 'fas fa-link',
|
||||
'unlink': 'fas fa-unlink',
|
||||
'magic': 'fas fa-magic',
|
||||
'menuCheck': 'fas fa-check',
|
||||
'minus': 'fas fa-minus',
|
||||
'orderedlist': 'fas fa-list-ol',
|
||||
'pencil': 'fa-pen',
|
||||
'picture': 'fas fa-image',
|
||||
'question': 'fas fa-question',
|
||||
'redo': 'fas fa-redo',
|
||||
'square': 'fas fa-square',
|
||||
'strikethrough': 'fas fa-strikethrough',
|
||||
'subscript': 'fas fa-subscript',
|
||||
'superscript': 'fas fa-superscript',
|
||||
'table': 'fas fa-table',
|
||||
'textHeight': 'fas fa-text-height',
|
||||
'trash': 'fas fa-trash',
|
||||
'underline': 'fas fa-underline',
|
||||
'undo': 'fas fa-undo',
|
||||
'unorderedlist': 'fas fa-list-ul',
|
||||
'video': 'fab fa-youtube'
|
||||
},
|
||||
colors: [
|
||||
['#5cb85c', '#e28a0d', '#d9534f', '#e06fdf', '#9fa8da', '#e2ce48', '#428bca']
|
||||
],
|
||||
colorsName: [
|
||||
['Green', 'Orange', 'Red', 'Pink', 'Indigo', 'Yellow', 'Blue']
|
||||
],
|
||||
};
|
||||
|
||||
options = $.extend({}, defaultOptions, options);
|
||||
|
||||
element.summernote(options);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -112,42 +286,19 @@ define([
|
||||
|
||||
// update description textarea ----------------------------------------------------------------------------
|
||||
let descriptionTextareaElement = moduleElement.find('.' + config.descriptionTextareaElementClass);
|
||||
let description = descriptionTextareaElement.editable('getValue', true);
|
||||
|
||||
if(
|
||||
!disableModuleUpdate && // don´t update if field is active
|
||||
description !== systemData.description
|
||||
){
|
||||
// description changed
|
||||
let descriptionButton = moduleElement.find('.' + config.addDescriptionButtonClass);
|
||||
|
||||
// set new value
|
||||
descriptionTextareaElement.editable('setValue', systemData.description);
|
||||
|
||||
let actionElement = descriptionButton.siblings('.' + config.tableToolsActionClass);
|
||||
|
||||
if(systemData.description.length === 0){
|
||||
// show/activate description field
|
||||
// show button if value is empty
|
||||
descriptionButton.show();
|
||||
hideToolsActionElement(actionElement);
|
||||
}else{
|
||||
// hide/disable description field
|
||||
// hide tool button
|
||||
descriptionButton.hide();
|
||||
showToolsActionElement(actionElement);
|
||||
if(typeof descriptionTextareaElement.data().summernote === 'object'){
|
||||
// "Summernote" editor is currently open
|
||||
console.log('Open');
|
||||
}else{
|
||||
// not open
|
||||
console.log('NOT open');
|
||||
let description = descriptionTextareaElement.html();
|
||||
console.log(description);
|
||||
console.log('update: ', description === systemData.description);
|
||||
if(description !== systemData.description){
|
||||
descriptionTextareaElement.html(systemData.description);
|
||||
}
|
||||
}
|
||||
|
||||
// created/updated tooltip --------------------------------------------------------------------------------
|
||||
let nameRowElement = moduleElement.find('.' + config.systemInfoNameClass);
|
||||
|
||||
let tooltipData = {
|
||||
created: systemData.created,
|
||||
updated: systemData.updated
|
||||
};
|
||||
|
||||
nameRowElement.addCharacterInfoTooltip( tooltipData );
|
||||
}
|
||||
|
||||
moduleElement.find('.' + config.descriptionArea).hideLoadingAnimation();
|
||||
@@ -181,188 +332,7 @@ define([
|
||||
let effectName = MapUtil.getEffectInfoForSystem(systemData.effect, 'name');
|
||||
let effectClass = MapUtil.getEffectInfoForSystem(systemData.effect, 'class');
|
||||
|
||||
// systemInfo template config
|
||||
let moduleConfig = {
|
||||
name: 'modules/system_info',
|
||||
position: moduleElement,
|
||||
link: 'append',
|
||||
functions: {
|
||||
after: function(conf){
|
||||
let tempModuleElement = conf.position;
|
||||
// lock "description" field until first update
|
||||
tempModuleElement.find('.' + config.descriptionArea).showLoadingAnimation();
|
||||
// "add description" button
|
||||
let descriptionButton = tempModuleElement.find('.' + config.addDescriptionButtonClass);
|
||||
// description textarea element
|
||||
let descriptionTextareaElement = tempModuleElement.find('.' + config.descriptionTextareaElementClass);
|
||||
|
||||
// init description textarea
|
||||
descriptionTextareaElement.editable({
|
||||
url: Init.path.saveSystem,
|
||||
dataType: 'json',
|
||||
pk: systemData.id,
|
||||
type: 'textarea',
|
||||
mode: 'inline',
|
||||
emptytext: '',
|
||||
onblur: 'cancel',
|
||||
showbuttons: true,
|
||||
value: '', // value is set by trigger function updateModule()
|
||||
rows: 5,
|
||||
name: 'description',
|
||||
inputclass: config.descriptionTextareaElementClass,
|
||||
tpl: '<textarea maxlength="' + maxDescriptionLength + '"></textarea>',
|
||||
params: function(params){
|
||||
params.mapData = {
|
||||
id: mapId
|
||||
};
|
||||
|
||||
params.systemData = {};
|
||||
params.systemData.id = params.pk;
|
||||
params.systemData[params.name] = params.value;
|
||||
|
||||
// clear unnecessary data
|
||||
delete params.pk;
|
||||
delete params.name;
|
||||
delete params.value;
|
||||
|
||||
return params;
|
||||
},
|
||||
validate: function(value){
|
||||
if(value.length > 0 && $.trim(value).length === 0){
|
||||
return {newValue: ''};
|
||||
}
|
||||
},
|
||||
success: function(response, newValue){
|
||||
Util.showNotify({title: 'System updated', text: 'Name: ' + response.name, type: 'success'});
|
||||
},
|
||||
error: function(jqXHR, newValue){
|
||||
let reason = '';
|
||||
let status = '';
|
||||
if(jqXHR.name){
|
||||
// save error new sig (mass save)
|
||||
reason = jqXHR.name;
|
||||
status = 'Error';
|
||||
}else{
|
||||
reason = jqXHR.responseJSON.text;
|
||||
status = jqXHR.status;
|
||||
}
|
||||
|
||||
Util.showNotify({title: status + ': save system information', text: reason, type: 'warning'});
|
||||
$(document).setProgramStatus('problem');
|
||||
return reason;
|
||||
}
|
||||
});
|
||||
|
||||
// on xEditable open ------------------------------------------------------------------------------
|
||||
descriptionTextareaElement.on('shown', function(e, editable){
|
||||
let textarea = editable.input.$input;
|
||||
|
||||
// disable module update until description field is open
|
||||
disableModuleUpdate = true;
|
||||
|
||||
// create character counter
|
||||
let charCounter = $('<kbd>', {
|
||||
class: [config.descriptionTextareaCharCounter, 'txt-color', 'text-right'].join(' ')
|
||||
});
|
||||
textarea.parent().next().append(charCounter);
|
||||
|
||||
// update character counter
|
||||
Util.updateCounter(textarea, charCounter, maxDescriptionLength);
|
||||
|
||||
textarea.on('keyup', function(){
|
||||
Util.updateCounter($(this), charCounter, maxDescriptionLength);
|
||||
});
|
||||
});
|
||||
|
||||
// on xEditable close -----------------------------------------------------------------------------
|
||||
descriptionTextareaElement.on('hidden', function(e){
|
||||
let value = $(this).editable('getValue', true);
|
||||
if(value.length === 0){
|
||||
// show button if value is empty
|
||||
hideToolsActionElement(descriptionButton.siblings('.' + config.tableToolsActionClass));
|
||||
descriptionButton.show();
|
||||
}
|
||||
|
||||
// enable module update
|
||||
disableModuleUpdate = false;
|
||||
});
|
||||
|
||||
// enable xEditable field on Button click ---------------------------------------------------------
|
||||
descriptionButton.on('click', function(e){
|
||||
e.stopPropagation();
|
||||
let descriptionButton = $(this);
|
||||
|
||||
// hide tool buttons
|
||||
descriptionButton.hide();
|
||||
|
||||
// show field *before* showing the element
|
||||
descriptionTextareaElement.editable('show');
|
||||
|
||||
showToolsActionElement(descriptionButton.siblings('.' + config.tableToolsActionClass));
|
||||
});
|
||||
|
||||
// init tooltips ----------------------------------------------------------------------------------
|
||||
let tooltipElements = tempModuleElement.find('[data-toggle="tooltip"]');
|
||||
tooltipElements.tooltip({
|
||||
container: 'body',
|
||||
placement: 'top'
|
||||
});
|
||||
|
||||
// init system effect popover ---------------------------------------------------------------------
|
||||
tempModuleElement.find('.' + config.systemInfoEffectClass).addSystemEffectTooltip(systemData.security, systemData.effect);
|
||||
|
||||
// init planets popover ---------------------------------------------------------------------------
|
||||
tempModuleElement.find('.' + config.systemInfoPlanetsClass).addSystemPlanetsTooltip(systemData.planets);
|
||||
|
||||
// init static wormhole information ---------------------------------------------------------------
|
||||
for(let staticData of staticsData){
|
||||
let staticRowElement = tempModuleElement.find('.' + config.systemInfoWormholeClass + staticData.name);
|
||||
staticRowElement.addWormholeInfoTooltip(staticData);
|
||||
}
|
||||
|
||||
// copy system deeplink URL -----------------------------------------------------------------------
|
||||
tempModuleElement.find('.' + config.urlLinkClass).on('click', function(){
|
||||
let mapUrl = $(this).attr('data-url');
|
||||
Util.copyToClipboard(mapUrl).then(payload => {
|
||||
if(payload.data){
|
||||
Util.showNotify({title: 'Copied to clipbaord', text: mapUrl, type: 'success'});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// constellation popover --------------------------------------------------------------------------
|
||||
tempModuleElement.find('a.popup-ajax').popover({
|
||||
html: true,
|
||||
trigger: 'hover',
|
||||
placement: 'top',
|
||||
delay: 200,
|
||||
container: 'body',
|
||||
content: function(){
|
||||
return details_in_popup(this);
|
||||
}
|
||||
});
|
||||
|
||||
function details_in_popup(popoverElement){
|
||||
popoverElement = $(popoverElement);
|
||||
let popover = popoverElement.data('bs.popover');
|
||||
|
||||
$.ajax({
|
||||
url: popoverElement.data('url'),
|
||||
success: function(data){
|
||||
let systemEffectTable = Util.getSystemsInfoTable( data.systemsData );
|
||||
popover.options.content = systemEffectTable;
|
||||
// reopen popover (new content size)
|
||||
popover.show();
|
||||
}
|
||||
});
|
||||
return 'Loading...';
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let moduleData = {
|
||||
let data = {
|
||||
system: systemData,
|
||||
static: staticsData,
|
||||
moduleHeadlineIconClass: config.moduleHeadlineIconClass,
|
||||
@@ -385,9 +355,7 @@ define([
|
||||
trueSecClass: Util.getTrueSecClassForSystem( systemData.trueSec ),
|
||||
effectName: effectName,
|
||||
effectClass: effectClass,
|
||||
moduleToolbarClass: config.moduleElementToolbarClass,
|
||||
descriptionButtonClass: config.addDescriptionButtonClass,
|
||||
tableToolsActionClass: config.tableToolsActionClass,
|
||||
descriptionTextareaClass: config.descriptionTextareaElementClass,
|
||||
systemNameClass: () => {
|
||||
return (val, render) => {
|
||||
@@ -409,7 +377,109 @@ define([
|
||||
systemUrlLinkClass: config.urlLinkClass
|
||||
};
|
||||
|
||||
Render.showModule(moduleConfig, moduleData);
|
||||
requirejs(['text!templates/modules/system_info.html', 'mustache'], (template, Mustache) => {
|
||||
let content = Mustache.render(template, data);
|
||||
moduleElement.append(content);
|
||||
|
||||
// lock "description" field until first update
|
||||
moduleElement.find('.' + config.descriptionArea).showLoadingAnimation();
|
||||
|
||||
// WYSIWYG init on button click ---------------------------------------------------------------------------
|
||||
let descriptionButton = moduleElement.find('.' + config.addDescriptionButtonClass);
|
||||
let descriptionTextareaElement = moduleElement.find('.' + config.descriptionTextareaElementClass);
|
||||
|
||||
descriptionButton.on('click', function(e){
|
||||
e.stopPropagation();
|
||||
let descriptionButton = $(this);
|
||||
// hide edit button
|
||||
descriptionButton.hide();
|
||||
|
||||
initTextEditor(descriptionTextareaElement, {
|
||||
focus: true,
|
||||
placeholder: false,
|
||||
maxTextLength: maxDescriptionLength,
|
||||
disableDragAndDrop: true,
|
||||
shortcuts: false,
|
||||
callbacks: {
|
||||
onInit: function(context){
|
||||
// set default background color
|
||||
// -> could not figure out how to set by API as default color
|
||||
context.toolbar.find('.note-current-color-button').attr('data-backcolor', config.defaultBgColor)
|
||||
.find('.note-recent-color').css('background-color', config.defaultBgColor);
|
||||
},
|
||||
onDestroy: function(context){
|
||||
descriptionButton.show();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// init system effect popover -----------------------------------------------------------------------------
|
||||
moduleElement.find('.' + config.systemInfoEffectClass).addSystemEffectTooltip(systemData.security, systemData.effect);
|
||||
|
||||
// init planets popover -----------------------------------------------------------------------------------
|
||||
moduleElement.find('.' + config.systemInfoPlanetsClass).addSystemPlanetsTooltip(systemData.planets);
|
||||
|
||||
// init static wormhole information -----------------------------------------------------------------------
|
||||
for(let staticData of staticsData){
|
||||
let staticRowElement = moduleElement.find('.' + config.systemInfoWormholeClass + staticData.name);
|
||||
staticRowElement.addWormholeInfoTooltip(staticData);
|
||||
}
|
||||
|
||||
// copy system deeplink URL -------------------------------------------------------------------------------
|
||||
moduleElement.find('.' + config.urlLinkClass).on('click', function(){
|
||||
let mapUrl = $(this).attr('data-url');
|
||||
Util.copyToClipboard(mapUrl).then(payload => {
|
||||
if(payload.data){
|
||||
Util.showNotify({title: 'Copied to clipbaord', text: mapUrl, type: 'success'});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// created/updated tooltip --------------------------------------------------------------------------------
|
||||
let nameRowElement = moduleElement.find('.' + config.systemInfoNameClass);
|
||||
|
||||
let tooltipData = {
|
||||
created: systemData.created,
|
||||
updated: systemData.updated
|
||||
};
|
||||
|
||||
nameRowElement.addCharacterInfoTooltip( tooltipData );
|
||||
|
||||
// constellation popover ----------------------------------------------------------------------------------
|
||||
moduleElement.find('a.popup-ajax').popover({
|
||||
html: true,
|
||||
trigger: 'hover',
|
||||
placement: 'top',
|
||||
delay: 200,
|
||||
container: 'body',
|
||||
content: function(){
|
||||
return details_in_popup(this);
|
||||
}
|
||||
});
|
||||
|
||||
let details_in_popup = popoverElement => {
|
||||
popoverElement = $(popoverElement);
|
||||
let popover = popoverElement.data('bs.popover');
|
||||
|
||||
$.ajax({
|
||||
url: popoverElement.data('url'),
|
||||
success: function(data){
|
||||
popover.options.content = Util.getSystemsInfoTable(data.systemsData);
|
||||
// reopen popover (new content size)
|
||||
popover.show();
|
||||
}
|
||||
});
|
||||
return 'Loading...';
|
||||
};
|
||||
|
||||
// init tooltips ------------------------------------------------------------------------------------------
|
||||
let tooltipElements = moduleElement.find('[data-toggle="tooltip"]');
|
||||
tooltipElements.tooltip({
|
||||
container: 'body',
|
||||
placement: 'top'
|
||||
});
|
||||
});
|
||||
|
||||
return moduleElement;
|
||||
};
|
||||
@@ -418,10 +488,8 @@ define([
|
||||
* efore module destroy callback
|
||||
* @param moduleElement
|
||||
*/
|
||||
let beforeDestroy = (moduleElement) => {
|
||||
// remove xEditable description textarea
|
||||
let descriptionTextareaElement = moduleElement.find('.' + config.descriptionTextareaElementClass);
|
||||
descriptionTextareaElement.editable('destroy');
|
||||
let beforeDestroy = moduleElement => {
|
||||
moduleElement.find('.' + config.descriptionTextareaElementClass).summernote('destroy');
|
||||
|
||||
moduleElement.destroyPopover(true);
|
||||
};
|
||||
@@ -433,6 +501,3 @@ define([
|
||||
beforeDestroy: beforeDestroy
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -500,6 +500,8 @@ define([
|
||||
let data = {};
|
||||
|
||||
if(
|
||||
tooltipData.created &&
|
||||
tooltipData.updated &&
|
||||
tooltipData.created.character &&
|
||||
tooltipData.updated.character
|
||||
){
|
||||
@@ -525,39 +527,41 @@ define([
|
||||
createdStatusClass: statusCreatedClass,
|
||||
updatedStatusClass: statusUpdatedClass
|
||||
};
|
||||
}
|
||||
|
||||
let defaultOptions = {
|
||||
placement: 'top',
|
||||
html: true,
|
||||
trigger: 'hover',
|
||||
container: 'body',
|
||||
title: 'Created / Updated',
|
||||
delay: {
|
||||
show: 150,
|
||||
hide: 0
|
||||
}
|
||||
};
|
||||
|
||||
options = $.extend({}, defaultOptions, options);
|
||||
|
||||
return this.each(function(){
|
||||
let element = $(this);
|
||||
|
||||
requirejs(['text!templates/tooltip/character_info.html', 'mustache'], (template, Mustache) => {
|
||||
let content = Mustache.render(template, data);
|
||||
|
||||
element.popover(options);
|
||||
|
||||
// set new popover content
|
||||
let popover = element.data('bs.popover');
|
||||
popover.options.content = content;
|
||||
|
||||
if(options.show){
|
||||
element.popover('show');
|
||||
let defaultOptions = {
|
||||
placement: 'top',
|
||||
html: true,
|
||||
trigger: 'hover',
|
||||
container: 'body',
|
||||
title: 'Created / Updated',
|
||||
delay: {
|
||||
show: 150,
|
||||
hide: 0
|
||||
}
|
||||
};
|
||||
|
||||
options = $.extend({}, defaultOptions, options);
|
||||
|
||||
return this.each(function(){
|
||||
let element = $(this);
|
||||
|
||||
requirejs(['text!templates/tooltip/character_info.html', 'mustache'], (template, Mustache) => {
|
||||
let content = Mustache.render(template, data);
|
||||
|
||||
element.popover(options);
|
||||
|
||||
// set new popover content
|
||||
let popover = element.data('bs.popover');
|
||||
popover.options.content = content;
|
||||
|
||||
if(options.show){
|
||||
element.popover('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}else{
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -1777,7 +1781,7 @@ define([
|
||||
/**
|
||||
* get a HTML table with system effect information
|
||||
* e.g. for popover
|
||||
* @param data
|
||||
* @param effects
|
||||
* @returns {string}
|
||||
*/
|
||||
let getSystemEffectTable = effects => {
|
||||
|
||||
3
public/js/v1.4.2/lib/summernote/summernote.min.js
vendored
Normal file
3
public/js/v1.4.2/lib/summernote/summernote.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -36,18 +36,15 @@
|
||||
<div class="row">
|
||||
|
||||
{{! info text ================================================================================================ }}
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<div class="pf-dynamic-area pf-system-info-description-area">
|
||||
<div class="{{descriptionTextareaClass}}"></div>
|
||||
<i class="fas fa-fw fa-lg fa-pen pull-right {{moduleHeadlineIconClass}} {{descriptionButtonClass}}" data-toggle="tooltip" title="edit description"></i>
|
||||
|
||||
<div class="{{tableToolsActionClass}}">
|
||||
<a href="#" class="{{descriptionTextareaClass}}"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{! info table ================================================================================================ }}
|
||||
<div class="col-xs-12 col-sm-5">
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
|
||||
<span data-toggle="tooltip" title="status" data-status="{{systemStatusId}}" class="label center-block {{statusInfoClass}} {{systemStatusClass}}">
|
||||
{{systemStatusLabel}}
|
||||
|
||||
@@ -38,7 +38,7 @@ $red-darker: #a52521;
|
||||
$red-darkest: #58100d;
|
||||
|
||||
// indigo
|
||||
$indigo-light: #9fa8da;
|
||||
$indigo-light: #9fa8da;
|
||||
$indigo: #7986cb;
|
||||
$indigo-dark: #5c6bc0;
|
||||
$indigo-darkest: #313966;
|
||||
|
||||
@@ -13,5 +13,6 @@
|
||||
@import "_popover";
|
||||
@import "_ribbon";
|
||||
@import "_loading-bar";
|
||||
@import "sticky-panel";
|
||||
@import "_sticky-panel";
|
||||
@import "_summernote";
|
||||
@import "_youtube";
|
||||
41
sass/layout/_summernote.scss
Normal file
41
sass/layout/_summernote.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
// custom styles for Summernote WYSIWYG editor
|
||||
|
||||
.panel-heading{
|
||||
&.note-toolbar{
|
||||
background-color: $gray-dark
|
||||
}
|
||||
}
|
||||
|
||||
.note-editor{
|
||||
&.note-frame{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
margin-bottom: 0;
|
||||
|
||||
.note-editing-area{
|
||||
.note-editable{
|
||||
color: $gray-light;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.note-statusbar{
|
||||
background-color: $gray-dark;
|
||||
padding: 1px 0;
|
||||
border-top: 0;
|
||||
|
||||
.note-resizebar{
|
||||
&:hover{
|
||||
.note-icon-bar{
|
||||
border-top: 1px solid $orange;
|
||||
}
|
||||
}
|
||||
|
||||
.note-icon-bar{
|
||||
border-top: 1px solid $gray-light;
|
||||
@include transition(border-top 0.15s ease-out);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,24 +9,33 @@
|
||||
// dynamic area specific for the description field
|
||||
.pf-system-info-description-area{
|
||||
min-height: 124px;
|
||||
padding: 0; // overwrite default "pf-dynamic-area"
|
||||
|
||||
// textarea system description
|
||||
.editable-container{
|
||||
width: 100%;
|
||||
.editableform{
|
||||
width: 100%;
|
||||
.form-group{
|
||||
width: 100%;
|
||||
.editable-input{
|
||||
width: calc(100% - 75px);
|
||||
textarea{
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
// custom WYSIWYG style
|
||||
hr{
|
||||
border-top: 1px solid $gray-dark;
|
||||
}
|
||||
|
||||
.pf-system-info-description-button{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
.pf-system-info-description{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.note-toolbar{
|
||||
kbd{
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.note-customBtn{
|
||||
float: right; // customBtn group should be right
|
||||
}
|
||||
|
||||
@include clearfix(); // because of "floating" right button group
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
798
sass/library/summernote/_summernote.scss
Normal file
798
sass/library/summernote/_summernote.scss
Normal file
@@ -0,0 +1,798 @@
|
||||
@font-face {
|
||||
font-family: "summernote";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url("../../fonts/summernote.eot?dbafe969167589eda84514394d126413");
|
||||
src: url("../../fonts/summernote.eot?#iefix") format("embedded-opentype"), url("../../fonts/summernote.woff?dbafe969167589eda84514394d126413") format("woff"), url("../../fonts/summernote.ttf?dbafe969167589eda84514394d126413") format("truetype")
|
||||
}
|
||||
|
||||
[class^="note-icon-"]:before, [class*=" note-icon-"]:before {
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px summernote;
|
||||
font-size: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-decoration: inherit;
|
||||
text-rendering: auto;
|
||||
text-transform: none;
|
||||
vertical-align: middle;
|
||||
speak: none;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
|
||||
.note-icon-align-center:before, .note-icon-align-indent:before, .note-icon-align-justify:before, .note-icon-align-left:before, .note-icon-align-outdent:before, .note-icon-align-right:before, .note-icon-align:before, .note-icon-arrow-circle-down:before, .note-icon-arrow-circle-left:before, .note-icon-arrow-circle-right:before, .note-icon-arrow-circle-up:before, .note-icon-arrows-alt:before, .note-icon-arrows-h:before, .note-icon-arrows-v:before, .note-icon-bold:before, .note-icon-caret:before, .note-icon-chain-broken:before, .note-icon-circle:before, .note-icon-close:before, .note-icon-code:before, .note-icon-col-after:before, .note-icon-col-before:before, .note-icon-col-remove:before, .note-icon-eraser:before, .note-icon-font:before, .note-icon-frame:before, .note-icon-italic:before, .note-icon-link:before, .note-icon-magic:before, .note-icon-menu-check:before, .note-icon-minus:before, .note-icon-orderedlist:before, .note-icon-pencil:before, .note-icon-picture:before, .note-icon-question:before, .note-icon-redo:before, .note-icon-row-above:before, .note-icon-row-below:before, .note-icon-row-remove:before, .note-icon-special-character:before, .note-icon-square:before, .note-icon-strikethrough:before, .note-icon-subscript:before, .note-icon-summernote:before, .note-icon-superscript:before, .note-icon-table:before, .note-icon-text-height:before, .note-icon-trash:before, .note-icon-underline:before, .note-icon-undo:before, .note-icon-unorderedlist:before, .note-icon-video:before {
|
||||
display: inline-block;
|
||||
font-family: "summernote";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-decoration: inherit
|
||||
}
|
||||
|
||||
.note-icon-align-center:before {
|
||||
content: "\f101"
|
||||
}
|
||||
|
||||
.note-icon-align-indent:before {
|
||||
content: "\f102"
|
||||
}
|
||||
|
||||
.note-icon-align-justify:before {
|
||||
content: "\f103"
|
||||
}
|
||||
|
||||
.note-icon-align-left:before {
|
||||
content: "\f104"
|
||||
}
|
||||
|
||||
.note-icon-align-outdent:before {
|
||||
content: "\f105"
|
||||
}
|
||||
|
||||
.note-icon-align-right:before {
|
||||
content: "\f106"
|
||||
}
|
||||
|
||||
.note-icon-align:before {
|
||||
content: "\f107"
|
||||
}
|
||||
|
||||
.note-icon-arrow-circle-down:before {
|
||||
content: "\f108"
|
||||
}
|
||||
|
||||
.note-icon-arrow-circle-left:before {
|
||||
content: "\f109"
|
||||
}
|
||||
|
||||
.note-icon-arrow-circle-right:before {
|
||||
content: "\f10a"
|
||||
}
|
||||
|
||||
.note-icon-arrow-circle-up:before {
|
||||
content: "\f10b"
|
||||
}
|
||||
|
||||
.note-icon-arrows-alt:before {
|
||||
content: "\f10c"
|
||||
}
|
||||
|
||||
.note-icon-arrows-h:before {
|
||||
content: "\f10d"
|
||||
}
|
||||
|
||||
.note-icon-arrows-v:before {
|
||||
content: "\f10e"
|
||||
}
|
||||
|
||||
.note-icon-bold:before {
|
||||
content: "\f10f"
|
||||
}
|
||||
|
||||
.note-icon-caret:before {
|
||||
content: "\f110"
|
||||
}
|
||||
|
||||
.note-icon-chain-broken:before {
|
||||
content: "\f111"
|
||||
}
|
||||
|
||||
.note-icon-circle:before {
|
||||
content: "\f112"
|
||||
}
|
||||
|
||||
.note-icon-close:before {
|
||||
content: "\f113"
|
||||
}
|
||||
|
||||
.note-icon-code:before {
|
||||
content: "\f114"
|
||||
}
|
||||
|
||||
.note-icon-col-after:before {
|
||||
content: "\f115"
|
||||
}
|
||||
|
||||
.note-icon-col-before:before {
|
||||
content: "\f116"
|
||||
}
|
||||
|
||||
.note-icon-col-remove:before {
|
||||
content: "\f117"
|
||||
}
|
||||
|
||||
.note-icon-eraser:before {
|
||||
content: "\f118"
|
||||
}
|
||||
|
||||
.note-icon-font:before {
|
||||
content: "\f119"
|
||||
}
|
||||
|
||||
.note-icon-frame:before {
|
||||
content: "\f11a"
|
||||
}
|
||||
|
||||
.note-icon-italic:before {
|
||||
content: "\f11b"
|
||||
}
|
||||
|
||||
.note-icon-link:before {
|
||||
content: "\f11c"
|
||||
}
|
||||
|
||||
.note-icon-magic:before {
|
||||
content: "\f11d"
|
||||
}
|
||||
|
||||
.note-icon-menu-check:before {
|
||||
content: "\f11e"
|
||||
}
|
||||
|
||||
.note-icon-minus:before {
|
||||
content: "\f11f"
|
||||
}
|
||||
|
||||
.note-icon-orderedlist:before {
|
||||
content: "\f120"
|
||||
}
|
||||
|
||||
.note-icon-pencil:before {
|
||||
content: "\f121"
|
||||
}
|
||||
|
||||
.note-icon-picture:before {
|
||||
content: "\f122"
|
||||
}
|
||||
|
||||
.note-icon-question:before {
|
||||
content: "\f123"
|
||||
}
|
||||
|
||||
.note-icon-redo:before {
|
||||
content: "\f124"
|
||||
}
|
||||
|
||||
.note-icon-row-above:before {
|
||||
content: "\f125"
|
||||
}
|
||||
|
||||
.note-icon-row-below:before {
|
||||
content: "\f126"
|
||||
}
|
||||
|
||||
.note-icon-row-remove:before {
|
||||
content: "\f127"
|
||||
}
|
||||
|
||||
.note-icon-special-character:before {
|
||||
content: "\f128"
|
||||
}
|
||||
|
||||
.note-icon-square:before {
|
||||
content: "\f129"
|
||||
}
|
||||
|
||||
.note-icon-strikethrough:before {
|
||||
content: "\f12a"
|
||||
}
|
||||
|
||||
.note-icon-subscript:before {
|
||||
content: "\f12b"
|
||||
}
|
||||
|
||||
.note-icon-summernote:before {
|
||||
content: "\f12c"
|
||||
}
|
||||
|
||||
.note-icon-superscript:before {
|
||||
content: "\f12d"
|
||||
}
|
||||
|
||||
.note-icon-table:before {
|
||||
content: "\f12e"
|
||||
}
|
||||
|
||||
.note-icon-text-height:before {
|
||||
content: "\f12f"
|
||||
}
|
||||
|
||||
.note-icon-trash:before {
|
||||
content: "\f130"
|
||||
}
|
||||
|
||||
.note-icon-underline:before {
|
||||
content: "\f131"
|
||||
}
|
||||
|
||||
.note-icon-undo:before {
|
||||
content: "\f132"
|
||||
}
|
||||
|
||||
.note-icon-unorderedlist:before {
|
||||
content: "\f133"
|
||||
}
|
||||
|
||||
.note-icon-video:before {
|
||||
content: "\f134"
|
||||
}
|
||||
|
||||
.note-editor {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.note-editor .note-dropzone {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
color: #87cefa;
|
||||
background-color: #fff;
|
||||
opacity: .95
|
||||
}
|
||||
|
||||
.note-editor .note-dropzone .note-dropzone-message {
|
||||
display: table-cell;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.note-editor .note-dropzone.hover {
|
||||
color: #098ddf
|
||||
}
|
||||
|
||||
.note-editor.dragover .note-dropzone {
|
||||
display: table
|
||||
}
|
||||
|
||||
.note-editor .note-editing-area {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.note-editor .note-editing-area .note-editable {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.note-editor .note-editing-area .note-editable sup {
|
||||
vertical-align: super
|
||||
}
|
||||
|
||||
.note-editor .note-editing-area .note-editable sub {
|
||||
vertical-align: sub
|
||||
}
|
||||
|
||||
.note-editor .note-editing-area img.note-float-left {
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.note-editor .note-editing-area img.note-float-right {
|
||||
margin-left: 10px
|
||||
}
|
||||
|
||||
.note-editor.note-frame {
|
||||
border: 1px solid #a9a9a9
|
||||
}
|
||||
|
||||
.note-editor.note-frame.codeview .note-editing-area .note-editable {
|
||||
display: none
|
||||
}
|
||||
|
||||
.note-editor.note-frame.codeview .note-editing-area .note-codable {
|
||||
display: block
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-editing-area {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-editing-area .note-editable {
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
color: #000;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-editing-area .note-editable[contenteditable="false"] {
|
||||
background-color: #e5e5e5
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-editing-area .note-codable {
|
||||
display: none;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 0;
|
||||
font-family: Menlo, Monaco, monospace, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
background-color: #222;
|
||||
border: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
resize: none
|
||||
}
|
||||
|
||||
.note-editor.note-frame.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1050;
|
||||
width: 100% !important
|
||||
}
|
||||
|
||||
.note-editor.note-frame.fullscreen .note-editable {
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.note-editor.note-frame.fullscreen .note-resizebar {
|
||||
display: none
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #000;
|
||||
border: 0;
|
||||
border-top: 1px solid #e2e2e2
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output:empty {
|
||||
height: 0;
|
||||
border-top: 0 solid transparent
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .pull-right {
|
||||
float: right !important
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .text-muted {
|
||||
color: #777
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .text-primary {
|
||||
color: #286090
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .text-success {
|
||||
color: #3c763d
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .text-info {
|
||||
color: #31708f
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .text-warning {
|
||||
color: #8a6d3b
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .text-danger {
|
||||
color: #a94442
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .alert {
|
||||
padding: 7px 10px 2px 10px;
|
||||
margin: -7px 0 0 0;
|
||||
color: #000;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .alert .note-icon {
|
||||
margin-right: 5px
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .alert-success {
|
||||
color: #3c763d !important;
|
||||
background-color: #dff0d8 !important
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .alert-info {
|
||||
color: #31708f !important;
|
||||
background-color: #d9edf7 !important
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .alert-warning {
|
||||
color: #8a6d3b !important;
|
||||
background-color: #fcf8e3 !important
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-status-output .alert-danger {
|
||||
color: #a94442 !important;
|
||||
background-color: #f2dede !important
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-statusbar {
|
||||
background-color: #f5f5f5;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-statusbar .note-resizebar {
|
||||
width: 100%;
|
||||
height: 9px;
|
||||
padding-top: 1px;
|
||||
cursor: ns-resize
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar {
|
||||
width: 20px;
|
||||
margin: 1px auto;
|
||||
border-top: 1px solid #a9a9a9
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-statusbar.locked .note-resizebar {
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-statusbar.locked .note-resizebar .note-icon-bar {
|
||||
display: none
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-placeholder {
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.note-popover.popover {
|
||||
max-width: none
|
||||
}
|
||||
|
||||
.note-popover.popover .popover-content a {
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.note-popover.popover .arrow {
|
||||
left: 20px !important
|
||||
}
|
||||
|
||||
.note-toolbar {
|
||||
position: relative;
|
||||
z-index: 500
|
||||
}
|
||||
|
||||
.note-popover .popover-content, .panel-heading.note-toolbar {
|
||||
padding: 0 0 5px 5px;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.note-popover .popover-content > .btn-group, .panel-heading.note-toolbar > .btn-group {
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.note-popover .popover-content .btn-group .note-table, .panel-heading.note-toolbar .btn-group .note-table {
|
||||
min-width: 0;
|
||||
padding: 5px
|
||||
}
|
||||
|
||||
.note-popover .popover-content .btn-group .note-table .note-dimension-picker, .panel-heading.note-toolbar .btn-group .note-table .note-dimension-picker {
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.note-popover .popover-content .btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher, .panel-heading.note-toolbar .btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher {
|
||||
position: absolute !important;
|
||||
z-index: 3;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.note-popover .popover-content .btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted, .panel-heading.note-toolbar .btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted {
|
||||
position: relative !important;
|
||||
z-index: 1;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat
|
||||
}
|
||||
|
||||
.note-popover .popover-content .btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted, .panel-heading.note-toolbar .btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted {
|
||||
position: absolute !important;
|
||||
z-index: 2;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-style .dropdown-style blockquote, .panel-heading.note-toolbar .note-style .dropdown-style blockquote, .note-popover .popover-content .note-style .dropdown-style pre, .panel-heading.note-toolbar .note-style .dropdown-style pre {
|
||||
padding: 5px 10px;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-style .dropdown-style h1, .panel-heading.note-toolbar .note-style .dropdown-style h1, .note-popover .popover-content .note-style .dropdown-style h2, .panel-heading.note-toolbar .note-style .dropdown-style h2, .note-popover .popover-content .note-style .dropdown-style h3, .panel-heading.note-toolbar .note-style .dropdown-style h3, .note-popover .popover-content .note-style .dropdown-style h4, .panel-heading.note-toolbar .note-style .dropdown-style h4, .note-popover .popover-content .note-style .dropdown-style h5, .panel-heading.note-toolbar .note-style .dropdown-style h5, .note-popover .popover-content .note-style .dropdown-style h6, .panel-heading.note-toolbar .note-style .dropdown-style h6, .note-popover .popover-content .note-style .dropdown-style p, .panel-heading.note-toolbar .note-style .dropdown-style p {
|
||||
padding: 0;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-color .dropdown-toggle, .panel-heading.note-toolbar .note-color .dropdown-toggle {
|
||||
width: 20px;
|
||||
padding-left: 5px
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-color .dropdown-menu, .panel-heading.note-toolbar .note-color .dropdown-menu {
|
||||
min-width: 337px
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-color .dropdown-menu .note-palette, .panel-heading.note-toolbar .note-color .dropdown-menu .note-palette {
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-color .dropdown-menu .note-palette:first-child, .panel-heading.note-toolbar .note-color .dropdown-menu .note-palette:first-child {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-color .dropdown-menu .note-palette .note-palette-title, .panel-heading.note-toolbar .note-color .dropdown-menu .note-palette .note-palette-title {
|
||||
margin: 2px 7px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #eee
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-color .dropdown-menu .note-palette .note-color-reset, .panel-heading.note-toolbar .note-color .dropdown-menu .note-palette .note-color-reset {
|
||||
width: 100%;
|
||||
padding: 0 3px;
|
||||
margin: 3px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-color .dropdown-menu .note-palette .note-color-row, .panel-heading.note-toolbar .note-color .dropdown-menu .note-palette .note-color-row {
|
||||
height: 20px
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-color .dropdown-menu .note-palette .note-color-reset:hover, .panel-heading.note-toolbar .note-color .dropdown-menu .note-palette .note-color-reset:hover {
|
||||
background: #eee
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-para .dropdown-menu, .panel-heading.note-toolbar .note-para .dropdown-menu {
|
||||
min-width: 216px;
|
||||
padding: 5px
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-para .dropdown-menu > div:first-child, .panel-heading.note-toolbar .note-para .dropdown-menu > div:first-child {
|
||||
margin-right: 5px
|
||||
}
|
||||
|
||||
.note-popover .popover-content .dropdown-menu, .panel-heading.note-toolbar .dropdown-menu {
|
||||
min-width: 90px
|
||||
}
|
||||
|
||||
.note-popover .popover-content .dropdown-menu.right, .panel-heading.note-toolbar .dropdown-menu.right {
|
||||
right: 0;
|
||||
left: auto
|
||||
}
|
||||
|
||||
.note-popover .popover-content .dropdown-menu.right::before, .panel-heading.note-toolbar .dropdown-menu.right::before {
|
||||
right: 9px;
|
||||
left: auto !important
|
||||
}
|
||||
|
||||
.note-popover .popover-content .dropdown-menu.right::after, .panel-heading.note-toolbar .dropdown-menu.right::after {
|
||||
right: 10px;
|
||||
left: auto !important
|
||||
}
|
||||
|
||||
.note-popover .popover-content .dropdown-menu.note-check li a i, .panel-heading.note-toolbar .dropdown-menu.note-check li a i {
|
||||
color: deepskyblue;
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
.note-popover .popover-content .dropdown-menu.note-check li a.checked i, .panel-heading.note-toolbar .dropdown-menu.note-check li a.checked i {
|
||||
visibility: visible
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-fontsize-10, .panel-heading.note-toolbar .note-fontsize-10 {
|
||||
font-size: 10px
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-color-palette, .panel-heading.note-toolbar .note-color-palette {
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-color-palette div .note-color-btn, .panel-heading.note-toolbar .note-color-palette div .note-color-btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 1px solid #fff
|
||||
}
|
||||
|
||||
.note-popover .popover-content .note-color-palette div .note-color-btn:hover, .panel-heading.note-toolbar .note-color-palette div .note-color-btn:hover {
|
||||
border: 1px solid #000
|
||||
}
|
||||
|
||||
.note-dialog > div {
|
||||
display: none
|
||||
}
|
||||
|
||||
.note-dialog .form-group {
|
||||
margin-right: 0;
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.note-dialog .note-modal-form {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.note-dialog .note-image-dialog .note-dropzone {
|
||||
min-height: 100px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 30px;
|
||||
line-height: 4;
|
||||
color: lightgray;
|
||||
text-align: center;
|
||||
border: 4px dashed lightgray
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.note-image-input {
|
||||
height: auto
|
||||
}
|
||||
}
|
||||
|
||||
.note-placeholder {
|
||||
position: absolute;
|
||||
display: none;
|
||||
color: gray
|
||||
}
|
||||
|
||||
.note-handle .note-control-selection {
|
||||
position: absolute;
|
||||
display: none;
|
||||
border: 1px solid #000
|
||||
}
|
||||
|
||||
.note-handle .note-control-selection > div {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.note-handle .note-control-selection .note-control-selection-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
-webkit-opacity: .3;
|
||||
-khtml-opacity: .3;
|
||||
-moz-opacity: .3;
|
||||
opacity: .3;
|
||||
-ms-filter: alpha(opacity=30);
|
||||
filter: alpha(opacity=30)
|
||||
}
|
||||
|
||||
.note-handle .note-control-selection .note-control-handle {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 1px solid #000
|
||||
}
|
||||
|
||||
.note-handle .note-control-selection .note-control-holder {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: 1px solid #000
|
||||
}
|
||||
|
||||
.note-handle .note-control-selection .note-control-sizing {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #000
|
||||
}
|
||||
|
||||
.note-handle .note-control-selection .note-control-nw {
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
border-right: 0;
|
||||
border-bottom: 0
|
||||
}
|
||||
|
||||
.note-handle .note-control-selection .note-control-ne {
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
border-bottom: 0;
|
||||
border-left: none
|
||||
}
|
||||
|
||||
.note-handle .note-control-selection .note-control-sw {
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
border-top: 0;
|
||||
border-right: 0
|
||||
}
|
||||
|
||||
.note-handle .note-control-selection .note-control-se {
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
cursor: se-resize
|
||||
}
|
||||
|
||||
.note-handle .note-control-selection .note-control-se.note-control-holder {
|
||||
cursor: default;
|
||||
border-top: 0;
|
||||
border-left: none
|
||||
}
|
||||
|
||||
.note-handle .note-control-selection .note-control-selection-info {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-opacity: .7;
|
||||
-khtml-opacity: .7;
|
||||
-moz-opacity: .7;
|
||||
opacity: .7;
|
||||
-ms-filter: alpha(opacity=70);
|
||||
filter: alpha(opacity=70)
|
||||
}
|
||||
|
||||
.note-hint-popover {
|
||||
min-width: 100px;
|
||||
padding: 2px
|
||||
}
|
||||
|
||||
.note-hint-popover .popover-content {
|
||||
max-height: 150px;
|
||||
padding: 3px;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.note-hint-popover .popover-content .note-hint-group .note-hint-item {
|
||||
display: block !important;
|
||||
padding: 3px
|
||||
}
|
||||
|
||||
.note-hint-popover .popover-content .note-hint-group .note-hint-item.active, .note-hint-popover .popover-content .note-hint-group .note-hint-item:hover {
|
||||
display: block;
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background-color: #428bca;
|
||||
outline: 0
|
||||
}
|
||||
@@ -41,8 +41,9 @@
|
||||
@import "library/blue-imp-gallery/_blueimp-gallery"; // Blue Imp Gallery
|
||||
@import "library/blue-imp-gallery/_bootstrap-image-gallery"; // Blue Imp Gallery Bootstrap
|
||||
@import "library/blue-imp-gallery/_bootstrap-image-gallery"; // Blue Imp Gallery Bootstrap
|
||||
@import "library/bootstrap-toggle/_bootstrap-toggle"; // Bootstrap Toggle v2.2.0
|
||||
@import "library/bootstrap-toggle/_bootstrap-toggle"; // Bootstrap Toggle v2.2.0
|
||||
@import "library/bootstrap-checkbox/_awesome-bootstrap-checkbox"; // Bootstrap Customized Checkboxes v0.3.7 - https://github.com/flatlogic/awesome-bootstrap-checkbox
|
||||
@import "library/summernote/summernote"; // Summernote WYSIWYG editor v0.8.10
|
||||
|
||||
// Main THEME (Imports by order - do not change order)
|
||||
@import "main";
|
||||
|
||||
Reference in New Issue
Block a user