inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Minor web component improvements

Browse Source
This commit is contained in:
Denys Vuika
2016-04-14 12:33:05 +01:00
parent 9275c31b26
commit d470f698ef
2 changed files with 27 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
demo-shell-ng2/app/components/page2.view.ts
View File

@@ -7,7 +7,8 @@ import {Component} from "angular2/core";
<h1>Page 2</h1> <h1>Page 2</h1>
<input [(ngModel)]="username"> <input [(ngModel)]="username">
<span>Username: {{username}}</span> <span>Username: {{username}}</span>
<hello-world [attr.who]="username"></hello-world> <hello-world [text]="username"></hello-world>
<hello-world text="test user"></hello-world>
</div> </div>
</div> </div>
` `

41
demo-shell-ng2/app/web-components/helloworld/helloworld.html
View File

@@ -15,7 +15,16 @@
var template = thisDoc.querySelector('template').content; var template = thisDoc.querySelector('template').content;
// Creates an object based in the HTML Element prototype // Creates an object based in the HTML Element prototype
var MyElementProto = Object.create(HTMLElement.prototype); var _text = '_text';
var MyElementProto = Object.create(HTMLElement.prototype, {
text: {
get: function() { return _text; },
set: function(newValue) {
_text = newValue;
this.setText(newValue);
}
}
});
// Creates the "who" attribute and sets a default value // Creates the "who" attribute and sets a default value
MyElementProto.who = 'World'; MyElementProto.who = 'World';
@@ -29,31 +38,31 @@
shadowRoot.appendChild(clone); shadowRoot.appendChild(clone);
// Caches <strong> DOM query // Caches <strong> DOM query
this.strong = shadowRoot.querySelector('strong'); this.strong = shadowRoot.querySelector('strong');
// Checks if the "who" attribute has been overwritten
if (this.hasAttribute('who')) { // Checks if the "text" attribute has been overwritten
var who = this.getAttribute('who'); /*
this.setWho(who); if (this.hasAttribute('text')) {
var text = this.getAttribute('text');
this.setText(text);
} }
else { else {
this.setWho(this.who); this.setText(this.text);
} }
*/
}; };
// Fires when an attribute was added, removed, or updated // Fires when an attribute was added, removed, or updated
MyElementProto.attributeChangedCallback = function(attr, oldVal, newVal) { MyElementProto.attributeChangedCallback = function(attr, oldVal, newVal) {
if (attr === 'who') {
this.setWho(newVal);
}
if (attr === 'text') { if (attr === 'text') {
this.setWho(newVal); this.setText(newVal);
} }
}; };
// Sets new value to "who" attribute
MyElementProto.setWho = function(val) { MyElementProto.setText = function(val) {
this.who = val; _text = val;
// Sets "who" value into <strong> this.strong.textContent = val;
this.strong.textContent = this.who;
}; };
// Registers <hello-world> in the main document // Registers <hello-world> in the main document
window.MyElement = thatDoc.registerElement('hello-world', { window.MyElement = thatDoc.registerElement('hello-world', {
prototype: MyElementProto prototype: MyElementProto