I am creating a element in which parent element is having a button. On tap of this button the properties of child element are changing. Following is the code snippet-
<parent-element>
<template is="dom-repeat" items="{{aa}}">
<child-element id="aa{{index}}">
<button on-tap="_clickFunction">
</template>
_ClickFunction(){
for(var i = 0; i < items.length; i++){
this.shadowRoot.querySelector("aa" + i).prop1 = true;
this.shadowRoot.querySelector("aa" + i).prop2 = true;
}
}
</parent-element>
<child-element>
properties:{
prop1: Boolean,
prop2: Boolean,
}
</child-element>
How does it possible without using id or any dom-manipulation.
if there is dom-repeat, how to access properties of particular child element.
Try this:
_ClickFunction(e){
let childItemIndex = e.model.index;
var childItem = this.shadowRoot.getElementById(`aa${childItemIndex}`);
item.prop1 = !!1;
item.prop2 = !!1;
}
Related
How can I make the navtitle curve along the path of the slice and wrap the text if it's long.
Image of the wheel above
In long text, use '\n' in the title for wrap.
wheel.createWheel(["Long\ntext"]);
Currently, the navtitle curve along the path is an RC feature, so please use the source code instead of the last release.
You can find the new properties in this CodePen: https://codepen.io/softwaretailoring/pen/RQYzWm
var piemenu = new wheelnav("wheelDiv");
// New properties in wheelnav.js v1.8.0
piemenu.titleCurved = true;
piemenu.titleCurvedClockwise = false;
piemenu.titleCurvedByRotateAngle = false;
Unfortunately, the two above properties don't work together. :(
UPDATE: There is a way to achieve your needs. You can use two wheels on each other.
var piemenu = new wheelnav("wheelDiv");
setMenu(piemenu); // Set common properties
piemenu.titleRadiusPercent = 0.65; // Positioning first title
piemenu.markerEnable = true;
piemenu.slicePathFunction = slicePath().DonutSlice;
piemenu.sliceClickablePathFunction = slicePath().DonutSlice;
piemenu.titleHoverAttr = { fill: "#333" };
piemenu.createWheel(["Hello", "world!", "-------"]);
var piemenu2 = new wheelnav("wheelDiv2", piemenu.raphael);
setMenu(piemenu2); // Set common properties
piemenu2.wheelRadius = 520; // Positioning second title
piemenu2.slicePathFunction = slicePath().NullSlice; // There is no slice, only title
piemenu2.createWheel(["Bello", "space!", "*******"]);
// Link navigateFunctions to each other
for (var i = 0; i < piemenu.navItems.length; i++) {
piemenu.navItems[i].navigateFunction = function () {
piemenu2.navigateWheel(Math.abs(this.itemIndex));
}
}
for (var i = 0; i < piemenu2.navItems.length; i++) {
piemenu2.navItems[i].navigateFunction = function () {
piemenu.navigateWheel(Math.abs(this.itemIndex));
}
}
Here is a new CodePen for wrapped and curved text: https://codepen.io/softwaretailoring/pen/eLNBYz
Following on from this issue: Strange issue with Vue2 child component object v-for list render
I have a function which loops through an array products, which takes certain values and adds them to an object called attributes. I need to use this.$set to update my attributes object to make sure that Vue can detect the update.
My functions look like this:
//// checks if the value exists in the object to avoid adding duplicates
doesItExist: function(key, value) {
for (let i = 0; i < this.attributes[key].length; i++) {
if (this.attributes[key][i] == value) return true;
}
return false;
},
//// if the value does not exist, then add it to the object
pushIfNotExists: function(key, value) {
if (!this.doesItExist(key, value)) { // returns true/false
this.$set(this.attributes[key], key, this.attributes[key].push(value));
}
},
//// main function looping through the original products array to extract attributes
createAttributes: function() {
for (let i = 0; i < this.products.length; i++) {
for (let j = 0; j < this.products[i]['attributes_list'].length; j++) {
let attributeName = this.products[i]['attributes_list'][j]['attribute_name'];
if (!this.attributes[attributeName]) {
this.attributes[attributeName] = new Array();
};
this.pushIfNotExists(attributeName, this.products[i]['attributes_list'][j]['value']);
}
}
console.log(this.attributes); // outputs expected object
},
The problem I have is that in my child component, the attribute data is still not being rendered, which means this must not be working correctly (even though my console log shows the data is there).
Any ideas?
Thanks
I'm trying to modify the below script so that it will automatically drop the first instance of "_item" and snap it to the nearest "slot"
The code works great except I cannot find a way to make it drop the item without the user clicking on it first. This is not my script. You can see it in action here- http://www.freeactionscript.com/2008/11/drag-drop-snap-inventory-system-v2/
Any help greatly appreciated, thanks!
/**
* Drag, Drop and Snap Inventory System
*
* Version: 2.0
* Author: Philip Radvan
* URL: http://www.freeactionscript.com
*/
var slots_array:Array = new Array(slot0, slot1, slot2, slot3, slot4, slot5, slot6, slot7, slot8, slot9, slot10, slot11, slot12, slot13, slot14, slot15);
var items_array:Array;
var uniqueItemId:Number = 0;
//
//start dragging
function dragItem(_item:Object):Void
{
//save position before dragging
_item.nowX = _item._x;
_item.nowY = _item._y;
//drag
_item.startDrag(true);
_item.onMouseMove = updateDrag;
}
//stop dragging
function dropItem(_item:Object):Void
{
//stop dragging
_item.stopDrag();
//delete mouse event
delete _item.onMouseMove;
//run loop on slots array
for (i=0; i<slots_array.length; i++)
{
//set temp slot var
currentSlot = eval(slots_array[i]);
//check slot hittest and slot itemID; if item is over slot and slot is empty, drop
if ((eval(_item._droptarget) == currentSlot) && (currentSlot.itemID == "empty"))
{
//place item in slot
_item._x = currentSlot._x;
_item._y = currentSlot._y;
//update current slot itemID
currentSlot.itemID = this;
//update previous slot itemID
temp = eval(_item.slotID);
temp.itemID = "empty";
//update current item slotID
_item.slotID = currentSlot.myName;
//item moved, end loop
return;
}
else
{
//return item to previous position if: item is NOT over slot or slot is NOT empty
_item._x = _item.nowX;
_item._y = _item.nowY;
}
}
}
/*
* updateAfterEven re-renders the screen
*/
function updateDrag():Void
{
updateAfterEvent();
}
/*
* Create Slots
*/
for (i=0; i<slots_array.length; i++)
{
var _currentSlot = slots_array[i];
_currentSlot.itemID = "empty";
_currentSlot.num = i;
_currentSlot.myName = "slot"+i;
}
/*
* Create Item
*/
function createInventoryItem()
{
//attach item to stage
var _item = attachMovie("item", "item"+uniqueItemId, _root.getNextHighestDepth());
//set item position
_item._x = 280;
_item._y = 320;
//set item settings
_item.myName = "item"+uniqueItemId;
_item.slotID = "empty";
//make item a button
_item.onPress = function()
{
dragItem(this)
}
_item.onRelease = _item.onReleaseOutside = function()
{
dropItem(this);
}
//add item to array
items_array.push(_item);
//update unique Item Id
uniqueItemId++;
}
//button to create a new inventory item
create_item_btn.onRelease = function()
{
createInventoryItem();
}
Fixed it. Rather than modifying this one I wrote my own. Thanks everyone : )
By placing the hit test code on the movie clip "_item" itself, a small array loop sorts it's position on clip event load, and snaps it to the slot. Super easy.
I am trying to parse the information inside the div class="base shortstory:
<div id="dle-content">
<div class="base shortstory">
<h3 class="btl">HTC Jetstream</h3>
</div>
<div class="base shortstory">
<h3 class="btl">Samsung S4</h3>
</div>
<div class="base shortstory">
<h3 class="btl">Dell Streak</h3>
</div>
</div>
Here is the code
const string url = "http://someurl.com/catalogue";
const string rootUrl = "http://someurl.com";
HtmlWeb hw = new HtmlWeb();
HtmlDocument doc = hw.Load(url);
int dealsCount = 0;
HtmlNode root = doc.DocumentNode.SelectSingleNode("//div[#id='dle-content']");
int i = 1;
//this is for the default page
while (i<=10)
{
try
{
string node= String.Format("//div[{0}]", i);
var link =
doc.DocumentNode.SelectSingleNode(node);
var href = link.SelectSingleNode("//div[#class='mlink']//span[#class='argmore']//a[#href]").Attributes["href"].Value;
string title = link.SelectSingleNode("//h3[#class='btl']//a[#href]").InnerText.Trim();
string description = link.SelectSingleNode("//div[#class='maincont']//div[1]").InnerText.Replace("\n", " ").Replace("\r", "").Replace("\t", "").Trim();
description = RemoveHTMLComments(description);
var imageURL = link.SelectSingleNode("//div[#class='maincont']//div[1]//a//img").Attributes["src"].Value;
var price = link.SelectSingleNode("//div[#class='mlink']//span[3]//font").InnerText.Trim();
price = Regex.Match(price, #"\d+").Value;
var partnerdealID = href;
//no information
var isActivesStr = link.SelectSingleNode("//div[#class='mlink']//span[2]/font").InnerText.Trim();
bool isActive;
if (isActivesStr.Contains("Нет в наличии"))
{
isActive = false;
}
else
{
isActive = true;
}
var dealUrl = href; //requires login - show the page itself
}
catch (Exception)
{
}
i += 1;
}
But after looping still the selected node is first one. What am I doing wrong?
All your XPATH expressions start with '//' which means "start from root of the document and search recursively". So when you do this:
link.SelectSingleNode("//div[#class='mlink']//span[#class='argmore']//a[#href]")
You will start not from link, but from the document's root. You probably want to do this instead:
link.SelectSingleNode("div[#class='mlink']...etc...")
which is equivalent to
link.SelectSingleNode("./div[#class='mlink']...etc...")
'.' means the current node. '/' means search only the direct children, not recursively.
I want to disable one specific row in datagrid in following manner:
1) Highlight one row with a different color
2) Disable checkbox/radio button selection of that row
3) Disable inline editing of cells present in that row but allow inline editing for other rows.
Pls. help if you have any ideas.
You can use a combination of the following functions to extract stuff
// as example, one of youre items uses identifier:'id' and 'id:10'
var identifier = '10';
var item = store._arrayOfTopLevelItems[10]; // you probably have this allready
var index = grid.getItemIndex(item); // find which index it has in grid
var rowNode = grid.getRowNode(index); // find a DOM element at that index
You will have the <div> as rowNode, it contains a table with cells (as many as you got columns). Set its background-color
The checkbox thing, you will prly know which cell-index it has
var cellNode = dojo.query('td[idx='+cellIndex+']', rowNode)[0];
// with cellType Bool, td contains an input
var checkbox = cellNode.firstChild;
Editing is another store really.. works in focus handlers. To override it, you must keep like an array of rows which you dont want editable (allthough the cell.editable == true).
function inarray(arr, testVal) {
return dojo.some(arr, function(val) { return val == testVal }).length > 0
}
grid.setNonEditable = function (rowIndex) {
if(! inarray(this.nonEditable,rowIndex) )
this.nonEditable.push(rowIndex);
}
grid.setEditable = function (rowIndex) {
this.nonEditable = dojo.filter(this.nonEditable, function(val) { return val != rowIndex; });
}
var originalApply = grid.onApplyEdit
grid.onApplyEdit = function(inValue, inRowIndex) {
if(! inarray(this.nonEditable,inRowIndex) )
originalApply.apply(this, arguments);
}
If you are using dojox.grid.DataGrid you can use canEdit function to disable row editing or cell editing :
grid = new dojox.grid.DataGrid({
canEdit: function(inCell, inRowIndex) {
var item = this.getItem(inRowIndex);
var value = this.store.getValue(item, "name");
return value == null; // allow edit if value is null
}
}