frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Bidi support for Text Direction and Structured Text (#961) 

* Bidi support for Text Direction and Structured Text

Signed-off-by: Moshe Wajnberg <wajnberg@il.ibm.com>

* Adding documentation for functions in bidi.js and format.js

Signed-off-by: Moshe Wajnberg <wajnberg@il.ibm.com>

* Removing unused functions from format.js

Signed-off-by: Moshe Wajnberg <wajnberg@il.ibm.com>
This commit is contained in:
wajnberg 2016-08-25 18:47:30 +03:00 committed by Nick O'Leary
parent 456fc23463
commit ccc08be0ee
16 changed files with 1565 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Gruntfile.js
View File

@ -1,5 +1,5 @@
/**
* Copyright 2013, 2015 IBM Corp.
* Copyright 2013, 2016 IBM Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@ -104,6 +104,8 @@ module.exports = function(grunt) {
"editor/js/settings.js",
"editor/js/user.js",
"editor/js/comms.js",
"editor/js/bidi.js",
"editor/js/format.js",
"editor/js/ui/state.js",
"editor/js/nodes.js",
"editor/js/history.js",

141
editor/js/bidi.js Normal file
View File

@ -0,0 +1,141 @@
/**
* Copyright 2016 IBM Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/
RED.bidi = (function() {
var textDir = "";
var LRE = "\u202A",
RLE = "\u202B",
PDF = "\u202C";
function isRTLValue(stringValue) {
for (var ch in stringValue) {
if (isBidiChar(stringValue.charCodeAt(ch))) {
return true;
}
else if(isLatinChar(stringValue.charCodeAt(ch))) {
return false;
}
}
return false;
}
function isBidiChar(c) {
if (c >= 0x05d0 && c <= 0x05ff) {
return true;
}
else if (c >= 0x0600 && c <= 0x065f) {
return true;
}
else if (c >= 0x066a && c <= 0x06ef) {
return true;
}
else if (c >= 0x06fa && c <= 0x07ff) {
return true;
}
else if (c >= 0xfb1d && c <= 0xfdff) {
return true;
}
else if (c >= 0xfe70 && c <= 0xfefc) {
return true;
}
else {
return false;
}
}
function isLatinChar(c){
if((c > 64 && c < 91)||(c > 96 && c < 123)) {
return true;
}
else {
return false;
}
}
/**
* Determines the text direction of a given string.
* @param value - the string
*/
function resolveBaseTextDir(value) {
if (textDir == "auto") {
if (isRTLValue(value)) {
return "rtl";
} else {
return "ltr";
}
}
else {
return textDir;
}
}
function onInputChange() {
$(this).attr("dir", resolveBaseTextDir($(this).val()));
}
/**
* Listens to keyup, paste and cut events of a given input field. Upon one of these events the text direction is computed again
* @param input - the input field
*/
function initInputEvents(input) {
input.on("keyup",onInputChange).on("paste",onInputChange).on("cut",onInputChange);
}
/**
* Enforces the text direction of a given string by adding UCC (Unicode Control Characters)
* @param value - the string
*/
function enforceTextDirectionWithUCC(value) {
if (value) {
var dir = resolveBaseTextDir(value);
if (dir == "ltr") {
return LRE + value + PDF;
}
else if (dir == "rtl") {
return RLE + value + PDF;
}
}
return value;
}
/**
* Enforces the text direction for all the spans with style bidiAware under workpsace or sidebar div
*/
function enforceTextDirectionOnPage() {
$("#workspace").find('span.bidiAware').each(function() {
$(this).attr("dir", resolveBaseTextDir($(this).html()));
});
$("#sidebar").find('span.bidiAware').each(function() {
$(this).attr("dir", resolveBaseTextDir($(this).text()));
});
}
/**
* Sets the text direction preference
* @param dir - the text direction preference
*/
function setTextDirection(dir) {
textDir = dir;
}
return {
setTextDirection: setTextDirection,
enforceTextDirectionOnPage: enforceTextDirectionOnPage,
enforceTextDirectionWithUCC: enforceTextDirectionWithUCC,
resolveBaseTextDir: resolveBaseTextDir,
initInputEvents: initInputEvents
}
})();

1329
editor/js/format.js Normal file
View File

File diff suppressed because it is too large Load Diff

2
editor/js/history.js
View File

