dave/pathfinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- improved system description editor, closed #363

Browse Source
This commit is contained in:
Exodus4D
2016-10-28 20:25:27 +02:00
parent 36bf3ea120
commit 4b1a6584d6
7 changed files with 119 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
js/app/map/map.js
View File

@@ -1077,7 +1077,6 @@ define([
input.select();
}, 0, inputElement);
});
console.log(system);
};
/**

59
js/app/ui/system_info.js
View File

@@ -37,7 +37,7 @@ define([
moduleElementToolbarClass: 'pf-table-tools', // class for "module toolbar" element
moduleToolbarActionId: 'pf-system-info-collapse-container', // id for "module toolbar action" element
descriptionTextareaElementClass: 'pf-system-info-description', // class for "description" textarea element (xEditable)
descriptionTextareaTooltipClass: 'pf-system-info-description-tooltip' // class for "description" tooltip
descriptionTextareaCharCounter: 'pf-form-field-char-count' // class for "character counter" element for form field
};
// disable Module update temporary (until. some requests/animations) are finished
@@ -46,6 +46,9 @@ define([
// animation speed values
var animationSpeedToolbarAction = 200;
// max character length for system description
var maxDescriptionLength = 512;
/**
* set module observer and look for relevant system data to update
*/
@@ -69,7 +72,7 @@ define([
toolsActionElement.velocity('stop').velocity({
opacity: 1,
height: '75px'
height: '100%'
},{
duration: animationSpeedToolbarAction,
display: 'block',
@@ -176,6 +179,33 @@ define([
$('.' + config.descriptionArea).hideLoadingAnimation();
};
/**
* update a character counter field with current value length - maxCharLength
* @param field
* @param charCounterElement
* @param maxCharLength
*/
var updateCounter = function(field, charCounterElement, maxCharLength){
var value = field.val();
var inputLength = value.length;
// line breaks are 2 characters!
var newLines = value.match(/(\r\n|\n|\r)/g);
var addition = 0;
if (newLines != null) {
addition = newLines.length;
}
inputLength += addition;
charCounterElement.text(maxCharLength - inputLength);
if(maxCharLength <= inputLength){
charCounterElement.toggleClass('txt-color-red', true);
}else{
charCounterElement.toggleClass('txt-color-red', false);
}
};
/**
*
* @param parentElement
@@ -247,6 +277,7 @@ define([
rows: 5,
name: 'description',
inputclass: config.descriptionTextareaElementClass,
tpl: '<textarea maxlength="' + maxDescriptionLength + '"></textarea>',
params: function(params){
params.mapData = {
@@ -292,12 +323,24 @@ define([
});
// on xEditable open -------------------------------------------------------------------------
descriptionTextareaElement.on('shown', function(e){
descriptionTextareaElement.on('shown', function(e, editable){
var textarea = editable.input.$input;
// disable module update until description field is open
disableModuleUpdate = true;
// disable tooltip
tempModuleElement.find('.' + config.descriptionTextareaTooltipClass).tooltip('disable');
// create character counter
var charCounter = $('<kbd>', {
class: [config.descriptionTextareaCharCounter, 'txt-color', 'text-right'].join(' ')
});
textarea.parent().next().append(charCounter);
// update character counter
updateCounter(textarea, charCounter, maxDescriptionLength);
textarea.on('keyup', function(){
updateCounter($(this), charCounter, maxDescriptionLength);
});
});
// on xEditable close ------------------------------------------------------------------------
@@ -305,14 +348,9 @@ define([
var value = $(this).editable('getValue', true);
if(value.length === 0){
// show button if value is empty
hideToolsActionElement();
descriptionButton.show();
}else{
// enable tooltip
tempModuleElement.find('.' + config.descriptionTextareaTooltipClass).tooltip('enable');
}
// enable module update
@@ -421,7 +459,6 @@ define([
descriptionButtonClass: config.addDescriptionButtonClass,
moduleToolbarActionId: config.moduleToolbarActionId,
descriptionTextareaClass: config.descriptionTextareaElementClass,
descriptionTooltipClass: config.descriptionTextareaTooltipClass,
shatteredWormholeInfo: shatteredWormholeInfo,

2
public/css/pathfinder.css
View File

File diff suppressed because one or more lines are too long

1
public/js/v1.1.7/app/map/map.js
View File

@@ -1077,7 +1077,6 @@ define([
input.select();
}, 0, inputElement);
});
console.log(system);
};
/**

59
public/js/v1.1.7/app/ui/system_info.js
View File

@@ -37,7 +37,7 @@ define([
moduleElementToolbarClass: 'pf-table-tools', // class for "module toolbar" element
moduleToolbarActionId: 'pf-system-info-collapse-container', // id for "module toolbar action" element
descriptionTextareaElementClass: 'pf-system-info-description', // class for "description" textarea element (xEditable)
descriptionTextareaTooltipClass: 'pf-system-info-description-tooltip' // class for "description" tooltip
descriptionTextareaCharCounter: 'pf-form-field-char-count' // class for "character counter" element for form field
};
// disable Module update temporary (until. some requests/animations) are finished
@@ -46,6 +46,9 @@ define([
// animation speed values
var animationSpeedToolbarAction = 200;
// max character length for system description
var maxDescriptionLength = 512;
/**
* set module observer and look for relevant system data to update
*/
@@ -69,7 +72,7 @@ define([
toolsActionElement.velocity('stop').velocity({
opacity: 1,
height: '75px'
height: '100%'
},{
duration: animationSpeedToolbarAction,
display: 'block',
@@ -176,6 +179,33 @@ define([
$('.' + config.descriptionArea).hideLoadingAnimation();
};
/**
* update a character counter field with current value length - maxCharLength
* @param field
* @param charCounterElement
* @param maxCharLength
*/
var updateCounter = function(field, charCounterElement, maxCharLength){
var value = field.val();
var inputLength = value.length;
// line breaks are 2 characters!
var newLines = value.match(/(\r\n|\n|\r)/g);
var addition = 0;
if (newLines != null) {
addition = newLines.length;
}
inputLength += addition;
charCounterElement.text(maxCharLength - inputLength);
if(maxCharLength <= inputLength){
charCounterElement.toggleClass('txt-color-red', true);
}else{
charCounterElement.toggleClass('txt-color-red', false);
}
};
/**
*
* @param parentElement
@@ -247,6 +277,7 @@ define([
rows: 5,
name: 'description',
inputclass: config.descriptionTextareaElementClass,
tpl: '<textarea maxlength="' + maxDescriptionLength + '"></textarea>',
params: function(params){
params.mapData = {
@@ -292,12 +323,24 @@ define([
});
// on xEditable open -------------------------------------------------------------------------
descriptionTextareaElement.on('shown', function(e){
descriptionTextareaElement.on('shown', function(e, editable){
var textarea = editable.input.$input;
// disable module update until description field is open
disableModuleUpdate = true;
// disable tooltip
tempModuleElement.find('.' + config.descriptionTextareaTooltipClass).tooltip('disable');
// create character counter
var charCounter = $('<kbd>', {
class: [config.descriptionTextareaCharCounter, 'txt-color', 'text-right'].join(' ')
});
textarea.parent().next().append(charCounter);
// update character counter
updateCounter(textarea, charCounter, maxDescriptionLength);
textarea.on('keyup', function(){
updateCounter($(this), charCounter, maxDescriptionLength);
});
});
// on xEditable close ------------------------------------------------------------------------
@@ -305,14 +348,9 @@ define([
var value = $(this).editable('getValue', true);
if(value.length === 0){
// show button if value is empty
hideToolsActionElement();
descriptionButton.show();
}else{
// enable tooltip
tempModuleElement.find('.' + config.descriptionTextareaTooltipClass).tooltip('enable');
}
// enable module update
@@ -421,7 +459,6 @@ define([
descriptionButtonClass: config.addDescriptionButtonClass,
moduleToolbarActionId: config.moduleToolbarActionId,
descriptionTextareaClass: config.descriptionTextareaElementClass,
descriptionTooltipClass: config.descriptionTextareaTooltipClass,
shatteredWormholeInfo: shatteredWormholeInfo,

4
public/templates/modules/system_info.html
View File

@@ -35,9 +35,7 @@
<i class="fa fa-fw fa-lg fa-pencil pull-right pf-module-icon-button {{descriptionButtonClass}}" data-toggle="tooltip" data-container="body" title="edit description"></i>
<div id="{{moduleToolbarActionId}}" class="pf-table-tools-action">
<span class="{{descriptionTooltipClass}}" data-toggle="tooltip" data-placement="bottom" data-container="body" title="System description">
<a style="width: 200px" href="#" class="{{descriptionTextareaClass}}" data-title="Enter username"></a>
</span>
<a href="#" class="{{descriptionTextareaClass}}"></a>
</div>
</div>
</div>

23
sass/layout/_system-info.scss
View File

@@ -12,8 +12,27 @@
min-height: 123px;
// textarea system description
.pf-system-info-description{
width: 330px;
.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;
}
}
}
}
}
.pf-form-field-char-count{
display: block;
margin-top: 10px;
}
}