I am trying to figure out how to add the name for my dropdown value, which by default is empty. I would like to call it 'Show all' instead. It works with map filters, so it displays the values by function.
function buildDropDownList(title, listItems) {
const filtersDiv = document.getElementById("filters");
const mainDiv = document.createElement("div2");
const filterTitle = document.createElement("h3");
filterTitle.innerText = title;
filterTitle.classList.add("py12", "txt-bold");
mainDiv.appendChild(filterTitle);
const selectContainer = document.createElement("div2");
selectContainer.classList.add("select-container", "center");
const dropDown = document.createElement("select");
dropDown.classList.add("select", "filter-option");
const selectArrow = document.createElement("div2");
selectArrow.classList.add("select-arrow");
const firstOption = document.createElement("option");
dropDown.appendChild(firstOption);
selectContainer.appendChild(dropDown);
selectContainer.appendChild(selectArrow);
mainDiv.appendChild(selectContainer);
for (let i = 0; i < listItems.length; i++) {
const opt = listItems[i];
const el1 = document.createElement("option");
el1.textContent = opt;
el1.value = opt;
dropDown.appendChild(el1);
filtersDiv.appendChild(mainDiv);
}
That item is an option without a value. The best solution would be to avoid getting empty elements, but if that's not possible, you can do a small tweak, like:
for (let i = 0; i < listItems.length; i++) {
const opt = listItems[i];
const el1 = document.createElement("option");
el1.textContent = (opt && opt.trim()) ? opt : "Show all";
el1.value = opt;
dropDown.appendChild(el1);
}
And also, make sure that you properly close the curly brackets of your loop.
Related
I need to view the segments and handles of the path that defines a SymbolItem. It is a related issue to this one but in reverse (I want the behavior displayed on that jsfiddle).
As per the following example, I can view the bounding box of the SymbolItem, but I cannot select the path itself in order to view its segments/handles. What am I missing?
function onMouseDown(event) {
project.activeLayer.selected = false;
// Check whether there is something on that position already. If there isn't:
// Add a circle centered around the position of the mouse:
if (event.item === null) {
var circle = new Path.Circle(new Point(0, 0), 10);
circle.fillColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
var circleSymbol = new SymbolDefinition(circle);
multiply(circleSymbol, event.point);
}
// If there is an item at that position, select the item.
else {
event.item.selected = true;
}
}
function multiply(item, location) {
for (var i = 0; i < 10; i++) {
var next = item.place(location);
next.position.x = next.position.x + 20 * i;
}
}
Using SymbolDefinition/SymbolItem prevent you from changing properties of each symbol items.
The only thing you can do in this case is select all symbols which share a common definition.
To achieve what you want, you have to use Path directly.
Here is a sketch showing the solution.
function onMouseDown(event) {
project.activeLayer.selected = false;
if (event.item === null) {
var circle = new Path.Circle(new Point(0, 0), 10);
circle.fillColor = Color.random();
// just pass the circle instead of making a symbol definition
multiply(circle, event.point);
}
else {
event.item.selected = true;
}
}
function multiply(item, location) {
for (var i = 0; i < 10; i++) {
// use passed item for first iteration, then use a clone
var next = i === 0 ? item : item.clone();
next.position = location + [20 * i, 0];
}
}
I'm playing with Typescript and I wonder, how to properly instantiate and declare multidimensional array. Here's my code:
class Something {
private things: Thing[][];
constructor() {
things = [][]; ??? how instantiate object ???
for(var i: number = 0; i < 10; i++) {
this.things[i] = new Thing[]; ??? how instantiate 1st level ???
for(var j: number = 0; j< 10; j++) {
this.things[i][j] = new Thing(); ??? how instantiate 2nd lvl item ???
}
}
}
}
Can you give me any hint about selected places?
You only need [] to instantiate an array - this is true regardless of its type. The fact that the array is of an array type is immaterial.
The same thing applies at the first level in your loop. It is merely an array and [] is a new empty array - job done.
As for the second level, if Thing is a class then new Thing() will be just fine. Otherwise, depending on the type, you may need a factory function or other expression to create one.
class Something {
private things: Thing[][];
constructor() {
this.things = [];
for(var i: number = 0; i < 10; i++) {
this.things[i] = [];
for(var j: number = 0; j< 10; j++) {
this.things[i][j] = new Thing();
}
}
}
}
Here is an example of initializing a boolean[][]:
const n = 8; // or some dynamic value
const palindrome: boolean[][] = new Array(n)
.fill(false)
.map(() =>
new Array(n).fill(false)
);
If you want to do it typed:
class Something {
areas: Area[][];
constructor() {
this.areas = new Array<Array<Area>>();
for (let y = 0; y <= 100; y++) {
let row:Area[] = new Array<Area>();
for (let x = 0; x <=100; x++){
row.push(new Area(x, y));
}
this.areas.push(row);
}
}
}
You can do the following (which I find trivial, but its actually correct).
For anyone trying to find how to initialize a two-dimensional array in TypeScript (like myself).
Let's assume that you want to initialize a two-dimensional array, of any type. You can do the following
const myArray: any[][] = [];
And later, when you want to populate it, you can do the following:
myArray.push([<your value goes here>]);
A short example of the above can be the following:
const myArray: string[][] = [];
myArray.push(["value1", "value2"]);
Beware of the use of push method, if you don't use indexes, it won't work!
var main2dArray: Things[][] = []
main2dArray.push(someTmp1dArray)
main2dArray.push(someOtherTmp1dArray)
gives only a 1 line array!
use
main2dArray[0] = someTmp1dArray
main2dArray[1] = someOtherTmp1dArray
to get your 2d array working!!!
Other beware! foreach doesn't seem to work with 2d arrays!
I did change some features style (through check-boxes) using style property :
var features = layer.features;
for( var i = 0; i < features.length; i++ ) {
//features[i].style = { visibility: 'hidden' };
features[i].style = 'none';
}
layer.redraw();
Now if I check the box again, it supposed to display again but nothing happens!
I tried:
features[i].style = 'block';
OR
features[i].style = 'delete';
then redraw the layer.. but this doesn't work
Any Idea ?
Try this:
// set style
features[i].style = null;
// or
features[i].style = {display:'none'};
// redraw feature
layer.drawFeature(features[i]);
Title pretty much says it all... is there an easy way I can simulate the enter/return key being pressed?
EDIT:
I've got this much, but i'm not sure how to make it run in a loop:
var keyCode:uint = Keyboard.ENTER;
var e:KeyboardEvent = new KeyboardEvent(KeyboardEvent.KEY_DOWN, true, false, 0, keyCode);
I need it to run in the following loop:
for (var i:int = 0; i < changes.length; i++)
{
if (changes[i][0] == "directorsPrep")
{
directorsPrep[changes[i][1]].phaseFillers[changes[i][2]].fillDisplayName.setFocus();
// NEED IT TO RUN RIGHT HERE!
}
}
for (var i:int = 0; i < changes.length; i++)
{
if (changes[i][0] == "directorsPrep")
{
directorsPrep[changes[i][1]].phaseFillers[changes[i][2]].fillDisplayName.setFocus();
// NEED IT TO RUN RIGHT HERE!
// create the keyboard event; using your code
var keyCode:uint = Keyboard.ENTER;
var e:KeyboardEvent = new KeyboardEvent(KeyboardEvent.KEY_DOWN, true, false, 0, keyCode);
// dispatch it
componentThatYouWantToDispatchKeyBoardEvent.dispatchEvent(e);
}
}
The componentThatYouWantToDispatchKeyBoardEvent variable can be any component that extends EventDispatcher or implements IEventDispatcher.
I'm dynamically adding rows and they don't seem to go under the proper column. I have all of my headers in 'headerArray' and the data i need to add is in the string 'item'.
//create an item to work with
var chartItem:Object = new Object();
for( var j:int = 0; j < columnResult.length ; j++ )
{
var item:String = removeformat(removetd(columnResult[j]));
//grab the header (this is which column the value will be added
var head:String = headerArray[j];
//set the value to header (pair)
chartItem[head] = item;
}
//add the chartItem (row) to the main collection
arr.addItem(chartItem);
tableCollection = arr;
It's getting all the headers properly and setting the chartItem (from inspection with debugger). When it gets to a row (building from html) where there is an item that only has values for some of the columns, it doesn't add the information under the right column, it just goes from left to right and adds it in the next one.
The behaviour is kind of strange because the chartItem clearly has the right header value and corresponding item value in it, but like I said they don't end up under the right column.
tableCollection gets set as the dataprovider for the grid later (not modified since)
var chartItem:Object = new Object();
var span:int = 0;
for( var j:int = 0; j < columnResult.length ; j++ )
{
var colSpan:int = this.getColSpan(columnResult[j]);
var item:String = removeformat(removetd(columnResult[j]));
//grab the header (this is which column the value will be added
var head:String;
if (colSpan >1){
head = headerArray[j];
span = colSpan;
} else {
if (span == 0){
head = headerArray[j];
} else {
head = headerArray[j+span-1]
}
}
//set the value to header (pair)
chartItem[head] = item;
}
//add the chartItem (row) to the main collection
arr.addItem(chartItem);
If i read the span attribute for the row, i set the NEXT row to be at column+previous colspan. then all the rows line up properly.