define(["sugar-web/graphics/palette"], function (palette) {
|
|
|
|
'use strict';
|
|
|
|
var sizepalette = {};
|
|
|
|
sizepalette.SizePalette = function (invoker, primaryText) {
|
|
palette.Palette.call(this, invoker, primaryText);
|
|
|
|
this.sharedEvent = document.createEvent("CustomEvent");
|
|
this.sharedEvent.initCustomEvent('size', true, true, {});
|
|
this.buttons = [];
|
|
|
|
var div = document.createElement('div');
|
|
for (var i = 4; i <= 6; i++) {
|
|
var button = document.createElement("div");
|
|
button.value = i;
|
|
button.onmouseover = function() {
|
|
this.style.background = "#ccc";
|
|
};
|
|
|
|
button.onmouseout = function() {
|
|
this.style.background = "#000";
|
|
};
|
|
|
|
button.style.borderRadius = "0";
|
|
button.style.width = "100%";
|
|
if (i != 4) {
|
|
button.style.marginTop = "3px";
|
|
}
|
|
button.innerHTML = "<img style='vertical-align: middle; margin-right:3px;' src='icons/" + i + "x" + i + ".svg'>" + i + " X " + i;
|
|
div.appendChild(button);
|
|
this.buttons.push(button);
|
|
}
|
|
this.setContent([div]);
|
|
|
|
var that = this;
|
|
|
|
that.getPalette().firstChild.style.backgroundColor = "transparent";
|
|
that.getPalette().firstChild.style.backgroundImage = "";
|
|
|
|
function popDownOnButtonClick(event) {
|
|
console.log(event);
|
|
that.popDown();
|
|
}
|
|
|
|
for (var i = 0; i < this.buttons.length; i++) {
|
|
var t = this;
|
|
var button = t.buttons[i];
|
|
|
|
(function (button) {
|
|
button.addEventListener("click", function () {
|
|
that.sharedEvent.detail.value = button.value;
|
|
that.getPalette().dispatchEvent(that.sharedEvent);
|
|
that.popDown();
|
|
});
|
|
})(button);
|
|
button.addEventListener('size', popDownOnButtonClick);
|
|
}
|
|
};
|
|
|
|
var addEventListener = function (type, listener, useCapture) {
|
|
return this.getPalette().addEventListener(type, listener, useCapture);
|
|
};
|
|
|
|
sizepalette.SizePalette.prototype =
|
|
Object.create(palette.Palette.prototype, {
|
|
addEventListener: {
|
|
value: addEventListener,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true
|
|
}
|
|
});
|
|
|
|
return sizepalette;
|
|
});
|