dynamic html generation in polymer - polymer

Question

I am trying to generate a div dynamically based on the properties in a fabric.canvas.object.
The following is excerpts from my code.
class Polymer2FabricEdit extends Polymer.Element {
static get is() { return 'polymer-2-fabric-edit' }
static get config() {
return {
properties: {
canvas: {
type: Object,
value: null
},
ctx: {
type: Object,
value: null
},
canvasWidth: {
type: Number,
value: 300
},
canvasHeight: {
type: Number,
value: 300
},
topProperty: {
type: Number,
value: 0,
notify: true
},
observers: [
]
}
}
constructor() {
super();
console.log('created');
}
connectedCallback() {
super.connectedCallback();
console.log('attached');
}
ready() {
super.ready();
this.canvas = new fabric.Canvas(this.$.c, {isDrawingMode: false});
console.log(this.canvas);
this.ctx = this.canvas.getContext('2d');
this.addEventListener('click', (e)=>this.handleClick(e));
this.addEventListener('change', (e)=>this.handleChange(e));
this.$.dropTargetDiv.addEventListener("dragover", (e)=>this.preventEventDefault(e));
this.$.dropTargetDiv.addEventListener("drop", (e)=>this.loadObject(e));
this.$.imageLoader.addEventListener("change", (e)=>this.readURL(e));
this.$.backgroundImageLoader.addEventListener("change", (e)=>this.readBackgroundURL(e));
this.$.textureImageLoader.addEventListener("change", (e)=>this.readTextureURL(e));
console.log('ready');
}
generateEditView(obj) {
console.log("generateEditView");
console.log(obj);
var html = "<br/><br/><b>Edit Properties</b><br/><br/>";
for(var key in obj) {
if(key === "stateProperties") {
console.log(key, obj[key]);
var o = obj[key];
for(var k in o) {
console.log(o[k], obj[o[k]]);
switch(o[k]) {
case 'top':
console.log("setting top from:", this.topProperty);
this.topProperty = obj[o[k]];
html += '<input type="number" value="{{topProperty}}" min="0" max="150" id="topProperty">';
html += '<input type="range" value="{{topProperty}}" min="0" max="150" id="topPropertyRange">';
html += '<br/>';
console.log("set to: " + this.topProperty);
break;
case ‘…’:
break;
default;
}
console.log("adding: " + html);
this.$.editView.innerHTML = html;
}
handleClick(e) {
console.log("hamdleClick: " + e.type);
console.log("click: " + e.currentTarget.tagName);
console.log(e);
var id = e.path[0].id;
console.log("id: " + id);
switch(id) {
case '':
console.log("No ID - This is mostlike a selet of an object");
var target = e.target;
var obj = this.canvas.getActiveObject();
console.log("target:" + target);
console.log("selected Object:" + obj);
console.log("selected Menu: " + this.selectedMenu);
if(this.selectedMenu === "control") {
this.generateEditView(this.canvas.getActiveObject());
}
break;
break;
case 'topProperty':
console.log("Change TopProperty", this.$.topProperty);
this.topProperty = this.$.topProperty;
break;
default:
}
}
This does not work I get the following runtime error
polymer-2-edit.html:1979 The specified value "{{topProperty}}" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
It appears the generated code does not pick up the binding.
If I change the code to the following the div is displayed properly.
html += '';
html += ''
But then I get undefined when reading this,$.topProperty or this.$.topPropertyRange
I have also tried adding onchange=changeProperty(this) on the latter two and I get changeProperty is undefined message in the debugger.
I suspect its expecting the function to be outside of polymer but I need it inside polymer to set the objects properties.
Is there an example of adding dynamic input fields and processing changes that are made?

Answer 1

I still have not been successful in getting dynamic html generated code to work.
I tried rewriting the code using dom:if and it did not work the way I wanted it to.
That said I have accomplished my goal by writing static code and using css to hide unneeded selections and show the sections I need.
I added this css class
.hide {
display: none;
visibility: hidden;
}
Then I created a div for each element and appended “Edit” to the property name for the div id
<div id="topEdit">
<label for="top">Top:</label>
<input type="number" value="{{top::input}}" min="0" max="150" id="top">
<input type="range" value="{{top::input}}" min="0" max="150" id="topRange">
<br/>
</div>
<div id="leftEdit">
<label for="left">Left:</label>
<input type="number" value="{{left::input}}" min="0" max="150" id="left" onchange="{{Change}}">
<input type="range" value="{{left::input}}" min="0" max="150" id="leftRange">
<br/>
</div>
<div id="widthEdit">
<label for="width">Width:</label>
<input type="number" value="{{width::input}}" min="0" max="150" id="width">
<input type="range" value="{{width::input}}" min="0" max="150" id="widtnRange">
<br/>
</div>
I use this function to hide all the elements with an id “Edit”
clearView() {
// hide the Edit Elements
var elements = this.$;
for(var key in elements) {
var element = elements[key];
var elementId = element.id;
if(!!elementId.match(/.*Edit$/)) {
element.classList.add('hide');
}
}
}
The original code then looped thorough the active object and removed the css hide class from the appreciate elements. This approach was modified since some of the html elements chosen did not directly correspond to the objects element, and I decided I did not want to provide fields for every property.
The modified code is based on the selected object type I utilize an array of fields
When the user clicks on an object I execute code similar to the following example.
This example is for text or iText objects.
var fields = [
"fontWeight", // normal, bold
"fontStyle", // normal, italic, oblique, ''
"textDecoration", // underline, linethrough, overline
"fontFamily",
"textAlign",
"stroke",
"backgroundColor",
"textBackgroundColor",
"strokeWidth",
"fontSize",
"lineHeight",
"charSpacing",
"shadow", // shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY
"shadowColor",
"shadowBlur",
"shadowOffsetX",
"shadowOffsetY",
"text",
"addText"
];
The following code removes the css hide class and displays the appropriate elements.
for(var key in fields) {
var id = fields[key] + "Edit";
var element = this.$[id];
if(element) {
element.classList.remove('hide');
}
}
This approach works well for me and provides full two way binding for the selected elements.