function Label( opts ) {
var elem = $.elem( this, 'span', 'wdg-label' );
DB.prop(this, 'value')(function(v) {
$.textOrHtml(elem, v);
});
opts = DB.extend( { value: '', visible: true, wide: false }, opts, this );
}
var X = function() {
var elem = $.elem( this, 'div', 'help-wdg-icon' );
var names = [];
var key;
for( key in Icon.Icons ) {
names.push( key );
}
names.sort();
names.forEach(function (name) {
var icon = $.div(
{title: name},
[
new Icon({content: name, size: '2em'})
]);
$.on( icon, {
tap: function() {
Wdg.getById('txtContent').value = name;
},
doubletap: function() {
Wdg.getById('txtContent').value = JSON.stringify( Icon.Icons[name], null, ' ' );
}
});
$.add( elem, icon );
});
};
function Flex(opts) {
var elem = $.elem( this, 'div', 'wdg-flex' );
DB.propToggleClass(this, 'orientation', ENUM_ORIENTATION);
DB.propToggleClass(this, 'type', ENUM_TYPE);
DB.propArray(this, 'content')(function(v) {
$.clear( elem );
v.forEach(function (itm) {
$.add( elem, itm );
if (typeof itm.$grow !== 'undefined') {
$.css( itm, {'flex-grow': parseFloat(itm.$grow)} );
}
if (typeof itm.$shrink !== 'undefined') {
$.css( itm, {'flex-shrink': parseFloat(itm.$shrink)} );
}
});
});
DB.propAddClass(this, 'wide');
DB.propRemoveClass(this, 'visible', 'hide');
opts = DB.extend({
orientation: ENUM_ORIENTATION[0],
type: ENUM_TYPE[0],
content: [],
wide: true,
visible: true
}, opts, this);
}
function InputImages(opts) {
var that = this;
var elem = $.elem(this, 'input', {type: 'file', multiple: true});
DB.propRemoveClass(this, 'visible', 'hide');
DB.prop(this, 'onload');
elem.addEventListener('change', function() {
console.info("[wdg.input-images] elem.files=...", elem.files);
var output = [], file;
if (typeof that.onload === 'function') {
for (var i=0; i < elem.files.length; i++) {
file = elem.files[i];
if (file.type.substr(0, 6) == 'image/') {
// On ne garde que les images.
output.push( file );
}
}
that.onload(output);
} else {
console.error("[wdg.input-images] There is no slot `onload`!");
}
});
}
var FloatingButton = function( opts ) {
var that = this;
var icon = new Icon({ size: "24px" });
var elem = $.elem( this, 'button', 'dom', 'custom', 'wdg-floating-button', 'thm-ele6', [icon] );
var touchable = new Touchable( elem, {
classToAdd: 'thm-ele12'
} );
DB.prop( this, 'value' );
DB.prop( this, 'icon' )(function( v ) {
icon.content = v;
});
DB.propAddClass( this, 'small' );
DB.propEnum( TYPES )( this, 'type' )(function(v) {
$.removeClass( elem, 'thm-bg3', 'thm-bgP', 'thm-bgS' );
switch( v ) {
case 'primary': $.addClass( elem, 'thm-bgP' ); break;
case 'secondary': $.addClass( elem, 'thm-bgS' ); break;
default: $.addClass( elem, 'thm-bg3' ); break;
}
});
DB.propBoolean( this, 'enabled' )( function ( v ) {
touchable.enabled = v;
if( v ) {
$.removeClass( elem, 'disabled' );
} else {
$.addClass( elem, 'disabled' );
}
} );
DB.prop( this, 'action', 0 );
DB.propRemoveClass( this, 'visible', 'hide' );
opts = DB.extend( {
type: "standard",
value: "action",
action: 0,
small: false,
enabled: true,
icon: "add",
href: null,
target: null,
visible: true
}, opts, this );
// Animate the pressing.
$.on( this.element, {
keydown: function ( evt ) {
if ( evt.keyCode == 13 || evt.keyCode == 32 ) {
evt.preventDefault();
evt.stopPropagation();
that.fire();
}
}
} );
touchable.tap.add( that.fire.bind( that ) );
};
var WdgDate = function(opts) {
var inputs = {
D: newInput.call(this, 2, 'D'),
M: newInput.call(this, 2, 'M'),
Y: newInput.call(this, 4, 'Y'),
h: newInput.call(this, 2, 'h'),
m: newInput.call(this, 2, 'm'),
s: newInput.call(this, 2, 's')
};
this._inputs = inputs;
var elem = $.elem( this, 'div', 'wdg-date', 'theme-elevation-2', 'theme-color-bg-B1' );
DB.propDate(this, 'action');
DB.propDate(this, 'value')(function(v) {
inputs.D.value = v.getDate();
inputs.M.value = v.getMonth() + 1;
inputs.Y.value = v.getFullYear();
inputs.h.value = v.getHours();
inputs.m.value = v.getMinutes();
inputs.s.value = v.getSeconds();
});
DB.propString(this, 'format')(function(v) {
$.clear( elem );
var c, input;
for( var i=0; i<v.length; i++ ) {
c = v.charAt(i);
input = inputs[c];
if( input ) {
$.add( elem, input );
} else {
$.add( elem, $.tag( 'span', [c] ) );
}
}
});
DB.propAddClass(this, 'focus', 'theme-elevation-8');
DB.propRemoveClass(this, 'visible', 'hide');
DB.propRemoveClass(this, 'valid', 'invalid');
DB.extend({
value: new Date(),
format: "D/M/Y - h:m:s",
focus: false,
valid: true,
visible: true
}, opts, this);
};
var IntlView = function(opts) {
var elem = $.elem( this, 'p', 'wdg-intl-view' );
DB.propRemoveClass( this, 'visible', 'hide' );
DB.prop( this, 'content' )(function(v) {
var html = '';
if (!Array.isArray(v)) v = [v];
v.forEach(function (itm) {
if (typeof itm === 'string') {
html += itm;
} else {
html += itm[Global.lang()];
}
});
elem.innerHTML = html;
});
opts = DB.extend({
content: '',
visible: true
}, opts, this);
};
var Wait = function(opts) {
var text = $.div();
var icon = new Icon({ content: 'wait', animate: true });
var elem = $.elem( this, 'div', 'wdg-wait', [icon, text] );
DB.propRemoveClass( this, 'visible', 'hide' );
DB.propUnit( this, 'size' )(function(unit) {
icon.size = unit.v + unit.u;
// We want to text to be 75% of the icon.
$.css( text, {
'font-size': (unit.v * .75) + unit.u,
'padding-left': (unit.v * .5) + unit.u
});
});
DB.propString( this, 'text' )(function(v) {
text.textContent = v;
});
opts = DB.extend({
size: '24px',
text: '',
visible: true
}, opts, this);
};
var Text = function(opts) {
var that = this;
var dataListHasFocus = false;
var autocompleteProposals = [];
var autocompleteShift = 0;
var label = $.div( 'theme-label', 'theme-color-bg-1' );
var input = $.tag( 'input' );
var datalist = $.div( 'datalist', 'theme-elevation-12' );
this._input = input;
var elem = $.elem( this, 'div', 'wdg-text', 'theme-elevation-2', [label, input, datalist] );
DB.propString(this, 'value')(function(v) {
input.value = v;
that.validate();
});
DB.propEnum(['text', 'button', 'checkbox', 'color', 'date', 'datetime', 'email', 'file',
'hidden', 'image', 'month', 'password', 'radio', 'range', 'reset',
'search', 'submit', 'tel', 'time', 'url', 'week'])(this, 'type')
(function(v) {
$.att(input, {type: v});
});
DB.propStringArray(this, 'list')(function(v) {
$.clear( datalist );
$.removeClass( elem, "list" );
if (!Array.isArray( v )) return;
v.forEach(function ( item ) {
$.add( datalist, $.div( [item] ) );
});
if( v.length > 0 ) {
$.att( elem, "list" );
}
});
DB.propValidator(this, 'validator')(this.validate.bind( this ));
DB.propBoolean(this, 'valid')(function(v) {
if (v === null || !that.validator) {
$.removeClass( elem, "valid", "no-valid" );
} else {
if (v) {
$.addClass( elem, "valid" );
$.removeClass( elem, "no-valid" );
} else {
$.removeClass( elem, "valid" );
$.addClass( elem, "no-valid" );
}
}
});
DB.propBoolean(this, 'enabled')(function(v) {
if (v) {
$.removeAtt(input, 'disabled');
} else {
$.att(input, {disabled: v});
}
});
DB.propInteger(this, 'size')(function(v) {
if (v < 1) {
$.removeAtt(input, 'size');
} else {
$.att(input, {size: v});
}
});
DB.propString(this, 'label')(function(v) {
if (v === null || (typeof v === 'string' && v.trim() == '')) {
$.addClass(elem, 'no-label');
} else {
$.removeClass(elem, 'no-label');
$.textOrHtml(label, v);
if (v.substr(0, 6) == '<html>') {
$.att(label, {title: ''});
} else {
$.att(label, {title: v});
}
}
});
DB.propString(this, 'placeholder')(function(v) {
$.att(input, {placeholder: v});
});
DB.propString(this, 'width')(function(v) {
elem.style.width = v;
});
DB.propBoolean(this, 'focus')(function(v) {
if (v) input.focus();
else input.blur();
});
DB.propInteger(this, 'action', '');
DB.propAddClass(this, 'wide');
DB.propRemoveClass(this, 'visible', 'hide');
opts = DB.extend({
value: '',
type: 'text',
placeholder: '',
enabled: true,
validator: null,
valid: true,
list: null,
label: '',
placeholder: '',
size: 10,
width: 'auto',
focus: false,
wide: false,
visible: true
}, opts, this);
var complete = function() {
$.removeClass( elem, "list" );
if (!that.list || that.list.length == 0) return;
$.clear( datalist );
var list = that.list.map(String.toLowerCase);
var needle = input.value.trim().toLowerCase();
if (needle.length > 0) {
list = list.map(function(itm, idx) {
return [idx, itm.indexOf( needle )];
}).filter(function(itm) {
return itm[1] > -1;
}).sort(function(a, b) {
var d = a[1] - b[1];
if (d != 0) return d;
var sa = that.list[a[0]];
var sb = that.list[b[0]];
if (sa < sb) return -1;
if (sa > sb) return 1;
return 0;
}).map(function(itm) {
var t = that.list[itm[0]];
var i = itm[1];
return t.substr(0, i)
+ "<b>" + t.substr(i, needle.length) + "</b>"
+ t.substr(i + needle.length);
});
} else {
list = list.sort();
}
if (autocompleteShift > 0) {
// Put the current item to the top of the list.
// Use arrow keys to change `autocompleteShift`.
list = list.slice( autocompleteShift ).concat( list.slice( 0, autocompleteShift ) );
}
autocompleteProposals = list;
list.forEach(function (item, idx) {
var div = $.div();
div.innerHTML = item;
list[idx] = div.textContent.trim();
$.add( datalist, div );
$.on( div, {
down: function() {
dataListHasFocus = true;
},
up: function() {
dataListHasFocus = false;
that.focus = true;
},
tap: function() {
that.value = div.textContent.trim();
console.info("[wdg.text] div=...", div);
$.removeClass( elem, 'list' );
}
});
});
if (list.length > 0) {
$.addClass( elem, "list" );
} else {
$.removeClass( elem, "list" );
}
};
var actionUpdateValue = LaterAction(function() {
that.value = input.value;
}, 300);
input.addEventListener('keyup', function(evt) {
if (evt.keyCode == 13) {
evt.preventDefault();
evt.stopPropagation();
if ($.hasClass( elem, 'list' )) {
$.removeClass( elem, 'list' );
that.value = autocompleteProposals[0];
}
else if (that.valid !== false) {
DB.fire( that, 'value', input.value );
DB.fire( that, 'action', input.value );
}
}
else if (evt.keyCode == 27) {
$.removeClass( elem, "list" );
autocompleteShift = 0;
evt.preventDefault();
evt.stopPropagation();
}
else if (evt.keyCode == 40 && $.hasClass( elem, 'list' )) {
autocompleteShift = (autocompleteShift + 1) % autocompleteProposals.length;
complete();
evt.preventDefault();
evt.stopPropagation();
}
else if (evt.keyCode == 38 && $.hasClass( elem, 'list' )) {
autocompleteShift = (autocompleteShift + autocompleteProposals.length - 1)
% autocompleteProposals.length;
complete();
evt.preventDefault();
evt.stopPropagation();
}
else {
autocompleteShift = 0;
complete();
actionUpdateValue.fire();
}
});
input.addEventListener('blur', function() {
that.value = input.value;
if (!dataListHasFocus) {
$.removeClass( elem, "list" );
}
$.addClass( elem, "theme-elevation-2" );
$.removeClass( elem, "theme-elevation-8" );
$.removeClass(input, 'theme-color-bg-A1');
that.focus = false;
});
input.addEventListener('focus', function() {
that.selectAll();
$.removeClass( elem, "theme-elevation-2" );
$.addClass( elem, "theme-elevation-8" );
$.addClass(input, 'theme-color-bg-A1');
that.focus = true;
});
input.addEventListener('keydown', function(evt) {
});
this.validate();
};
/**
@exports {class}
@param {object} opts.content -
*/
function Modal(opts) {
var that = this;
var body = $.div();
body.addEventListener("scroll", onScroll.bind(this, body));
const
laterScroll = function() {
window.setTimeout(function() {
onScroll(body);
});
},
header = $.tag('header', 'thm-fg', 'thm-ele8', 'thm-bgPD'),
footer = $.tag('footer', "thm-bg0"),
cell = $.div('cell', 'thm-ele24', 'thm-bg1', [header, body, footer]),
elem = $.elem(this, 'div', 'wdg-modal', [$.div([cell])]);
$.on(elem, function(evt) {
if (evt.target.parentElement !== elem) return;
that.visible = false;
});
DB.prop(this, 'content')(function(v) {
$.clear(body);
if (Array.isArray(v)) {
v.forEach(function(itm) {
$.add(body, itm);
});
} else if (typeof v !== 'undefined' && v !== null) {
$.add(body, v);
}
laterScroll();
});
DB.prop(this, 'header')(function(v) {
if (!v || (typeof v === 'string' && v.trim().length === 0)) {
$.addClass(header, "hide");
return;
}
$.removeClass(header, "hide");
$.clear(header);
if (Array.isArray(v)) {
v.forEach(function(itm) {
$.add(header, itm);
});
} else if (typeof v !== 'undefined' && v !== null) {
$.add(header, v);
}
laterScroll();
});
DB.prop(this, 'footer')(function(v) {
if (!v || (typeof v === 'string' && v.trim().length === 0)) {
$.addClass(footer, "hide");
return;
}
$.removeClass(footer, "hide");
$.clear(footer);
if (Array.isArray(v)) {
v.forEach(function(itm) {
$.add(footer, itm);
});
} else {
$.add(footer, v);
}
laterScroll();
});
DB.propString(this, 'width')(function(v) {
$.css(body, {
'max-width': v
});
laterScroll();
});
DB.propAddClass(this, 'fullscreen');
DB.propAddClass(this, 'padding');
DB.propAddClass(this, 'scroll');
DB.propAddClass(this, 'wide');
DB.propBoolean(this, 'visible')(function(v) {
if (v) {
that.attach();
} else {
that.detach();
}
});
opts = DB.extend({
visible: false,
header: null,
content: [],
footer: null,
padding: true,
scroll: true,
wide: false,
fullscreen: false,
width: 'auto'
}, opts, this);
}
var Icon = function(opts) {
var that = this;
var mapColors = [];
var g = $.svg('g', {
'stroke-width': 6,
fill: "none",
'stroke-linecap': 'round',
'stroke-linejoin': 'round'
});
var svg = $.svgRoot({
width: '100%',
height: '100%',
viewBox: '-65 -65 130 130',
preserveAspectRatio: "xMidYMid meet"
});
var root = $.div('wdg-icon', [svg]);
var elem = $.elem(this, root);
$.add( svg, g );
DB.prop(this, 'content')(setContent.bind( this, mapColors, g ));
DB.prop(this, 'value');
DB.propBoolean(this, 'rotate')(function(v) {
if (v) {
$.addClass( svg, "rotate" );
} else {
$.removeClass( svg, "rotate" );
}
});
DB.propBoolean(this, 'button')(function(v) {
if (v) {
$.addClass( elem, 'button', 'theme-elevation-8');
$.css( elem, {
padding: ".5rem" //(that.size * (Math.sqrt(2) - 1)) + 'px'
});
that.size = '2rem';
} else {
$.removeClass( elem, 'button', 'theme-elevation-8');
$.css( elem, {
padding: 0
});
}
});
DB.propUnit(this, 'size')(function(v) {
$.css(svg, {
width: v,
height: v
});
});
DB.prop(this, 'action');
$.on( elem, {
down: function() {
if (that.button) {
$.addClass(elem, 'theme-elevation-12');
}
},
up: function() {
$.removeClass(elem, 'theme-elevation-12');
},
tap: function() {
DB.fire( that, 'action', that.value );
}
});
var updateColor = function( index, color ) {
var children = mapColors[index];
if( typeof children === 'undefined' ) return;
children.fill.forEach(function (child) {
$.att( child, "fill", that['color' + index] );
});
children.stroke.forEach(function (child) {
$.att( child, "stroke", that['color' + index] );
});
};
for (var i = 0; i < 6; i++) {
DB.propColor(this, 'color' + i)(updateColor.bind( this, i ));
}
opts = DB.extend({
color0: '#000000',
color1: '#ffffff',
color2: '#777777',
color3: '#ff0000',
color4: '#00ff00',
color5: '#0000ff',
content: ['circle', {
stroke: 1, fill: 0, r: 90, cx: 0, cy: 0
}],
angle: 0,
size: '2rem',
button: false,
value: "icon",
rotate: false,
wide: false,
visible: true
}, opts, this);
};
var Combo = function(opts) {
var that = this;
this._children = {};
var label = $.div( 'label' );
var button = $.div( 'button', 'thm-bgP', [new Icon({content: 'tri-down', size: '24px'})] );
var body = $.tag( 'div', 'body' );
var datalist = $.div( 'datalist' );
this._button = button;
var table = $.div('table', 'thm-ele2', 'thm-bg3', [body, button]);
var elem = $.elem( this, 'div', 'wdg-combo',
[label, table, datalist] );
var touchable = new Touchable( elem );
body.addEventListener('focus', function() {
$.removeClass( table, 'thm-ele2' );
$.addClass( table, 'thm-ele4' );
});
body.addEventListener('blur', function() {
$.addClass( table, 'thm-ele2' );
$.removeClass( table, 'thm-ele4' );
});
DB.propRemoveClass(this, 'enabled', 'disabled');
DB.propBoolean(this, 'focus')(function(v) {
if (v) body.focus();
else body.blur();
});
DB.propString(this, 'label')(function(v) {
if (v === null || (typeof v === 'string' && v.trim() == '')) {
$.addClass(elem, 'no-label');
} else {
$.removeClass(elem, 'no-label');
$.textOrHtml(label, v);
if (v.substr(0, 6) == '<html>') {
$.att(label, {title: ''});
} else {
$.att(label, {title: v});
}
}
});
DB.prop(this, 'content')(function(v) {
var obj;
if( typeof v === 'string' ) {
v = v.split(",").map(function(itm) {
return itm.trim();
});
obj = {};
v.forEach( function( itm ){
obj[itm] = itm;
});
v = obj;
}
if (Array.isArray( v )) {
// Convert array into map.
// Each item must have the `$key` property.
// If not, the element is ignored.
obj = {};
v.forEach(function (itm, idx) {
if( typeof itm.$key === 'undefined' ) return;
obj[itm.$key] = itm;
});
v = obj;
}
that._children = v;
DB.fire( that, 'value' );
});
DB.propString(this, 'value')(function(v) {
var selectedItem = that._children[v];
if( typeof selectedItem === 'undefined' ) {
for( v in that._children ) break;
selectedItem = that._children[v];
}
$.clear( body );
if (!selectedItem) return;
$.add( body, selectedItem );
});
DB.propAddClass(this, 'wide');
DB.propRemoveClass(this, 'visible', 'hide');
opts = DB.extend({
value: '',
content: [],
label: null,
enabled: true,
wide: false,
visible: true
}, opts, this);
touchable.tap.add( that.fire.bind( that ) );
};
var Icon = function(opts) {
var that = this;
var mapColors = [];
var g = $.svg('g', {
'stroke-width': 6,
fill: "none",
'stroke-linecap': 'round',
'stroke-linejoin': 'round'
});
var svg = $.svgRoot({
width: '100%',
height: '100%',
viewBox: '-65 -65 130 130',
preserveAspectRatio: "xMidYMid meet"
});
var root = $.div('wdg-icon', [svg]);
var elem = $.elem(this, root);
$.add( svg, g );
DB.prop(this, 'content')(setContent.bind( this, mapColors, g ));
DB.prop(this, 'value');
DB.propBoolean(this, 'rotate')(function(v) {
if (v) {
$.addClass( svg, "rotate" );
} else {
$.removeClass( svg, "rotate" );
}
});
DB.propBoolean(this, 'button')(function(v) {
if (v) {
$.addClass( elem, 'theme-elevation-8');
$.removeClass( elem, 'flat');
$.css( elem, {
padding: 'calc(0.25 * ' + that.size + ') 0 0 0',
width: "calc(1.5 * " + that.size + ")",
height: "calc(1.5 * " + that.size + ")",
'line-height': that.size
});
$.css(svg, {
'line-height': v
});
//that.size = '2rem';
$.on( elem, {
down: function(evt) {
if (that.button) {
$.addClass(elem, 'theme-elevation-12');
evt.stopPropagation();
evt.preventDefault();
}
},
up: function() {
$.removeClass(elem, 'theme-elevation-12');
},
tap: function() {
DB.fire( that, 'action', that.value );
}
});
} else {
$.removeClass( elem, 'theme-elevation-8');
$.addClass( elem, 'flat');
$.css( elem, {
padding: 0
});
$.off( elem );
}
});
DB.propUnit(this, 'size')(function(v) {
$.css(svg, {
width: v,
height: v,
'line-height': v
});
});
DB.prop(this, 'action');
DB.propAddClass(this, 'wide');
DB.propRemoveClass(this, 'visible', 'hide');
DB.propToggleClass(this, 'type', {
default: "theme-color-bg-B0",
accent: "theme-color-bg-A5"
});
var updateColor = function( index, color ) {
var children = mapColors[index];
if( typeof children === 'undefined' ) return;
children.fill.forEach(function (child) {
$.att( child, "fill", that['color' + index] );
});
children.stroke.forEach(function (child) {
$.att( child, "stroke", that['color' + index] );
});
};
for (var i = 0; i < 6; i++) {
DB.propColor(this, 'color' + i)(updateColor.bind( this, i ));
}
opts = DB.extend({
color0: '#000000',
color1: '#ffffff',
color2: '#777777',
color3: '#ff0000',
color4: '#00ff00',
color5: '#0000ff',
content: ['circle', {
stroke: 1, fill: 0, r: 90, cx: 0, cy: 0
}],
type: 'default',
angle: 0,
size: '2rem',
button: false,
value: "icon",
rotate: false,
wide: false,
visible: true
}, opts, this);
};
var WysiwygEditor = function( opts ) {
var that = this;
// Real focus function will be set when iframe will be loaded.
var postponedFocus = false;
var postponedHTML = null;
var iframeIsLoaded = false;
var iframeHasChanged = false;
var elem = $.elem(this, 'div', 'wdg-wysiwyg', 'theme-elevation-2');
var iconFullscreen = new Icon({ content: Icon.Icons.fullscreen, size: '1.5rem', button: true });
var label = $.div('theme-label');
var header = $.div('header', 'theme-color-bg-1', [iconFullscreen, label]);
var slider = $.div('slider');
var menu = $.div('menu');
var iframe = $.tag( 'iframe', { src: 'squire2/squire.html' } );
iframe.addEventListener( 'load', function() {
iframeIsLoaded = true;
// Storing a reference to the wysiwyg editor.
var squire = iframe.contentWindow.editor;
if( postponedFocus ) {
that.focus = true;
}
// Adding editor buttons.
//initHeader.call( that, header );
if( postponedHTML !== null ) {
squire.setHTML( postponedHTML );
postponedHTML = null;
}
// Adding onChange event when focus is lost.
squire.addEventListener( 'input', function() {
// Prevent from update looping.
iframeHasChanged = true;
that.value = squire.getHTML();
});
Object.defineProperty( that, 'squire', {
value: squire, writable: false, configurable: true, enumerable: true
});
}, false);
var body = $.div('body', [iframe]);
$.add( elem, header, menu, body, slider);
DB.propBoolean(this, 'focus')(function(v) {
if (iframeIsLoaded) {
if (v) {
that.squire.focus();
} else {
that.squire.blur();
}
} else {
postponedFocus = v;
}
});
DB.propString(this, 'label')(function(v) {
if (typeof v === 'number') v = '' + v;
if (typeof v !== 'string') v = '';
label.textContent = v;
});
DB.propInteger(this, 'height')(function(v) {
$.css(elem, {height: v + "px"});
});
DB.prop(this, 'menu')(function(v) {
$.clear( menu );
v.forEach(function (itm) {
if (itm == '-') {
$.add( menu, $.div( 'sep', [itm] ));
} else {
var icon = new Icon({size: '2em', content: itm});
$.addClass( icon.element, 'icon' );
$.on( icon.element, {
down: $.addClass.bind( $, icon.element, 'down' ),
up: $.removeClass.bind( $, icon.element, 'down' ),
tap: onMenu.bind( that, itm )
});
$.add( menu, icon );
}
});
});
DB.propString(this, 'value')(function(v) {
if (iframeIsLoaded) {
if (iframeHasChanged) {
iframeHasChanged = false;
} else {
that.squire.setHTML( v );
}
}
else postponedHTML = v;
});
DB.propAddClass(this, 'wide');
DB.propRemoveClass(this, 'visible', 'hide');
DB.extend({
label: "",
value: "",
menu: DEFAULT_MENU,
height: 180,
visible: true
}, opts, this);
var initialHeight = this.height;
$.on( slider, {
down: function() {
initialHeight = that.height;
},
drag: function(evt) {
that.height = Math.max( 180, initialHeight + evt.dy );
}
});
// Managing fullscreen display.
var fullscreen = new Fx.Fullscreen({
target: elem,
// When the component is put fullscreen, it is temporarly removed from the DOM.
// This causes the IFrame to be reloaded, and the result is that we lost content.
// That's why we use `postponedHTML`.
onBeforeReplace: function() {
postponedHTML = that.squire.getHTML();
}
});
DB.bind(iconFullscreen, 'action', function() {
fullscreen.value = !fullscreen.value;
});
};