We Keep Coding

Cannot add mapkey icon to L.easyButton in Leaflet

I am trying to add an icon from mapkey to L.easyButton using the following code, but I am getting the error below.
var menuButton = L.easyButton({
states: [{
stateName: 'show-menu',
icon: L.icon.mapkey({icon:"bars",color:'#000000',background: false,size:25}),
title: 'Show Menu',
onClick: function (btn, map) {
menu.options.button = btn;
menu.show();
btn.state('hide-menu');
}
},{
stateName: 'hide-menu',
icon: 'fa-star',
title: 'Hide Menu',
onClick: function (btn, map) {
menu.hide();
btn.state('show-menu');
}
}],
id: 'styles-menu',
});
menuButton.addTo(map);
Error:
TypeError: ambiguousIconString.match is not a function
Do I need to add another type of icon or something?

L.easyButton accepts a range of options for icons, but an L.icon object is not one of them. L.icon objects are for defining marker icons in Leaflet. It does not appear that you are defining a marker icon.
I would try using the actual icon class in a <span> for the icon property. For example:
var menuButton = L.easyButton({
states: [{
stateName: 'show-menu',
icon: "<span class='mki mki-bars'></span>",
title: 'Show Menu',
/* ... your other code below ... */
}]
});
Here's an example using JSFiddle. You can see the menu button beneath the +/- buttons on the top left of the map.
Note that I did not build a menu, so clicking the menu button will throw an error.

L.easyButton doesn't take a L.icon argument. Your second use is correct, it can take a Font Awesome icon name. A plain HTML icon could work for you here - see http://danielmontague.com/projects/easyButton.js/v2/examples/#icon-options

How to create a WinJS Flyout via Javascript