@ -236,7 +236,7 @@ RED.history = (function() {
});
if (ev.node.type === 'subflow') {
$("#menu-item-workspace-menu-"+ev.node.id.replace(".","-")).text(ev.node.name);
$("#menu-item-workspace-menu-"+ev.node.id.replace(".","-")).text(RED.bidi.enforceTextDirectionWithUCC(ev.node.name));
}
} else {
RED.editor.updateNodeProperties(ev.node);

10
editor/js/main.js
View File

@ -1,5 +1,5 @@
/**
* Copyright 2013, 2015 IBM Corp.
* Copyright 2013, 2016 IBM Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@ -176,7 +176,13 @@ var RED = (function() {
{id:"menu-item-view-snap-grid",label:RED._("menu.label.view.snapGrid"),toggle:true,onselect:RED.view.toggleSnapGrid},
{id:"menu-item-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:toggleStatus, selected: true},
null,
{id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:RED.sidebar.toggleSidebar, selected: true}
{id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:RED.sidebar.toggleSidebar, selected: true},
{id:"menu-item-bidi",label:RED._("menu.label.view.textDir"),options:[
{id:"menu-item-bidi-default",toggle:"text-direction",label:RED._("menu.label.view.defaultDir"),selected: true, onselect:function(s) { if(s){RED.view.toggleTextDir("")}}},
{id:"menu-item-bidi-ltr",toggle:"text-direction",label:RED._("menu.label.view.ltr"), onselect:function(s) { if(s){RED.view.toggleTextDir("ltr")}}},
{id:"menu-item-bidi-rtl",toggle:"text-direction",label:RED._("menu.label.view.rtl"), onselect:function(s) { if(s){RED.view.toggleTextDir("rtl")}}},
{id:"menu-item-bidi-auto",toggle:"text-direction",label:RED._("menu.label.view.auto"), onselect:function(s) { if(s){RED.view.toggleTextDir("auto")}}}
]}
]},
null,
{id:"menu-item-import",label:RED._("menu.label.import"),options:[

19
editor/js/ui/editor.js
View File

@ -295,17 +295,25 @@ RED.editor = (function() {
* @param node - the node being edited
* @param property - the name of the field
* @param prefix - the prefix to use in the input element ids (node-input|node-config-input)
* @param definition - the definition of the field
*/
function preparePropertyEditor(node,property,prefix) {
function preparePropertyEditor(node,property,prefix,definition) {
var input = $("#"+prefix+"-"+property);
if (input.attr('type') === "checkbox") {
input.prop('checked',node[property]);
} else {
}
else {
var val = node[property];
if (val == null) {
val = "";
}
input.val(val);
if ("format" in definition[property] && definition[property].format !== "" && input[0].nodeName === "DIV") {
input.html(RED.format.getHtml(val, definition[property].format, {}, false, "en"));
RED.format.attach(input[0], definition[property].format, {}, false, "en");
} else {
input.val(val).attr("dir", RED.bidi.resolveBaseTextDir(val));
RED.bidi.initInputEvents(input);
}
}
}
@ -1197,7 +1205,7 @@ RED.editor = (function() {
changes['name'] = editing_node.name;
editing_node.name = newName;
changed = true;
$("#menu-item-workspace-menu-"+editing_node.id.replace(".","-")).text(newName);
$("#menu-item-workspace-menu-"+editing_node.id.replace(".","-")).text(RED.bidi.enforceTextDirectionWithUCC(newName));
}
var newDescription = subflowEditor.getValue();
@ -1289,7 +1297,8 @@ RED.editor = (function() {
value: ""
});
$("#subflow-input-name").val(subflow.name);
$("#subflow-input-name").val(subflow.name).attr("dir", RED.bidi.resolveBaseTextDir(subflow.name));
RED.bidi.initInputEvents($("#subflow-input-name"));
subflowEditor.getSession().setValue(subflow.info||"",-1);
var userCount = 0;
var subflowType = "subflow:"+editing_node.id;

6
editor/js/ui/palette.js
View File

@ -91,15 +91,15 @@ RED.palette = (function() {
el.css({height:multiLineNodeHeight+"px"});
var labelElement = el.find(".palette_label");
labelElement.html(lines);
labelElement.html(lines).attr('dir', RED.bidi.resolveBaseTextDir(lines));
el.find(".palette_port").css({top:(multiLineNodeHeight/2-5)+"px"});
var popOverContent;
try {
var l = "<p><b>"+label+"</b></p>";
var l = "<p><b>"+RED.bidi.enforceTextDirectionWithUCC(label)+"</b></p>";
if (label != type) {
l = "<p><b>"+label+"</b><br/><i>"+type+"</i></p>";
l = "<p><b>"+RED.bidi.enforceTextDirectionWithUCC(label)+"</b><br/><i>"+type+"</i></p>";
}
popOverContent = $(l+(info?info:$("script[data-help-name|='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").trim())
.filter(function(n) {

11
editor/js/ui/tab-info.js
View File

@ -70,7 +70,7 @@ RED.sidebar.info = (function() {
var table = '<table class="node-info"><tbody>';
table += '<tr class="blank"><td colspan="2">'+RED._("sidebar.info.node")+'</td></tr>';
if (node.type != "subflow" && node.name) {
table += "<tr><td>"+RED._("common.label.name")+"</td><td>&nbsp;"+node.name+"</td></tr>";
table += '<tr><td>'+RED._("common.label.name")+'</td><td>&nbsp;<span class="bidiAware" dir="'+RED.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>';
}
table += "<tr><td>"+RED._("sidebar.info.type")+"</td><td>&nbsp;"+node.type+"</td></tr>";
table += "<tr><td>"+RED._("sidebar.info.id")+"</td><td>&nbsp;"+node.id+"</td></tr>";
@ -93,7 +93,7 @@ RED.sidebar.info = (function() {
userCount++;
}
});
table += "<tr><td>"+RED._("common.label.name")+"</td><td>"+subflowNode.name+"</td></tr>";
table += '<tr><td>'+RED._("common.label.name")+'</td><td><span class="bidiAware" dir=\"'+RED.bidi.resolveBaseTextDir(subflowNode.name)+'">'+subflowNode.name+'</span></td></tr>';
table += "<tr><td>"+RED._("sidebar.info.instances")+"</td><td>"+userCount+"</td></tr>";
}
@ -140,13 +140,14 @@ RED.sidebar.info = (function() {
table += "</tbody></table><hr/>";
if (!subflowNode && node.type != "comment") {
var helpText = $("script[data-help-name|='"+node.type+"']").html()||"";
table += '<div class="node-help">'+helpText+"</div>";
table += '<div class="node-help"><span class="bidiAware" dir=\"'+RED.bidi.resolveBaseTextDir(helpText)+'">'+helpText+'</span></div>';
}
if (subflowNode) {
table += '<div class="node-help">'+marked(subflowNode.info||"")+'</div>';
table += '<div class="node-help"><span class="bidiAware" dir=\"'+RED.bidi.resolveBaseTextDir(subflowNode.info||"")+'">'+marked(subflowNode.info||"")+'</span></div>';
} else if (node._def && node._def.info) {
var info = node._def.info;
table += '<div class="node-help">'+marked(typeof info === "function" ? info.call(node) : info)+'</div>';
var textInfo = (typeof info === "function" ? info.call(node) : info);
table += '<div class="node-help"><span class="bidiAware" dir=\"'+RED.bidi.resolveBaseTextDir(textInfo)+'">'+marked(textInfo)+'</span></div>';
//table += '<div class="node-help">'+(typeof info === "function" ? info.call(node) : info)+'</div>';
}

5
editor/js/ui/tabs.js
View File

@ -126,7 +126,8 @@ RED.tabs = (function() {
if (tab.icon) {
$('<img src="'+tab.icon+'" class="red-ui-tab-icon"/>').appendTo(link);
}
$('<span/>').text(tab.label).appendTo(link);
var span = $('<span/>',{class:"bidiAware"}).text(tab.label).appendTo(link);
span.attr('dir', RED.bidi.resolveBaseTextDir(tab.label));
link.on("click",onTabClick);
link.on("dblclick",onTabDblClick);
@ -239,7 +240,7 @@ RED.tabs = (function() {
tabs[id].label = label;
var tab = ul.find("a[href='#"+id+"']");
tab.attr("title",label);
tab.find("span").text(label);
tab.find("span").text(label).attr('dir', RED.bidi.resolveBaseTextDir(label));
updateTabWidths();
},
order: function(order) {

10
editor/js/ui/view.js
View File

@ -1792,6 +1792,7 @@ RED.view = (function() {
l = d._def.label;
try {
l = (typeof l === "function" ? l.call(d) : l)||"";
l = RED.bidi.enforceTextDirectionWithUCC(l);
} catch(err) {
console.log("Definition error: "+d.type+".label",err);
l = d.type;
@ -2154,7 +2155,8 @@ RED.view = (function() {
).classed("link_selected", false);
}
RED.bidi.enforceTextDirectionOnPage();
if (d3.event) {
d3.event.preventDefault();
}
@ -2357,6 +2359,12 @@ RED.view = (function() {
toggleSnapGrid: function(state) {
snapGrid = state;
redraw();
},
toggleTextDir: function(value) {
RED.bidi.setTextDirection(value);
RED.nodes.eachNode(function(n) { n.dirty = true;});
redraw();
RED.palette.refresh();
},
scale: function() {
return scaleFactor;

7
editor/js/ui/workspaces.js
View File

@ -94,7 +94,7 @@ RED.workspaces = (function() {
workspace_tabs.renameTab(workspace.id,label);
RED.nodes.dirty(true);
RED.sidebar.config.refresh();
$("#menu-item-workspace-menu-"+workspace.id.replace(".","-")).text(label);
$("#menu-item-workspace-menu-"+workspace.id.replace(".","-")).text(RED.bidi.enforceTextDirectionWithUCC(label));
}
RED.tray.close();
}
@ -109,7 +109,8 @@ RED.workspaces = (function() {
'</div>').appendTo(dialogForm);
$('<input type="text" style="display: none;" />').prependTo(dialogForm);
dialogForm.submit(function(e) { e.preventDefault();});
$("#node-input-name").val(workspace.label);
$("#node-input-name").val(workspace.label).attr("dir", RED.bidi.resolveBaseTextDir(workspace.label));
RED.bidi.initInputEvents($("#node-input-name"));
dialogForm.i18n();
},
close: function() {
@ -225,7 +226,7 @@ RED.workspaces = (function() {
refresh: function() {
RED.nodes.eachWorkspace(function(ws) {
workspace_tabs.renameTab(ws.id,ws.label);
$("#menu-item-workspace-menu-"+ws.id.replace(".","-")).text(ws.label);
$("#menu-item-workspace-menu-"+ws.id.replace(".","-")).text(RED.bidi.enforceTextDirectionWithUCC(ws.label));
})
RED.nodes.eachSubflow(function(sf) {

2
editor/sass/editor.scss
View File

@ -196,7 +196,7 @@
display: inline-block;
width: 100px;
}
.form-row input {
.form-row input .form-row div[contenteditable="true"] {
width:70%;
}

33
editor/sass/forms.scss
View File

@ -26,6 +26,7 @@
button,
input,
select,
div[contenteditable="true"],
textarea {
margin: 0;
font-size: 100%;
@ -33,12 +34,14 @@ textarea {
}
button,
div[contenteditable="true"],
input {
*overflow: visible;
line-height: normal;
}
button::-moz-focus-inner,
div[contenteditable="true"]::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
@ -110,6 +113,7 @@ legend small {
label,
input,
div[contenteditable="true"],
button,
select,
textarea {
@ -119,6 +123,7 @@ textarea {
}
input,
div[contenteditable="true"],
button,
select,
textarea {
@ -161,6 +166,7 @@ input[type="color"],
input,
textarea,
div[contenteditable="true"],
.uneditable-input {
width: 206px;
}
@ -184,6 +190,7 @@ input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
div[contenteditable="true"],
.uneditable-input {
background-color: #ffffff;
border: 1px solid $form-input-border-color;
@ -207,6 +214,7 @@ input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
div[contenteditable="true"],
.uneditable-input:focus {
border-color: $form-input-focus-color;
outline: 0;
@ -294,11 +302,13 @@ textarea:-moz-placeholder {
}
input:-ms-input-placeholder,
div[contenteditable="true"]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: $form-placeholder-color;
}
input::-webkit-input-placeholder,
div[contenteditable="true"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: $form-placeholder-color;
}
@ -384,6 +394,7 @@ textarea[class*="span"],
input,
textarea,
div[contenteditable="true"],
.uneditable-input {
margin-left: 0;
}
@ -515,12 +526,14 @@ input[type="checkbox"][readonly] {
.control-group.warning .checkbox,
.control-group.warning .radio,
.control-group.warning input,
.control-group.warning div[contenteditable="true"],
.control-group.warning select,
.control-group.warning textarea {
color: #c09853;
}
.control-group.warning input,
.control-group.warning div[contenteditable="true"],
.control-group.warning select,
.control-group.warning textarea {
border-color: #c09853;
@ -530,6 +543,7 @@ input[type="checkbox"][readonly] {
}
.control-group.warning input:focus,
.control-group.warning div[contenteditable="true"]:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
border-color: #a47e3c;
@ -554,12 +568,14 @@ input[type="checkbox"][readonly] {
.control-group.error .checkbox,
.control-group.error .radio,
.control-group.error input,
.control-group.error div[contenteditable="true"],
.control-group.error select,
.control-group.error textarea {
color: #b94a48;
}
.control-group.error input,
.control-group.error div[contenteditable="true"],
.control-group.error select,
.control-group.error textarea {
border-color: #b94a48;
@ -569,6 +585,7 @@ input[type="checkbox"][readonly] {
}
.control-group.error input:focus,
.control-group.error div[contenteditable="true"]:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
border-color: #953b39;
@ -593,12 +610,14 @@ input[type="checkbox"][readonly] {
.control-group.success .checkbox,
.control-group.success .radio,
.control-group.success input,
.control-group.success div[contenteditable="true"],
.control-group.success select,
.control-group.success textarea {
color: #468847;
}
.control-group.success input,
.control-group.success div[contenteditable="true"],
.control-group.success select,
.control-group.success textarea {
border-color: #468847;
@ -608,6 +627,7 @@ input[type="checkbox"][readonly] {
}
.control-group.success input:focus,
.control-group.success div[contenteditable="true"]:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {
border-color: #356635;
@ -632,12 +652,14 @@ input[type="checkbox"][readonly] {
.control-group.info .checkbox,
.control-group.info .radio,
.control-group.info input,
.control-group.info div[contenteditable="true"],
.control-group.info select,
.control-group.info textarea {
color: #3a87ad;
}
.control-group.info input,
.control-group.info div[contenteditable="true"],
.control-group.info select,
.control-group.info textarea {
border-color: #3a87ad;
@ -647,6 +669,7 @@ input[type="checkbox"][readonly] {
}
.control-group.info input:focus,
.control-group.info div[contenteditable="true"]:focus,
.control-group.info select:focus,
.control-group.info textarea:focus {
border-color: #2d6987;
@ -663,6 +686,7 @@ input[type="checkbox"][readonly] {
}
input:focus:invalid,
div[contenteditable="true"]:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
color: #b94a48;
@ -670,6 +694,7 @@ select:focus:invalid {
}
input:focus:invalid:focus,
div[contenteditable="true"]:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
border-color: #e9322d;
@ -727,6 +752,8 @@ select:focus:invalid:focus {
.input-append input,
.input-prepend input,
.input-append div[contenteditable="true"],
.input-prepend div[contenteditable="true"],
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
@ -740,6 +767,8 @@ select:focus:invalid:focus {
.input-append input,
.input-prepend input,
.input-append div[contenteditable="true"],
.input-prepend div[contenteditable="true"],
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
@ -755,6 +784,8 @@ select:focus:invalid:focus {
.input-append input:focus,
.input-prepend input:focus,
.input-append div[contenteditable="true"]:focus,
.input-prepend div[contenteditable="true"]:focus,
.input-append select:focus,
.input-prepend select:focus,
.input-append .uneditable-input:focus,
@ -809,6 +840,7 @@ select:focus:invalid:focus {
}
.input-append input,
.input-append div[contenteditable="true"],
.input-append select,
.input-append .uneditable-input {
-webkit-border-radius: 4px 0 0 4px;
@ -839,6 +871,7 @@ select:focus:invalid:focus {
}
.input-prepend.input-append input,
.input-prepend.input-append div[contenteditable="true"],
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
-webkit-border-radius: 0;

4
editor/sass/jquery.scss
View File

@ -18,11 +18,11 @@
font-size: 14px !important;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
.ui-widget input, .ui-widget div[contenteditable="true"], .ui-widget select, .ui-widget textarea, .ui-widget button {
font-size: 14px !important;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
}
.ui-widget input {
.ui-widget input, .ui-widget div[contenteditable="true"] {
box-shadow: none;
}

4
nodes/core/io/23-watch.html
View File

@ -17,7 +17,7 @@
<script type="text/x-red" data-template-name="watch">
<div class="form-row node-input-filename">
<label for="node-input-files"><i class="fa fa-file"></i> <span data-i18n="watch.label.files"></span></label>
<input type="text" id="node-input-files" data-i18n="[placeholder]watch.placeholder.files">
<div id="node-input-files" contenteditable="true" tabindex="1" data-i18n="[placeholder]watch.placeholder.files"></div>
</div>
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
@ -46,7 +46,7 @@
category: 'advanced-input',
defaults: {
name: {value:""},
files: {value:"",required:true}
files: {value:"",required:true, format:"filepath"}
},
color:"BurlyWood",
inputs:0,

7
red/api/locales/en-US/editor.json
View File

@ -25,7 +25,12 @@
"view": {
"view": "View",
"showGrid": "Show grid",
"snapGrid": "Snap to grid"
"snapGrid": "Snap to grid",
"textDir": "Text Direction",
"defaultDir": "Default",
"ltr": "Left-to-right",
"rtl": "Right-to-left",
"auto": "Contextual"
},
"sidebar": {
"show": "Show sidebar"