Add OldSchoolSpinner for loading animation
},
components: [
{name: "records"},
+ {name: "spinner", kind: "OldSchoolSpinner", showing: false},
{name: "api", kind: "blerg.API",
onItemsLoaded: "itemsLoaded"}
],
listKind: "Control",
lastRecord: null,
components: [
- {name: "records"}
+ {name: "records"},
+ {name: "spinner", kind: "OldSchoolSpinner", showing: false}
],
addItems: function(items) {
this.$.records.createComponents(items, {kind: this.listKind});
this.lastRecord = r;
}
this.$.records.render();
+ this.stopLoadAnimation();
},
loadMore: function() {
if (this.lastRecord == 0)
this.loadItems();
}
},
- loadItems: function(from, to) { }
+ loadItems: function(from, to) {
+ this.startLoadAnimation();
+ },
+ startLoadAnimation: function() {
+ this.$.spinner.show();
+ this.$.spinner.start();
+ },
+ stopLoadAnimation: function() {
+ this.$.spinner.hide();
+ this.$.spinner.stop();
+ }
});
},
components: [
{name: "records"},
+ {name: "spinner", kind: "OldSchoolSpinner", showing: false},
{name: "api", kind: "blerg.API",
onItemsLoaded: "itemsLoaded"}
],
]}
]},
{name: "records"},
+ {name: "spinner", kind: "OldSchoolSpinner", showing: false},
{name: "loadMoreButton", kind: "onyx.Button", onclick: "loadMore", content: "Load More"},
{name: "api", kind: "blerg.API",
onItemsLoaded: "itemsLoaded",
+enyo.kind({
+ name: "OldSchoolSpinner",
+ kind: "Control",
+ style: "font-family: Inconsolata, Consolas, Fixedsys, fixed, monospace; font-size: 16px",
+ content: '|',
+ steps: '/-\\|',
+ step: 0,
+ animationInterval: null,
+ destroy: function() {
+ this.stop();
+ this.inherited(arguments);
+ },
+ start: function() {
+ if (this.animationInterval)
+ return;
+
+ this.animationInterval = setInterval(this.animate.bind(this), 100);
+ },
+ stop: function() {
+ clearInterval(this.animationInterval);
+ this.animationInterval = null;
+ },
+ animate: function() {
+ this.step = (this.step + 1) % this.steps.length;
+ this.setContent(this.steps[this.step]);
+ }
+});
enyo.depends(
- '$lib/onyx',
- 'blerg'
+ '$lib/onyx',
+ '$lib/OldSchoolSpinner.js',
+ 'blerg'
);