Currently I have a toolbar with some buttons, here is how I create it :
HTML
<div id="toolbarContainer1" style="direction: rtl"></div>
Javascript
var dataArray= [
new WinJS.UI.Command(null, { id: 'cmdView3', label: 'View3', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 3', onclick: function () { changeView('view3') } }),
new WinJS.UI.Command(null, { id: 'cmdView2', label: 'View2', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 2', onclick: function () { changeView('view2') } }),
new WinJS.UI.Command(null, { id: 'cmdView1', label: 'View1', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 1', onclick: function () { changeView('view1') } })
];
window.createImperativeToolBar = function () {
var tb = new WinJS.UI.ToolBar(document.querySelector("#toolbarContainer1"), {
data: new WinJS.Binding.List(dataArray)
});
var thisToolbar = document.querySelector('#toolbarContainer1');
thisToolbar.winControl.closedDisplayMode = 'full';
}
I've tried doing adding it like so :
new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' })
It gets appended to the DOM but it looks like the options aren't working. The div (flyout) in the dom has no id as I've set above.
I want to show the flyout on button click :
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
document.getElementById("formatTextFlyout").winControl.show(formatTextButton);
}
But obviously because the ID doesn't get set, an error gets logged. Any ideas ?
Here is a fiddle of what I have tried : https://jsfiddle.net/reko91/yg0rs4xc/1/

When you create a win-control like so:
new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' })
The id "formatTextFlyout" is only the the id of this flyout control.
But you use document.getElementById("formatTextFlyout") method to find this control, the problem is here, this method can only find the html element object with the Id "formatTextFlyout", and there is no one. You can refer to getElementById method.
One solution here is you create a Flyout like so:
HTML:
<div id="flyoutContainer"></div>
Javascript:
var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' });
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
document.getElementById("flyoutContainer").winControl.show(formatTextButton);
}
Or
var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' });
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
flyout.show(selectedButton);
}
If you read the sample of WinJS.UI.Flyout object there, you will find in html file, it creates a Flyout like so:
<div id="formatTextFlyout" data-win-control="WinJS.UI.Flyout"
aria-label="{Format text flyout}">
The html element is div and has a id "formatTextFlyout".
Addition: In the website Try WinJS, there are a lot of win-control samples which written with html+javascript+css.

Is there a possibility to add a HTML element dynamically inside a dialog of a plugin in CK-EDITOR?

I am creating a widget in ck-editor where when user clicks a toolbar button,a dialog is opened.In a dialog there is text field and one search button,rest area in a dialog is for search results to be shown.
Is it possible that user enters some text in a text field , hit search button and by using some API I display some 50 search results(scrollable) in a dialog of a plugin below the text field and search button?
Right now I am using this code (just a dummy to check if I can add elements dynamically)-
CKEDITOR.dialog.add('simplebox', function(editor){
return {
title: 'Reference',
minWidth: 600,
minHeight: 400,
onShow: function() {
alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
},
contents: [
{
id: 'new_reference',
label:'New Reference',
elements: [
{
id: 'type',
type: 'select',
label: 'Type',
items: [
[ editor.lang.common.notSet, '' ],
[ 'Book' ],
[ 'Journal' ],
[ 'URL' ],
[ 'PHD Thesis']
]
},
{
type: 'text',
id: 'reference',
label: 'Reference',
validate: CKEDITOR.dialog.validate.notEmpty( "Search field cannot be empty." )
},
{
type: 'button',
align:'horizontal',
id: 'referencebutton',
label:'Search',
title: 'My title',
onClick: function() {
var linkContent = { type : 'html', id : 'test', html : '<div>just a test</div>' };
// this = CKEDITOR.ui.dialog.button
var dialog = CKEDITOR.dialog.getCurrent();
//alert(dialog.getContentElement('new_reference','reference').getValue());
var definition = dialog.definition;
//alert(definition.title);
definition.getContents("new_reference").add(linkContent);
// CKEDITOR.dialog.addUIElement('list',function(){
// definition.getContents("new_reference").add(linkContent);
// });
alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
}
}
]
},
{
id: 'old_reference',
label:'Old Reference',
elements: [
{
id:'author',
type:'text',
label:'Author'
}
]
}
]
};
});
Inside onShow method I am printing the no. of UI elements inside a content of a dialog.It shows 3 objects. After click of a button,it shows 4 objects since one has been added via code but it does show in the UI?
Any clues on this?
Thanks

Your approach is OK but by calling
definition.getContents("new_reference").add(linkContent);
you're modifying CKEDITOR.dialog.definition, which is used only the first time the dialog is opened – to build it. Then, once built, if you close the dialog and open it again, the editor uses the same DOM to display it. What I mean is that CKEDITOR.dialog.definition is a blueprint, which is used once and has no further impact on the dialog.
To interact with live dialog, use the following
CKEDITOR.ui.dialog.uiElement-method-getDialog,
CKEDITOR.dialog-method-getContentElement (returns CKEDITOR.ui.dialog.uiElement),
CKEDITOR.dialog-method-getValueOf,
CKEDITOR.dialog-method-setValueOf
like
onClick: function() {
var dialog = this.getDialog();
// get the element
console.log( dialog.getContentElement( 'tabName', 'fieldId' ) );
// get the value
dialog.getValueOf( 'tabName', 'fieldId' ) );
// set the value
dialog.setValueOf( 'tabName', 'fieldId', 'value' ) );
}

One way to get around this problem is to use the onShow function and insert an html object in the dialog tab.
onShow : function() {
var element = document.createElement("div");
element.setAttribute('id', "someId");
document.getElementsByName("new_reference")[0].appendChild(element);
}
Then in the onClick function, just access the element and set the content you want, like this:
onClick : function() {
document.getElementById("someId").innerHTML='<div id="example-'+count+'">Hello World</div>';
}
By doing this, you should be able to get data to show in your dialog. Hope it helps.

tinyMCE plugin accessing element

I'm trying to write a tinymce plugin, so I checked out the tutorial "Creating a plugin" on http://www.tinymce.com/. Inserting and Replacing Content is no problem, everything works fine.
Now i want to change the value of the textbox automatically after changing the value of the listbox. As an example, after changing the listbox element, the value of the active element should be written to the textbox above. How can I access this element?
tinymce.PluginManager.add('myexample', function(editor, url) {
// Add a button that opens a window
editor.addButton('myexample',
{
text: 'Example',
onclick: function()
{
// Open window
editor.windowManager.open({
title: 'Example Plugin',
body: [
// Text
{type: 'textbox', name: 'title', label: 'Text', value: 'temp'},
// Listbox
{type: 'listbox', name: 'test', label: 'Ziel',
'values':
[
{text: 'Eins', value: '1'},
{text: 'Zwei', value: '2'}
],
onselect: function(v)
{
console.log(this.value());
// CHANGE THE VALUE OF THE TEXTBOX ...
// ????
}
}
],
onsubmit: function(e)
{
console.log(e.data.title, e.data.test);
}
});
}
});
});

I know this is an old question, but I was facing the same issue and I found this answer in another forum that saved my day.
The standard tinymce way to do this is to save the popup window in a variable:
var win = editor.windowManager.open({ //etc
And then for accessing the element:
win.find('#text'); // where text is the name specified
I hope this can help someone else in the future.

Now I found a solution. The best method is not to use the internal form-designer. You can use an IFrame with an external html-page, then you can work with document.getElementById(...)
Here you can find an example

Change default editor for node in AlloYUI Diagram Builder

I have to make a diagram editor, so I'm using AlloYUI, I've added a custom node following the answer for this question.
I've successfully set new nodes and retreive it's values via diagramBuilder.toJSON()
What I'm trying to do is change the default editor widget for the custom attribute of my custom node, I'd like to change the textbox for date picker widget, but my goal is being able to use any other form elements, like a select, or a set of radio buttons.
Toying around with the javascript debugger included in WebStorm, I've found that the default fields have an 'editor' attribute where is defined a "textAreaCellEditor".
But my custom property doesn't have this attribute, So I'm trying to attach an editor, but I cannot get it to work, I've tried with this:
Y.DiagramNodeCustom = Y.Component.create({
NAME: 'diagram-node',
ATTRS: {
type: {
value: 'custom'
},
custom_attr: {
value: 'customAttr'
}
},
EXTENDS: Y.DiagramNodeTask,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(
instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: Y.Component.create({
NAME: "DateField",
EXTENDS: Y.DateCellEditor
})
});
return model;
},
SERIALIZABLE_ATTRS: ['description', 'name', 'required', 'type',
'width', 'height', 'zIndex', 'xy', 'customAttr']
}
});
Y.DiagramBuilder.types['custom'] = Y.DiagramNodeCustom;
I've also tried to change the "model.push" section to:
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: {name: "textCellEditor"}
});
and to:
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: Y.DateCellEditor({
name: 'DateCellEditor'
})
});
But nothing works. Do you have any idea how can I change the default editor?

Thanks to Robert Frampton, who anwered my question in google groups, the way to do it is:
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: new Y.DateCellEditor()
});
You have to create a new instance of the Y.DateCellEditor object with adding 'new' before the constructor.