You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
3.6 KiB
151 lines
3.6 KiB
|
|
var _displayedPalette = null;
|
|
|
|
// Class for a Sugar palette
|
|
enyo.kind({
|
|
name: "Sugar.Palette",
|
|
kind: enyo.Control,
|
|
published: {
|
|
icon: null,
|
|
text: null,
|
|
contents: null,
|
|
contentsClasses: "",
|
|
header: null
|
|
},
|
|
classes: "palette-sugarizer palette-down",
|
|
components: [
|
|
{ name: "icon", kind: "Sugar.Icon", classes: "palette-icon", size: 20, x: 6, y: 6 },
|
|
{ name: "text", classes: "palette-text" }
|
|
],
|
|
|
|
// Constructor
|
|
create: function() {
|
|
this.inherited(arguments);
|
|
this.iconChanged();
|
|
this.textChanged();
|
|
},
|
|
|
|
rendered: function() {
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
// Property changed
|
|
iconChanged: function() {
|
|
this.$.icon.setIcon(this.icon);
|
|
},
|
|
|
|
textChanged: function() {
|
|
this.$.text.setContent(this.text);
|
|
},
|
|
|
|
displayPopup: function(view) {
|
|
if (_displayedPalette) {
|
|
_displayedPalette.switchPalette(view);
|
|
_displayedPalette = null;
|
|
}
|
|
if (this.contents == null) {
|
|
return;
|
|
}
|
|
var id = this.hasNode().id+"_content";
|
|
this.palette = view.createComponent({
|
|
name: id,
|
|
classes: "palette-content "+this.contentsClasses
|
|
});
|
|
if (this.header) {
|
|
this.palette.createComponent({content: this.header, classes: "palette-header"}, {owner: this.palette});
|
|
this.palette.createComponent({classes: "palette-hr"}, {owner: this.palette});
|
|
}
|
|
this.paletteEvents = [];
|
|
for (var i = 0 ; i < this.contents.length ; i++) {
|
|
var newObject = this.palette.createComponent(this.contents[i], {owner: this.palette});
|
|
var tapMethod = this.contents[i].ontap;
|
|
if (tapMethod) {
|
|
this.palette[tapMethod] = enyo.bind(this, "bindedFunction");
|
|
this.paletteEvents.push({"event": "tap", "object": newObject, "name": tapMethod})
|
|
}
|
|
}
|
|
this.palette.render();
|
|
_updatePosition(this);
|
|
_displayedPalette = this;
|
|
},
|
|
|
|
setItems: function(items) {
|
|
this.contents = items;
|
|
},
|
|
|
|
bindedFunction: function(o, e) {
|
|
for (var i = 0 ; i < this.paletteEvents.length ; i++) {
|
|
if (this.paletteEvents[i].event == e.type && this.paletteEvents[i].object == o) {
|
|
enyo.call(this.parent, this.paletteEvents[i].name, [o, e]);
|
|
}
|
|
}
|
|
},
|
|
|
|
hidePopup: function(view) {
|
|
var that = this;
|
|
var toDestroy = null;
|
|
enyo.forEach(view.getControls(), function(item) {
|
|
if (item.getAttribute("id") == that.palette.getAttribute("id")) {
|
|
toDestroy = item;
|
|
}
|
|
});
|
|
if (toDestroy) {
|
|
toDestroy.destroy();
|
|
}
|
|
_displayedPalette = null;
|
|
},
|
|
|
|
switchPalette: function(view) {
|
|
var isOpen = this.isOpen();
|
|
this.addRemoveClass("palette-down", isOpen);
|
|
this.addRemoveClass("palette-up", !isOpen);
|
|
if (!isOpen) {
|
|
this.displayPopup(view);
|
|
} else {
|
|
this.hidePopup(view);
|
|
}
|
|
},
|
|
|
|
isOpen: function() {
|
|
return this.hasClass("palette-up");
|
|
}
|
|
});
|
|
|
|
|
|
// Internal functions adapted from sugar-web/palette.js
|
|
|
|
function _getOffset(elem, paletteElem) {
|
|
// Ugly hack to consider the palette margin.
|
|
var style = elem.currentStyle || window.getComputedStyle(elem, '');
|
|
|
|
// Remove 'px' from the strings.
|
|
var x = -2 * style.marginLeft.slice(0, -2);
|
|
var y = -1 * style.marginTop.slice(0, -2);
|
|
|
|
var rect = elem.getBoundingClientRect();
|
|
x = rect.left;
|
|
y += rect.top;
|
|
|
|
// Shift to the right if overflow screen
|
|
var delta = x + paletteElem.offsetWidth - document.getElementById("canvas").offsetWidth;
|
|
if (delta > 0) {
|
|
x -= delta;
|
|
}
|
|
|
|
return {
|
|
top: y,
|
|
left: x,
|
|
width: rect.width,
|
|
height: rect.height
|
|
};
|
|
}
|
|
|
|
function _updatePosition(that) {
|
|
var invokerOffset = _getOffset(that.hasNode(), that.palette.hasNode());
|
|
var paletteX = invokerOffset.left;
|
|
var paletteY = invokerOffset.top;
|
|
|
|
var paletteElem = document.getElementById(that.palette.getAttribute("id"));
|
|
paletteElem.style.left = paletteX + "px";
|
|
paletteElem.style.top = paletteY + "px";
|
|
}
|