Small Library on top of webcomponents.js for creating Reusable Custom Elements.
WTF? Again a new Framework for JavaScript ! :(
What? Custom Elements ?
So, Can I use this library with my existing Frameworks & CodeBase.
But, Wait, Google has Polymer for creating Reusable Custom Elements, has lots of features. Why not use that ?
So what are the features ?
Should I use it or not ?
What is the meaning of pitana ?
pitana.register
pitana.register({
tagName: "hello-world",
attachedCallback: function () {
//Do something
}
});
template
template as string
pitana.register({
tagName: "hello-world",
template: "<h1>This is the template string</h1>"
});
template as function
pitana.register({
tagName: "hello-world",
template: function(){
return "<h1>This is the template string</h1>"
}
});
or
pitana.register({
tagName: "hello-world",
template: document.querySelector("template#helloworldTemplate")
});
events
pitana.register({
tagName: "hello-world",
events: {
"click button#asd":"onClickButton"
},
template: "<p>Hello World, Click button to See more</p><button id='asd'>Click Me<button>",
onClickButton: function(){
window.alert("I wish you, Very Happy New Year");
}
});
accessors
<pt-stars id="mystars" count="5"></pt-stars>
pitana.register({
tagName: "pt-stars",
accessors: {
count: {
type: "int",
onChange: "render"
}
},
attachedCallback: function(){
this.render();
},
render: function(){
var str = "";
var count = this.$.count;
for(var i=0; i< count; i++){
str = str + "*";
}
this.$.innerHTML = str;
}
});
window.alert("The current value of Stars are" + document.getElementById("mystars").count )
Element pt-stars
send signal to other elements
pitana.register({
tagName: "pt-stars",
accessors: {
count: {
type: "int",
onChange: "render"
}
},
attachedCallback: function(){
this.render();
},
render: function(){
this.publishGlobalEvent("STARS_CHANGED", this.$.count);
var str = "";
var count = this.$.count;
for(var i=0; i< count; i++){
str = str + "*";
}
this.$.innerHTML = str;
}
});
pitana.register({
tagName: "pt-notifier",
globalEvents:{
"STARS_CHANGED":"onChangeStars"
},
template:"This is just a notifier element",
onChangeStars: function(val){
window.alert("We have noticed that value of stars changed to " + val);
}
});
Code available at - http://jsfiddle.net/nsisodiya/qr2obwyc/
<hello-world name="James" count="5"></hello-world>
<h1>Pitna Hello World Element Demo</h1>
<button onclick="document.getElementById('tag').count=3">Change Count to 3</button>
<hello-world id="tag" name="James" count="5"></hello-world>
pitana.register({
tagName: "hello-world",
accessors: {
name: {
type: "string"
},
count: {
type: "int",
onChange: "attachedCallback"
}
},
attachedCallback: function () {
var s = [];
for (var i = 0; i < this.$.count; i++) {
s.push("<p>Hello " + this.$.name + "</p>");
}
this.$.innerHTML = s.join("");
}
});
pt-progressbar
pt-pdfslideshow
pt-steps-indicator