Develop Reference

Multiple instances of CodeMirror textarea on the same page

I'm trying to make a little project for job interview questions and have a bunch of questions with answers and code examples on the page. Each is inside a .collapsible div from Materialize.css, and when clicked shows the answer and code example.
What is the best way to go about this? I tried putting initializer into a function, grabbing all my textareas form the DOM, looping through them and turning them into CodeMirror textareas.
$(document).ready(function(){
var blocks = document.getElementsByClassName('code-block');
function createEditorFrom(selector) {
let editor = CodeMirror.fromTextArea(selector, {
lineNumbers : false,
mode: "swift",
});
}
for (var x = 0; x < blocks.length; x++) {
createEditorFrom(blocks[x]);
}
// Callback for Collapsible open
$('.collapsible').collapsible({
onOpen: function() {
// call editor.refresh()?
},
});
});
This does work but I feel like it is not a very elegant way of solving this issue. Is there a better way to do this?
Questions:
Is there a better way to create all the CodeMirror textareas?
The code in the editors does not appear until clicked. Nothing I do makes it work. Calling editor.refresh() (with setTimeout), and autorefresh: true.

One thing you will have to do anyhow is keeping a reference to your CodeMirror instances (eg. to get/set their value), so createEditorForm will have to return the CodeMirror instance, & you could for example push them to an array in the loop:
function createEditorFrom(selector) {
return CodeMirror.fromTextArea(selector, {
lineNumbers : false,
mode: "swift",
});
}
let codeblocks = [];
for (var x = 0; x < blocks.length; x++) {
codeblocks.push({
CM: createEditorFrom(blocks[x]),
el: blocks[x]
});
}
I've encountered a similar problem to "The code in the editors does not appear until clicked" and I even wrote a comment next to the solution. Translated to your implementation that would be:
function createEditorFrom(selector) {
var instance = CodeMirror.fromTextArea(selector, {
lineNumbers : false,
mode: "swift",
});
// make sure the CodeMirror unit expands by setting a null character
instance.setValue('\0');
instance.setValue('');
return instance;
}
For what it's worth, I also used some CSS tweaks to ensure consistent initial & max-height rendering:
/* CodeMirror */
.CodeMirror { height: auto; overflow: auto; max-height: 250px; }
.CodeMirror-scroll { height: auto; min-height: 24px; }
Is there a better way to create all the CodeMirror textareas [than by looping through them]?
Yes, you can lazy initialize them if they are not visible on page load (and actually I believe it's better to initialize them only when the parent node of the <textarea> is visible, I'm not sure if CodeMirror requires render-info (like Element.getBoundingClientRect), e.g. only load them onOpen of their collapsible parent.

I ended up initializing each one when the collapsible is opened. This works but I guess it would need to be adjusted if there were multiple CodeMirror textareas in the same collapsible.
I also added in a check becuase otherwise when the collapsible gets opened, then closed, then reopened it would create a duplicate textarea.
$(document).ready(function(){
$('.collapsible').collapsible({
onOpen: createCodeBlock
});
function createCodeBlock(target) {
var card = target.context.parentElement.parentElement;
var textarea = card.getElementsByClassName('code-block')[0];
// Placeholder class that prevents the duplicate creation of
// the same textarea when the collapsible is closed then reopened.
if (!textarea.classList.contains("created")) {
CodeMirror.fromTextArea(textarea, {
lineNumbers: false,
mode: "swift",
});
textarea.className += "created";
}
}
});

Set Kendo UI Window values globally

I'm working with a lot of Kendo UI windows. Is there some way to specify default values somehow globally? Or maybe a more realistic version, can I create some parent with predefined values and then just overwrite the values I need to change?
For example, I want the same error behavior and a modal parameter for all of the windows, so I would like to do something like:
$("#parentWindow").kendoWindow({
modal: true,
error: function () {
this.close();
new Notification().error();
}
});
And then use the parent window as a base for new windows:
$("#newWindow").kendoWindow({
title: "This window should have the options (modal and error) of the parentWindow",
}).??getTheRestOfTheValuesFromParent()??;
Or rewrite some parameter:
$("#newWindow2").kendoWindow({
modal: false,
title: "A window with overwritten modal parameter",
}).??getTheRestOfTheValuesFromParent()??;
Is it somehow possible to achieve this, is there any possibility of something like C# inheritance?
Maybe it's a stupid question, but I'm not so familiar with JS.

I highly encourage you to create your own wrapper code over all - or at least those more complex - kendo widgets. My team has been doing it for years in a project we use kendo for everything and we are having very positivelly results. The main purpose is what you need: a global behaviour. If after thousand windows coded over your project, you need to change them all, just change the wrapper. It's just a simple jQuery function:
$.fn.MyWindow = function(options) {
var $target = $(this);
var widget = {
_defaultOptions: {
actions: ["Minimize", "Maximize", "Close"],
visible: false,
width: 400,
height: 400,
modal: true
},
_options: options || {},
_target: $target,
_widget: null,
_init: function() {
this._manageOptions();
this._createWidget();
return this;
},
_manageOptions: function() {
// Here you can perform some validations like displaying an error when a parameter is missing or whatever
this._options = $.extend(this._options, this._defaultOptions);
},
_createWidget: function() {
this._widget = this._target.kendoWindow(this._options).data("kendoWindow");
// Create here some behaviours that the widget doesn't haves, like closing the window when user click the black overlay
if (this._options.closeOnOverlayClick) {
$('body').off('click', '.k-overlay').on('click', '.k-overlay', function() {
this._widget.close();
}.bind(this));
}
},
Show: function(center) {
if (center) {
this._widget.center();
}
this._widget.open();
}
};
return widget._init();
};
var wnd = $("#wnd").MyWindow({
title: "My first window",
closeOnOverlayClick: true // Your own parameter
});
// Now you work with your own functions:
wnd.Show(true);
Demo.
There are so many customizations, like your own events - some of those kendo's widgets doesn't haves - etc..

I will just add that there is an article(here) about creating custom Kendo widgets where you can find more information about the specifics of different scenarios that may be implemented.

Ι had a case like yours with kendo windows, kendo grids and kendo dropdownlists. For that I created HtmlHelpers for all my elements and called them when I needed to. Since you are using kendo asp.net-mvc I would recommend to look at this way.
public static WindowBuilder GlobalKendoWindow(this HtmlHelper helper)
{
return helper.Kendo().Window()
.Draggable()
.Animation(true)
.Visible(false)
.AutoFocus(true)
.Modal(true)
.Scrollable(true)
.HtmlAttributes(new { #class = "atn-modal-container" })
.Actions(actions => actions.Minimize().Close())
.Deferred();
}
and render it in my Html like this
#(Html.GlobalKendoWindow()
.Name("addCandidateDialog")
.Title(Html.GetResource(cps, "AddCandidateDialogTitle"))
.LoadContentFrom("AddCandidate", "Candidate")
.Events(events => events.Open("athena.addCandidacy.onAddCandidateOpen").Close("athena.addCandidacy.onAddCandidateClose"))
)

CKEditor - Button to switch shown Toolbar

I'm trying to give a user the ability to swap around the toolbar between presets based on a button press. Ideally that button would be in the CKEditor screen, but I can play around with it.
I've found this SO Article in which I get the concept that you destroy your instance, and re-initialize it with a 'New Config'.
To follow suit I took one of the higher ranked responses, modified it to match my table, and threw it onto a button.
function toolbarSwap(){
var editor = CKEDITOR.instances.editor;
if (editor) { editor.destroy(true); }
CKEDITOR.config.toolbar_Basic = [['Bold','Italic','Underline',
'-','JustifyLeft','JustifyCenter','JustifyRight','-','Undo','Redo']];
CKEDITOR.config.toolbar = 'Basic';
CKEDITOR.config.width=400;
CKEDITOR.config.height=300;
CKEDITOR.replace('editor', CKEDITOR.config);
}
The replace command concerns me since I can't see it working, as to if the data within the editor will go away but either way nothing is happening when I click the button that runs this function.
Is this the best method, or is there a way I can do this within CKEditor directly?
Update
function toolbarSwap(){
var editor = CKEDITOR.instances['editor'];
if (editor) { editor.destroy(true); }
CKEDITOR.config.toolbar_Basic = [['Bold','Italic','Underline',
'-','JustifyLeft','JustifyCenter','JustifyRight','-','Undo','Redo']];
CKEDITOR.config.toolbar = 'Basic';
CKEDITOR.config.width=400;
CKEDITOR.config.height=300;
CKEDITOR.replace('editor', CKEDITOR.config);
}
It seems like modified the instantiation of editor with the ID resolves the issue of it finding it, but the Editor is being emptied every time I click it. Is there a way to reload the config, instead of destroying the instance?
Update 2
function changeToolBar() {
var expanded = true;
if (expanded === true) {
var myToolBar = [{ name: 'verticalCustomToolbar', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic'] }];
var config = {};
config.toolbar = myToolBar;
CKEDITOR.instances.editor.destroy();//destroy the existing editor
CKEDITOR.replace('editor', config);
expanded = false;
} else {
CKEDITOR.instances.editor.destroy();//destroy the existing editor
CKEDITOR.replace('editor', {toolbar: 'Full'});
expanded = true;
console.log("Expand me")
};
}
Here is where I'm at so far. I am not losing the data during the re-init, but I am unable to ever get the 'else' statement to trigger.

My Function was correct, but the var being initialized -in- the function was resetting it's purpose everything. AKA It's -always- true on click
<button type="button" onclick="changeToolBar()">Swap It</button>
function changeToolBar() {
if (expanded === true) {
var myToolBar = [{ name: 'verticalCustomToolbar', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic'] }]; //Generic placeholder
var config = {};
config.toolbar = myToolBar;
CKEDITOR.instances.editor.destroy();//destroy the existing editor
CKEDITOR.replace('editor', config);
console.log(expanded); // Logging to ensure change
expanded = false;
console.log(expanded); // Logging to ensure the change
} else {
CKEDITOR.instances.editor.destroy();//destroy the existing editor
CKEDITOR.replace('editor', {toolbar: 'Full'}); // Toolbar 'full' is a default one
expanded = true;
console.log("Expand me") // Logging if it works
};
}
Can also swap in Full with a predefined config for toolbars.

TinyMCE -> Cannot read property 'setAttribute' of null

so I'm making an MVC site that needs a HTML input box.
I have a text area that loads from an ajax dialog window. I understand that TinyMCE needs me to remove the control when i hide the dialog, that is fine.
I cannot however get the editor to load at all. I am using version 4.1.9 (2015-03-10) with the jquery module.
i.e. both tinymce.jquery.js & jquery.tinymce.min.js
Once the dialog window has opened i call this;
$("textarea").tinymce({
// General options
mode: "textareas",
theme: "modern",
// Theme options
menubar: false,
toolbar: "bold,italic,underline,|,bullist,numlist",
statusbar: false,
init_instance_callback: function (editor) {
console.log("tinymce init: " + editor.id);
}
});
But i get an exception in the javascript in the following method, it appears self.ariaTarget is undefined leading to the line starting elm.setAttribute failing because elm is null.
I don't understand what i have done wrong.
/**
* Sets the specified aria property.
*
* #method aria
* #param {String} name Name of the aria property to set.
* #param {String} value Value of the aria property.
* #return {tinymce.ui.Control} Current control instance.
*/
aria: function(name, value) {
var self = this, elm = self.getEl(self.ariaTarget);
if (typeof value === "undefined") {
return self._aria[name];
} else {
self._aria[name] = value;
}
if (self._rendered) {
elm.setAttribute(name == 'role' ? name : 'aria-' + name, value);
}
return self;
},
Thanks for the help.
Mark
Edit:
I have been following this jsfiddle http://jsfiddle.net/thomi_ch/m0aLmh3n/19/ and instead of loading tinymce in with the document, it loads it from a url when it initialises (see below). I've changed my code to use the same script_url as the example and it works to render the editor (missing icons etc as the css cant be found) but this implies to me that there is something wrong with the version of my tinymce.jquery.js file.
$('textarea').tinymce({
script_url : 'http://demo.nilooma.com/system/plugins/tinymce/4.1.6/tiny_mce/tinymce.gzip.php',
toolbar: 'link',
plugins: 'link',
forced_root_block : '',
init_instance_callback: function(editor) {
console.log('tinymce init: '+editor.id);
}
});
I have tried both tinymce.jquery.js & tinymce.js from versions 4.1.9 & 4.1.6 as the jsfiddle uses and all the combinations give me the same error.
Is it possible that there is an incompatibility with another library?

I found a resolution to the issue. I believe it was caused by trying to initialise the element multiple times, and after that I also found a flaw that the element wasn't displaying the editor as it was initialised when it was hidden.
The code I've used to initialise the bootstrap modal is this;
$("#myModal").modal({
keyboard: true
}, "show");
//Bind open
$("#myModal").on("show.bs.modal", function () {
$(document).trigger("DialogLoaded");
});
//Bind close
$("#myModal").on("hidden.bs.modal", function () {
$(document).trigger("DialogClosed");
});
Then I listen to the events on the document;
tinyMCE.init({
// General options
mode: "textareas",
theme: "modern",
// Theme options
menubar: false,
toolbar: "bold,italic,underline,|,bullist,numlist",
statusbar: false,
init_instance_callback: function(editor) {
console.log("tinymce init: " + editor.id);
}
});
$(document).on("DialogLoaded", function () {
var textAreas = $("textarea", $("#myModal"));
for (var i = 0; i < textAreas.length; i++) {
//Check if element already has editor enabled
if (tinymce.get(textAreas[i].id)) {
//Remove existing editor
tinyMCE.execCommand("mceRemoveEditor", false, textAreas[i].id);
}
//Add editor
tinyMCE.execCommand("mceAddEditor", false, textAreas[i].id);
}
});
$(document).on("DialogClosed", function () {
//Remove all editors in dialog
var textAreas = $("textarea", $("#myModal"));
for (var i = 0; i < textAreas.length; i++) {
//Check if element already has editor enabled
if (tinymce.get(textAreas[i].id))
tinyMCE.execCommand("mceRemoveEditor", false, textAreas[i].id);
}
});
I guess there are several points to remember;
Only load tinyMCE on visible elements
Initialise tinyMCE first
Ensure its only loaded each element once
Make sure each textarea has a unique id (and remove it once hidden)
I hope this helps someone else having any trouble with TinyMCE.
Thanks,
Mark.

Webkit transitionEnd event grouping

I have a HTML element to which I have attached a webkitTransitionEnd event.
function transEnd(event) {
alert( "Finished transition!" );
}
var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );
Then I proceed to change its CSS left and top properties like:
node.style.left = '400px';
node.style.top = '400px';
This causes the DIV to move smoothly to the new position. But, when it finishes, 2 alert boxes show up, while I was expecting just one at the end of the animation. When I changed just the CSS left property, I get one alert box - so this means that the two changes to the style are being registered as two separate events. I want to specify them as one event, how do I do that?
I can't use a CSS class to apply both the styles at the same time because the left and top CSS properties are variables which I will only know at run time.

Check the propertyName event:
function transEnd(event) {
if (event.propertyName === "left") {
alert( "Finished transition!" );
}
}
var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );
That way, it will only fire when the "left" property is finished. This would probably work best if both properties are set to the same duration and delay. Also, this will work if you change only "left", or both, but not if you change only "top".
Alternatively, you could use some timer trickery:
var transEnd = function anon(event) {
if (!anon.delay) {
anon.delay = true;
clearTimeout(anon.timer);
anon.timer = setTimeout(function () {
anon.delay = false;
}, 100);
alert( "Finished transition!" );
}
};
var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );
This should ensure that your code will run at most 1 time every 100ms. You can change the setTimeout delay to suit your needs.

just remove the event:
var transEnd = function(event) {
event.target.removeEventListener("webkitTransitionEnd",transEnd);
};
it will fire for the first property and not for the others.

If you prefer it in JQuery, try this out.
Note there is an event param to store the event object and use within the corresponding function.
$("#divId").bind('oTransitionEnd transitionEnd webkitTransitionEnd', event, function() {
alert(event.propertyName)
});

from my point of view the expected behaviour of the code would be to
trigger an alert only when the last transition has completed
support transitions on any property
support 1, 2, many transitions seamlessly
Lately I've been working on something similar for a page transition manager driven by CSS timings.
This is the idea
// Returs the computed value of a CSS property on a DOM element
// el: DOM element
// styleName: CSS property name
function getStyleValue(el, styleName) {
// Not cross browser!
return window.getComputedStyle(el, null).getPropertyValue(styleName);
}
// The DOM element
var el = document.getElementById('el');
// Applies the transition
el.className = 'transition';
// Retrieves the number of transitions applied to the element
var transitionProperties = getStyleValue(el, '-webkit-transition-property');
var transitionCount = transitionProperties.split(',').length;
// Listener for the transitionEnd event
function eventListener(e) {
if (--transitionCount === 0) {
alert('Transition ended!');
el.removeEventListener('webkitTransitionEnd', eventListener);
}
}
el.addEventListener('webkitTransitionEnd', eventListener, false);
You can test here this implementation or the (easier) jQuery version, both working on Webkit only

If you are using webkit I assume you are mobilizing a web-application for cross platform access.
If so have you considered abstracting the cross platform access at the web-app presentation layer ?
Webkit does not provide native look-and-feel on mobile devices but this is where a new technology can help.