How to attach a DOM object to a div (propertyeditor) - javascript

I am building a small property editor in Javascript. I have a list of objects with some properties (x, y, width, height) for drawing a "<div>" inside a div. Im making so that the user can drag images/divs around.
All these objecs are in a list and then I traverse the list and render the view. Next to the view I have a small editor with the properties. I can add multiple of these elements to the editor/viewer and of different kinds (text and images, and maybe other stuff in the future).
My question is this:
How do I make it so that when editing a property (like the X-coordinate) for the "first/top" box, it updates ONLY the corresponding object in the list (NOT in the view, the view is just being rendered from the list of objects). I'm adding all these in runtime and I have no round-trip to server. I'm cool with having a save button on each item.

You could follow some naming patterns when creating elements and creating property editors. Example, when new image element button is clicked, create image element with id : el_img_01 and property editor for corresponding image element as id : el_img_prop_01.
so for all images will have (el_img_, el_img_prop_), in order to know the img element for a property editor, we can read the property editor id, and remove the 'prop' text from the id to get the associated DOM element.

Several steps here:
You need a way to identify the elements, for instance, one
id.
You have to be able to select one element and be aware of
it. You can put a select containing all the ids, for example.
Now you can select the element, you just need to load/save
the values from your form.

Related

Custom Web Elements / Lit Elements - Render child elements only when a parent element is present and way to transfer data among all child elements?

New to Stack Overflow and Lit.
I'm building something using Lit and wanted to know how do I render element/s only if a parent element is present. I am trying to add a login element dependency which will let user to use these elements only if the login element is present.
Example of what should be allowed.
<login-element>
<child-element-button> </child-element-button>
</login-element>
Example of what should not be allowed.
<child-element-button> </child-element-button>
Another problem that I have is a way for the child elements to share data, it can be to and from sibling elements, children elements, grandchildren element and so on. I do not have a solution for data sharing currently and would like to know the possible ways to achieve this.
Is there a way to achieve all of this without making <login-element> the parent element? something like this?
<login-element> </login-element>
<div> ... </div>
<my-custom-button> </my-custom-button>
<p> ... </p>
<my-colors> </my-colors>
<my-custom-footer> </my-custom-footer>
In short, I need users to be able to use custom elements only if <login-element> if present anywhere in the document and the custom elements that are present should be able to communicate between each other. For instance, a <my-colors> element should be able to send active color data to <display-image> element which will render an image with a specific background color received from `.
Currently, I read the child elements of <login-element>, copy the nodes, run loop, delete original nodes and append with those copied nodes. Additionally, in every child elements, I check if <login-element> is present in DOM or not, if present, render, else render a error element. As for passing and receiving data to and from other components, I have not tried anything.
Than you for your time.

How to attach file objects to html elements?

A user can browse multiple img files with an <input type="file"> element. The selected file objects are than stored temporarily in an array and the attributes are shown to the user in a table build from div's and other elements.
This way the user can browse and select files multiple times and add them to the table or even delete some of them again before he finally upload the collection to the server.
While it is not a problem to append objects to an array and appending rows to a table so they match 1:1. It's getting tricky to delete rows from a table and elements of the array and keeping them matched.
So my question is if there is a nicer way to add/bind file objects to html elements, so when elements are deleted binded file objects are deleted as well ?
BTW I'm using pure JS.
I answer my question myself:
The easiest way to bind objects to a html element is described here by Osacr Paz. I tested it and it solves my problem.
Here is the answer copied from the link :
The easiest way is to do this:
<div id="myDiv">...</div>
In javascript
var myDiv = document.getElmentById('myDiv');
myDiv._variable = variable;
You can recover this later if you want, simply using the same myDiv variable, or, again, with document.getElementById() or any other DOM method that returns the element.
var variable = myDiv._variable;
The downside of doing it this way is that you can't specify, in the server, or from the markup, which object you want to attach to the element.

Generating a JavaScript array using elements

How do I manipulate a JavaScript array based on what elements I have in a container, and what order they are in?
See: http://www.mobafire.com/league-of-legends/item-purchase-planner
Clicking an item will move it into the "Item Sandbox", which generates or manipulates the "item" array (seen in the URL/permalink). Re-sorting any of the items inside the sandbox (debugging) reveals that the array is generated from the elements inside that container.
Edit: I guess I should explain my intentions? I'm currently working on a similar system, but was using array IDs on elements to manipulate the array. However, when I removed an element (and its value in the array) the other array IDs would no longer be accurate, and produce undesirable results. The array may contain duplicates, so I cannot use the values themselves.
Another option you have is to create an empty div for the sandbox, and every time you add an item to the sandbox, you create a new element and append to that empty div. Hence, make it visible and then you can generate an array from the children elements found the that sandbox div. In the meanwhile, you can decide whether or not to make invisible on the right div (source of the children elements)
As for the order of display, it depends on whether you are prepending or appending children elements. To be honest, I would suggest you to review some basic JavaScript and rephrase your questions
Angela
The items in the list are shown and hidden by their classes.
Click on the Magic Resist button, and this is essentially what happens:
$(".tier-wrapper").not(".magic-resist").hide();

How to access dynamic controls having same properties in the Javascript

I am having a aspx page,in which there is a Select box control
<select name="selViewPerPage" id="selViewPerPage" style="width:30px">
In order to bring a particular style in all browsers, i am replacing this html control with dynamic select box using "selectBox.js" . Now the problem is , i am having two dropdowns in the page ,during runtime they are generated with same class name without any ids.So while trying to position the controls using css,the both drop downs takes the same position.
So i am not sure ,how to handle this situation .Please let me know,if you need more information.
Thnks
Try using a pseudo-selector to get just a specific item, such as the first, last, or nth item. See :eq() or :first() or :last() for example: http://api.jquery.com/category/selectors/. Using one of those sorts of selectors, you can get just the element you want to modify and apply styles to it individually. Ex.
$('ul').first()
or
$('ul:last')
or
$('ul').eq(1)
Or some other variant of these.
If you have multiple instances of items with the same class, use the .eq() selector.
$('.someSelect').eq(0) <-- first instance
$('.someSelect').eq(1) <-- second instance

How to count the number of listitems in an asp.bulletedlist with JavaScript

I have an asp:bulletedlist control, which sits inside a div tag, and I need to count the number of list items inside the control. Searching the internet, and noting the fact the html given back by the items is a list i.e. <li>, I thought I could use an example of:
var listcontrol = document.getElementById('BulletedList1');
var countItems = listcontrol.getElementByTagName('li').length;
However, when I do this, it throws and error saying that no object exists for this control.
So, my problem is, and because I must do this clientside because I want to use this to set the height of the div tag, is how do you count the number of items inside a asp:bulletedlist control with javascript?
You can't use document.getElementById like you are using it because the actual ID for an Asp.Net control when rendered is different than what you set for the ID on the control. View the source of your page and you will see what the actual ID is. You can then use that if you want and this code should work, but it would break if you ever moved the bulletedlist control, since the hierarchy would change.
Another way to do this would be to use jQuery. In your example, you could do this:
$('[id$=BulletedList1]').children('li').size()
This would select the element that ends with 'BulletedList1', gets the li children, and then returns the size of the collection.

Categories