As far as I know the directionality plugin in TinyMCE, with the button ltr, only apply dir="ltr" to the selected top element.
I want to change this behaviour, so it will apply the ltr directionality to all subtree elements of the selected element, in which the direction is not ltr.
I solved it outside of the directionality plugin using:
editor.on('ExecCommand', function(e) {
switch(e.command){
case "mceDirectionLTR":
var selectedNode = tinymce.activeEditor.selection.getNode();
changeDirection(selectedNode,'ltr');
break;
case "mceDirectionRTL":
var selectedNode = tinymce.activeEditor.selection.getNode();
changeDirection(selectedNode,'rtl');
break;
}
});
And
function changeDirection(rootNode, desiredDirectionLiteral){
var node; var walk = document.createTreeWalker(rootNode, NodeFilter.SHOW_ELEMENT, null, false);
while (node = walk.nextNode()) {
if (node.dir !== null && node.dir !== '' && node.dir !== desiredDirectionLiteral) {
node.dir = desiredDirectionLiteral;
}
}
}
Related
I believe my if/else statements are not running and end up not making the changes to the elements I target. When I run it, I believe the parent element is not being called correctly for the first function. For the second function, it is stating that it's not a node?
Function expandArticleBody()
Find the article in which the button that was clicked belongs.
If the text on the button that was clicked is a V, then set the display property of the article's body to none. Also set the text on the button to >.
If the text on the button that was clicked is not a V, then set the display property of the article's body to block. Also set the text on the button to V.
function highlightArticle()
Find the article in which the button that was clicked belongs.
If the text on the button is +, then add the .highlight class to the article and set the text on the button to -.
If the text on the button is not +, then remove the .highlight class from the article and set the text on the button to +.
function expandArticleBody() {
const allBtns = document.querySelectorAll(".expand_button");
allBtns.forEach((btn) => {
btn.addEventListener("click", (event) => {
let parent = event.target.parentElement;
let text = event.target.innerHTML;
if(text !== "V"){
parent.style.display = "block";
event.target.innerHTML = "V";
} else if(text == "V"){
parent.style.display = "none";
event.target.innerHTML = ">";
}
});
});
}
function highlightArticle() {
const highlight = document.querySelectorAll(".highlightBtn");
highlight.forEach((btn) => {
btn.addEventListener("click", (event) => {
let text = event.target.innerHTML;
if(text == "+"){
event.target.classList.add(".highlight");
event.target.innerHTML = "-";
} else if(text !== "+"){
event.target.classList.remove(".highlight");
event.target.innerHTML = "+";
}
});
});
}
I am trying to add classes to markers which works fine. However when it is a divIcon it requires different styling. So I am trying to set another className if the Instance is a DivIcon.
The Code below is always true because L.divIcon is still a marker(?)
if(e.target instanceof L.DivIcon) {
let icon = e.target._icon
if(!(L.DomUtil.hasClass(icon, 'leaflet-pm-divIcon-selected'))) {
L.DomUtil.addClass(e.target._icon, 'leaflet-pm-divIcon-selected')
}
}
else if (e.target instanceof L.Marker) {
let icon = e.target._icon
if(!(L.DomUtil.hasClass(icon, 'leaflet-pm-marker-selected'))) {
offsetMarker(icon, 8)
L.DomUtil.addClass(e.target._icon, 'leaflet-pm-marker-selected')
}
}
doing e.target instanceof L.Marker && e.target instanceof L.DivIcon also does not work
Check if the layer icon is L.DivIcon:
e.target.getIcon() instanceof L.DivIcon
I am trying to create a form which has some mandatory fields that requires validation on form submission.
Could anyone suggest me the best possible way to do that in SAP UI5? The mandatory fields are in greater number, thus i don't want to check all fields separately by their ID.
You can do this in two scenarios. While entering a value, or when submitting the form as in your question.
CheckRequired: function(oEvent) {
var aInputs = [this.getView().byId(oEvent.getSource().getId())];
var sError = false;
jQuery.each(aInputs, function(i, input) {
if (!input.getValue() || input.getValue().length < 1) {
input.setValueState("Error");
input.focus();
sError = true;
} else {
input.setValueState("None");
}
});
return sError;
},
This function is to be used with the onLiveChange property. It checks if the control is filled with at least one character.
If you would like to check everything when you press submit. you could use a function like this with your form:
_onSubmitCheck: function() {
var oForm = this.getView().byId("form").getContent();
var sError = false;
oForm.forEach(function(Field) {
if (typeof Field.getValue === "function") {
if (!Field.getValue() || Field.getValue().length < 1) {
Field.setValueState("Error");
sError = true;
}
else {
Field.setValueState("None");
}
}
});
return sError;
},
It will loop over your form controls to check if the getValue() method exists as part of the control. If that returns yes, it wil check if it has a value of at least 1 character.
There are kind of two ways.
add
"sap.ui5": {
...
"handleValidation": true,
to your manifest.json and type & constraints to your inputs
<Input type="Text" value="{path: 'NoFioriValidationsInDefault', type: 'sap.ui.model.type.String', constraints: { minLength:2 }}" valueLiveUpdate="true" enabled="{= ${editView>/nfvid/enabled} && ${editView>/creating}}" visible="true" width="auto" valueHelpOnly="false" maxLength="0" id="inp_cond_nfvid" required="{editView>/nfvid/required}"/>
This gives just visual feedback to the user, if you need the status in your controller you can either iterate over all the inputs and check them by hand, or use https://github.com/qualiture/ui5-validator
Just by calling
var validator = new Validator();
validator.validate(this.byId("form1"));
if (!validator.isValid()){
//do something additional to drawing red borders? message box?
return;
}
in your controller, the view will mark missing required inputs with the ValueState.ERROR (red borders) and tell you if all inputs inside the supplied control are valid.
I am doing it the old-school way. The input fields do get the required=true property and then I loop over all controls found with this property:
// store view ID to compare with control IDs later
var viewId = this.getView().getId();
jQuery('input[required=required]').each(function () {
// control has wrapper with no id, therefore we need to remove the "-inner" end
var oControl = sap.ui.getCore().byId(this.id.replace(/-inner/g,''));
// CAUTION: as OpenUI5 keeps all loaded views in DOM, ensure that the controls found belong to the current view
if (oControl.getId().startsWith(viewId) && (oControl instanceof sap.m.Input || oControl instanceof sap.m.DatePicker)) {
var val = oControl.getValue();
if (!val) {
oControl.setValueState(sap.ui.core.ValueState.Error);
oControl.openValueStateMessage();
bError = true;
return false;
} else {
oControl.setValueState(sap.ui.core.ValueState.None);
oControl.closeValueStateMessage();
}
}
});
HTH,
Anton
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editorUrdu"></textarea>
<script>
CKEDITOR.plugins.addExternal( 'easykeymap', '/ckeditor/plugins/easykeymap', 'plugin.js' );
CKEDITOR.replace( 'editorUrdu',{
extraPlugins: 'easykeymap',
contentsLangDirection: 'rtl'
});
</script>
</body>
</html>
/**
* This work is mine, and yours. You can modify it as you wish.
* #Author: Roni Saha<roni.cse#gmail.com>
*
* This source file is subject to the MIT license that is bundled
* with this source code in the file LICENSE.
*/
CKEDITOR.plugins.add('easykeymap',
{
requires : ['wysiwygarea'],
init: function (editor) {
//var keyMaps = CKEDITOR.tools.extend({}, editor.config.easykeymaps || {}, true);
//Not using keymap specification from config variables, but using internally defined ones from param below
function isRegisteredKeystroke(code) {
if(typeof editor.keystrokeHandler.keystrokes[code] != 'undefined') {
console.warn("the keystroke : " + code + " is being attached to another event")
return true;
}
return false;
}
var sm1 = []; var en1 = [];
sm1[192]="؏"; en1[192]="~";
sm1[49]="۱"; en1[49]="1";
sm1[50]="۲"; en1[50]="2";
sm1[51]="۳"; en1[51]="3";
sm1[52]="۴"; en1[52]="4";
sm1[53]="۵"; en1[53]="5";
sm1[54]="۶"; en1[54]="6";
sm1[55]="۷"; en1[55]="7";
sm1[56]="۸"; en1[56]="8";
sm1[57]="۹"; en1[57]="9";
sm1[48]="۰"; en1[48]="0";
sm1[189]="-"; en1[189]="-";
sm1[187]="="; en1[187]="=";
//sm1[8]=""; en1[8]="";//BACKSPACE
var sm2 = []; var en2 = [];
sm2[9]=""; en2[9]="";//TAB
sm2[81]="ق"; en2[81]="Q";
sm2[87]="و"; en2[87]="W";
sm2[69]="ع"; en2[69]="E";
sm2[82]="ر"; en2[82]="R";
sm2[84]="ت"; en2[84]="T";
sm2[89]="ے"; en2[89]="Y";
sm2[85]="ء"; en2[85]="U";
sm2[73]="ی"; en2[73]="I";
sm2[79]="ہ"; en2[79]="O";
sm2[80]="پ"; en2[80]="P";
sm2[219]="'"; en2[219]="{";
sm2[221]="ﷲ"; en2[221]="}";
sm2[220]="÷"; en2[220]="\\";
var sm3 = []; var en3 = [];
//sm3[20]=""; en3[20]="";//CAPSLOCK
sm3[65]="ا"; en3[65]="A";
sm3[83]="س"; en3[83]="S";
sm3[68]="د"; en3[68]="D";
sm3[70]="ف"; en3[70]="F";
sm3[71]="گ"; en3[71]="G";
sm3[72]="ح"; en3[72]="H";
sm3[74]="ج"; en3[74]="J";
sm3[74]="ک"; en3[75]="K";
sm3[76]="ل"; en3[76]="L";
sm3[186]="؛"; en3[186]=":";
sm3[222]=","; en3[222]="\"";
sm3[13]=""; en3[13]="";//ENTER
var sm4 = []; var en4 = [];
//sm4[16]=""; en4[16]="";//SHIFT
sm4[90]="ز"; en4[90]="Z";
sm4[88]="ش"; en4[88]="X";
sm4[67]="چ"; en4[67]="C";
sm4[86]="ط"; en4[86]="V";
sm4[66]="ب"; en4[66]="B";
sm4[78]="ن"; en4[78]="N";
sm4[77]="م"; en4[77]="M";
sm4[188]="،"; en4[188]="<";
sm4[190]="۔"; en4[190]=">";
sm4[191]="/"; en4[191]="?";
sm4[16]=""; en4[16]="";//SHIFT
var keyBoard = {};
keyBoard.Row1 = { "sm" : sm1, "en" : en1 };
keyBoard.Row2 = { "sm" : sm2, "en" : en2 };
keyBoard.Row3 = { "sm" : sm3, "en" : en3 };
keyBoard.Row4 = { "sm" : sm4, "en" : en4 };
function getMappedCharacter(code) {
console.info(code);
if (typeof keyBoard.Row1.sm[code] != 'undefined')
return keyBoard.Row1.sm[code]
else if (typeof keyBoard.Row2.sm[code] != 'undefined')
return keyBoard.Row2.sm[code]
else if (typeof keyBoard.Row3.sm[code] != 'undefined')
return keyBoard.Row3.sm[code]
else if (typeof keyBoard.Row4.sm[code] != 'undefined')
return keyBoard.Row4.sm[code]
else
return false;
}
editor.on( 'key', function( event ) {
var t = event.target;
var mappedCode = getMappedCharacter(event.data.keyCode);
if (mappedCode !== false && !isRegisteredKeystroke(event.data.keyCode)) {
event.cancel();
if(typeof mappedCode == 'function') {
return mappedCode.call(editor, editor);
}
editor.insertText(mappedCode);
}
} );
}
});
I'm using ckeditor for allowing my users to input Urdu text. Like Arabic, Urdu is cursive, and uses distinct ligatures when joined.
I'm using the
editor.on( 'key', function( event ))
event to intercept the
event.data.keyCode
and replace it using
editor.insertText()
function.
So, e.g. if the user types L and A, I replace it with the Urdu
ا (U+0627)
and
ل (U+0644).
Now, after being typed, they both appear as distinct characters, separate from each other. I can press space, or enter, and they both remain as they are. But I would like them to be replaced with their proper equivalent ligature ﻻ which is FEFB in this unicode chart
I see that ckeditor automatically correct this if I switch to Source view. There, inside the <p> block, it shows the separate, disjointed letter's already replace with proper cursive ligature. And it keeps it that way when I switch back from Source view. But whatever is causing this to happen, how can I trigger that to happen while typing?
Attaching images also.
After typing
After going to source view
After returning from source view
When ever you type L and A , editor.insertText() is just append it as two separate stings, instead of combining into one.
<p>"ل"
"ا"
<br>
</p>
that why its not producing desired output.
Added these two line
var $pTag = editor.getSelection().getRanges()[0].startContainer.$; // accessing the p tag
$pTag.innerText = $pTag.innerText+mappedCode; // modifing the inner text
replacing
editor.insertText(mappedCode); // in editor.on( 'key', function( event )
will output as "لا"
above fix has some issues to deal with like linebeak(new line)
Updated
replace the below snippet
var $pTag = editor.getSelection().getRanges()[0].startContainer.$;
var innerText =$pTag.innerText; // accessing the p tag data
$pTag.innerText = ""; // removing the existing data
editor.insertHtml(innerText+mappedCode); // concat with new string
with
editor.insertText(mappedCode); // in editor.on( 'key', function( event )
Example: codepen
I want to have the drag'n'drop functionality on some labels that are positioned with a absolute layout in a nativescript app. Is it even possible to move them in a new absolute position using drag'n'drop? If yes, can you explain a way to achieve this?
Thank you in advance.
After a little research I found out that you can achieve this with the following steps:
Define an Absolute Layout
Inside it place a label
On the label observer the pan gesture
using the deltaX and deltaY you can change the left and top values of the label using the static method setLeft() and setTop() of absolute layout on the label.
Sample xml:
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<AbsoluteLayout>
<Label left="10" top="10" text="drag me" id="dragLabel" />
</AbsoluteLayout>
</Page>
Sample js code:
var viewModule = require("ui/core/view");
var gestures = require("ui/gestures");
var absoluteLayout = require("ui/layouts/absolute-layout");
function pageLoaded(args) {
var page = args.object;
var dragLabel = viewModule.getViewById(page, "dragLabel");
var observer = dragLabel.observe(gestures.GestureTypes.pan, function (panGestureEventData) {
var deltaX = panGestureEventData.deltaX;
var deltaY = panGestureEventData.deltaY;
absoluteLayout.AbsoluteLayout.setTop(this, deltaY);
absoluteLayout.AbsoluteLayout.setLeft(this, deltaX);
}, dragLabel);
};
Also, nativescript in the current version (1.2.x) doesn't support the state in the gestures. In the pan gesture, the state is really necessary to know. Here is what you can do (in ios), so you can get the state. Edit the file /tns_modules/ui/gestures/gestures.ios.js and change the function _getPanData with the following:
function _getPanData(args, view) {
var recognizer = args.ios;
var state = "unknown";
switch(recognizer.state) {
case UIGestureRecognizerStateBegan:
state = "began";
break;
case UIGestureRecognizerStateChanged:
state = "changed";
break;
case UIGestureRecognizerStateEnded:
state = "ended";
break;
case UIGestureRecognizerStateCancelled:
state = "cancelled";
break;
case UIGestureRecognizerStateFailed:
state = "failed";
break;
}
return {
type: args.type,
view: args.view,
ios: args.ios,
android: undefined,
deltaX: recognizer.translationInView(view).x,
deltaY: recognizer.translationInView(view).y,
state: state
};
}
Then, you can access the state with the state field:
var observer = dragLabel.observe(gestures.GestureTypes.pan, function (panGestureEventData) {
// ... panGestureEventData.state has on of the above values...
});