Really simple question but I can't find an answer. I know how to do this in regular javascript and I know how to do this in jquery. Right now if I have this:
var states = [{"name":"alaska","id":1},{"name":"alabama","id":2];
Is there an YUI based method to push that into a select box, to set the selected item, to get the selected item back? If so, where's the online example? If not I'll just use javascript.
Yes, there is. You can do something like this:
var buttonMenu = [
{ text: "Alaska", value: 1, onclick: { fn: onStateClick } },
{ text: "Alabama", value: 2, onclick: { fn: onStateClick } },
...];
.. and then use this in a YUI menu button configuration:
var statesButton = new YAHOO.widget.Button({ type: "menu", label: "Alabama", name: "mymenubutton", menu: buttonMenu, container: containerElement });
More details on the YUI button example page.
Hope that helps.
Related
Please note this is a self-answered question.
The Quill Editor's toolbar module doesn't appear to offer a way to add custom tools to it using the JavaScript API. You can merely choose from a list of predefined tools or you have to completely rewrite the entire HTML of the toolbar which seems very hacky and often is not an option. Because of that mechanism, tools can't just be added or removed during runtime and are always static, meaning that (for example) you can't have a dynamic drop down list that loads or changes it's entries during runtime.
The Quill Editor itself only offers an API to add another module. So you could write another toolbar module that supports the above mentioned features the original one is lacking, but it would be much nicer to be able to continue using the original one because of the amount of work that would be required to effectively rewrite it.
The question is: How to add a potentially dynamic tool like a drop down menu to an existing Quill Editor instance's toolbar.
I wrote a library called DynamicQuillTools which can do the job.
It can be used like this:
const dropDownItems = {
'Mike Smith': 'mike.smith#gmail.com',
'Jonathan Dyke': 'jonathan.dyke#yahoo.com',
'Max Anderson': 'max.anderson#gmail.com'
}
const myDropDown = new QuillToolbarDropDown({
label: "Email Addresses",
rememberSelection: false
})
myDropDown.setItems(dropDownItems)
myDropDown.onSelect = function(label, value, quill) {
// Do whatever you want with the new dropdown selection here
// For example, insert the value of the dropdown selection:
const { index, length } = quill.selection.savedRange
quill.deleteText(index, length)
quill.insertText(index, value)
quill.setSelection(index + value.length)
}
myDropDown.attach(quill)
Here is a full demo adding a custom drop down tool and a custom button to a Quill Editor instance:
// Create a Quill Editor instance with some built-in toolbar tools
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
]
}
}
})
// Add a custom DropDown Menu to the Quill Editor's toolbar:
const dropDownItems = {
'Mike Smith': 'mike.smith#gmail.com',
'Jonathan Dyke': 'jonathan.dyke#yahoo.com',
'Max Anderson': 'max.anderson#gmail.com'
}
const myDropDown = new QuillToolbarDropDown({
label: "Email Addresses",
rememberSelection: false
})
myDropDown.setItems(dropDownItems)
myDropDown.onSelect = function(label, value, quill) {
// Do whatever you want with the new dropdown selection here
// For example, insert the value of the dropdown selection:
const { index, length } = quill.selection.savedRange
quill.deleteText(index, length)
quill.insertText(index, value)
quill.setSelection(index + value.length)
}
myDropDown.attach(quill)
// Add a custom Button to the Quill Editor's toolbar:
const myButton = new QuillToolbarButton({
icon: `<svg viewBox="0 0 18 18"> <path class="ql-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3"></path></svg>`
})
myButton.onClick = function(quill) {
// Do whatever you want here. You could use this.getValue() or this.setValue() if you wanted.
// For example, get the selected text and convert it to uppercase:
const { index, length } = quill.selection.savedRange
const selectedText = quill.getText(index, length)
const newText = selectedText.toUpperCase()
quill.deleteText(index, length)
quill.insertText(index, newText)
quill.setSelection(index, newText.length)
}
myButton.attach(quill)
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.bubble.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.snow.css"></link>
<script src="https://cdn.jsdelivr.net/gh/T-vK/DynamicQuillTools#master/DynamicQuillTools.js"></script>
<div id="editor">The last two elements in the toolbar are our custom tools. The first one (<b>Email Addresses</b>) is a simple drop down menu that inserts the email address of the person selected and the second one (<b>U</b>) is a simple button that makes the selected text uppercase.</div>
I know this is old but I just came across this on accident (https://quilljs.com/docs/modules/toolbar/). The solution is to add the class "ql-size" to the select as shown in the container section.
I am building an organisation chart using Kendo UI's diagramming component
I do not want the user to be able to edit the diagram as it is a read-only representation of positions they have entered previously, however I do want to display the diagram in a particular way.
The layout type I am using is tree with subtype of down. I am using the HeirarchicalDataSource as the dataSource
The default way the diagram is drawn looks like this:
However, my boss needs it to look like this:
So the parent nodes have all child nodes coming from the bottom connector.
I see no way to programmatically influence this. Please help.
Switching editing off is easy, just pass to your options editable: false. To have the layout similar to what you posted, play with two variables: horizontalSeparation, verticalSeparation under layout
http://dojo.telerik.com/uNOVa/2
function createDiagram() {
$("#diagram").kendoDiagram({
editable: false,
dataSource: {
data: diagramNodes(),
schema: {
model: {
children: "items"
}
}
},
layout: {
type: "tree",
subtype: "down",
horizontalSeparation: 60,
verticalSeparation: 40
},
shapeDefaults: {
width: 40,
height: 40
}
});
}
function diagramNodes() {
var root = { name: "0", items: [] };
addNodes(root, [3, 2, 2]);
return [root];
}
function addNodes(root, levels) {
if (levels.length > 0) {
for (var i = 0; i < levels[0]; i++) {
var node = { name: "0", items: [] };
root.items.push(node);
addNodes(node, levels.slice(1));
}
}
}
$(document).ready(function() {
$("#subtype").change(function() {
$("#diagram").getKendoDiagram().layout({
subtype: $(this).val(),
type: "tree",
horizontalSeparation: 30,
verticalSeparation: 20
});
});
});
$(document).ready(createDiagram);
$(document).bind("kendo:skinChange", createDiagram);
There is another type of rendering connections with:
connectionDefaults: {
type: "polyline"
}
You can check it out here: http://dojo.telerik.com/uNOVa/3
You can also fix your connections with an array:
connections
An example is here:
example
I'am using the jQuery Gantt api, and I want to access to certain elements, but I don't know how.
$(function() {
"use strict";
//var obj = JSON.parse($(".gantt").gantt);
$(".gantt").gantt({
source: [{
name: "Sprint 0",
desc: "Analysis",
values: [{
from: "/Date(1320192000000)/",
to: "/Date(1322401600000)/",
label: "Requirement Gathering",
customClass: "ganttRed"
}]
}],
navigate: "scroll",
scale: "weeks",
maxScale: "months",
minScale: "days",
itemsPerPage: 10,
onItemClick: function(data) {
alert("Item clicked - show some details");
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
//alert("OK");
//var parsedData = JSON.parse();
//alert($(".gantt").gantt.source);
$(".gantt").popover({
selector: ".bar",
title: "I'm a popover",
content: "And I'm the content of said popover.",
trigger: "hover"
});
prettyPrint();
});
I found this ape with static example, but am trying to draw my own chart by changing content of element source.
so can some tell me how can i get the element source from the gantt object.
Do you expecting this?
To access gantt elements through object try like this.
var ganttObj = $(".gantt").data("gantt");
Or try to create instance for your gantt like this.
var ganttObj = $(".gantt").gantt("instance");
ganttObj.model.maxScale = "years" //To change `maxScale` property values dynamically
Or you can also directly access your elements like this.
For eg: To change maxScale value from months to years, you can use like below.
$(".gantt").gantt({ maxScale: "years" });
Please let me know if this helps you.
Based on your example, you could simply move the source data into a variable so you can reference it later:
var ganttSource = [{
name: "Sprint 0",
desc: "Analysis",
values: [{
from: "/Date(1320192000000)/",
to: "/Date(1322401600000)/",
label: "Requirement Gathering",
customClass: "ganttRed"
}]
}];
$(".gantt").gantt({
source: ganttSource,
...
});
console.log(ganttSource);
According to the Alloy UI API, the FooterView class has a method called refreshFooter() which
Refreshes the summary items in the footer view and populates the footer elements based on the current "data" contents.
I am trying to figure out how to call this function after a certain event, not sure how to make the call since the footerView is defined as an attribute. Here is my Datatable:
var dataTable = new Y.DataTable({
columns: columns,
height: '95%',
footerView: Y.FooterView,
footerConfig: {
fixed: true,
heading: {
colspan: 5,
content: "Number of Records : {row_count}"
}
}
});
I've tried placing the footerView into a variable and invoking but, but no luck. Any ideas on how to execute this function?
Source: http://stlsmiths.github.io/new-gallery/classes/Y.FooterView.html#method_refreshFooter
Basically tables require two kinds of information, table columns and data. Pass both into your Data Table after columns and data, and don't forget to render it! . I think you are not rendering it. Try it ! GoodLuck!
YUI().use(
'aui-datatable',
function(Y) {
var columns = [
name,
age
];
var data = [
{
name: 'Bob',
age: '28'
},
{
name: 'Joe',
age: '72'
},
{
name: 'Sarah',
age: '35'
}
];
new Y.DataTable(
{
columns: columns,
data: data
}
).render("#myDataTable");
}
);
#myDataTable is the div that you want to render.
I would like to add a url to each of my data points inside my series that when clicked user is redirected to that page. For example jsfiddle .
series:[{data: [ [123.12,'http://xyz.com'],[332.32,'http://zzs.com'] ] }]
I was able to get the points to be clickable, but how I actually get them to find the point I am clicking on and which url to use I can't figure out. I can obviously hack it by using an alternative array that stores the links... but I would like to use chart as it's meant.
Now that it has been solved for future reference to be able to add links to your points here is the code:
http://jsfiddle.net/awasM/2/
Here's one way to do this (fiddle here):
series: [{
name: 'Batch',
URLs: ['www.google.com', null, null, 'www.yahoo.com', null, null, 'www.cnn.com', null, null, 'www.minecraft.net'], // pass in array of URLs
data: [4375.48, 113599.39, 1278, 83950.12, 6579.65, 94582, 1285.65, 48700.39, 500, 62917.27],
color:'#b8ecce',
point: {
events: {
click: function() {
var someURL = this.series.userOptions.URLs[this.x]; // onclick get the x index and use it to find the URL
if (someURL)
window.open('http://'+someURL);
}
}
}
}],
You can use structure:
data:[{
y:10,
ownURL:'http://www.google.com'
},{
y:11,
ownURL:'http://www.google2.com'
},{
y:5,
ownURL:'http://www.google3.com'
}]
and then you have ability to "get" this value by
this.point.options.ownURL