TouchDevelop/editor/calcbutton.ts

148 строки
4.5 KiB
TypeScript

///<reference path='refs.ts'/>
module TDev
{
export class CalcButton
{
public _theButton:HTMLButtonElement = <HTMLButtonElement>document.createElement("button");
private _help = div("calcButtonHelp", "");
private _inner:HTMLElement;
private _innerText:string;
private _cb: (s: string) => void;
private _tick: Ticks;
public intelliItem:IntelliItem;
constructor() {
this.init();
}
private init()
{
this._theButton.className = "calcButton";
this._theButton.setChildren([this._inner, this._help]);
Util.clickHandler(this._theButton, () => this.onClick());
}
// these 3 methods feature the calculator, they should be overriden to provide calculator-free behavior
public getDefaultWidth(): number {
return Calculator.buttonWidth;
}
public getDefaultHeight(): number {
return Calculator.buttonHeight;
}
public sanityCheck(): boolean {
return !!TheEditor.calculator.expr;
}
public getButton():HTMLButtonElement
{
this._theButton.style.backgroundImage = ''; // clear any image
this._theButton.setChildren([this._inner, this._help]);
this.setSize(this.getDefaultWidth(), this.getDefaultHeight());
// for some reason this is required by iPad - the event handlers seem to be unhooked by this
Util.clickHandler(this._theButton, () => this.onClick());
return this._theButton;
}
public getText() { return this._innerText }
private onClick()
{
if (!this.sanityCheck())
return;
if (this._tick) tick(this._tick);
TDev.Browser.EditorSoundManager.intellibuttonClick();
if(!!this._cb) this._cb(this._innerText);
}
private setHelp(s:string)
{
this._help.setChildren([document.createTextNode(s)]);
}
public setBackgroundImage(url: string) {
if (!Browser.lowMemory) {
this._theButton.style.backgroundImage = HTML.cssImage(url.replace("https://az31353.vo.msecnd.net/pub/", "https://az31353.vo.msecnd.net/thumb/"));
this._theButton.style.backgroundSize = 'cover';
}
}
private setCallback(t:Ticks, f:(s:string)=>void)
{
this._cb = f;
this._theButton.id = "btn-" + Ticker.tickName(t);
this._tick = t;
}
public setImage(url:string, h:string, t:Ticks, f:(s:string)=>void)
{
this.intelliItem = null;
this.setCallback(t, f);
this.setHelp(h);
this._innerText = null;
this._inner = HTML.mkImg(url);
this._theButton.className = "calcButton";
this.getButton();
}
public clear() {
this.setText("", "", null);
HTML.setRole(this._theButton, "presentation");
}
public clearIntelli()
{
this.clear();
this.setIntelli();
this.setCallback(Ticks.noEvent, this._cb)
}
public setIntelli()
{
this._theButton.className = "calcButton calcIntelliButton"
}
public setHtml(s:HTMLElement, h:string, f:(s:string)=>void)
{
this.intelliItem = null;
this.setHelp(h);
this._innerText = "";
this._inner = s;
HTML.setRole(this._theButton, "");
this.getButton();
this.setCallback(Ticks.noEvent, f)
}
public setText(s:string, h:string, f:(s:string)=>void, sz:string = null)
{
return this.setTextEx(s, h, Ticks.noEvent, f, sz)
}
public setTextEx(s:string, h:string, t:Ticks, f:(s:string)=>void, sz:string = null)
{
this.intelliItem = null;
this.setCallback(t, f);
this.setHelp(h);
this._innerText = s;
this._inner = div("calcOp", s);
if (!sz) sz = "1.2em";
this._inner.style.fontSize = sz;
this._theButton.className = "calcButton";
HTML.setRole(this._theButton, "");
this.getButton();
}
public setSize(w:number, h:number)
{
this._theButton.style.width = w + "px";
this._theButton.style.height = h + "px";
}
private style() { return this._theButton.style; }
}
}