function Tag(tagName, attribs) {
tagName = tagName.trim().toLowerCase();
var elem = tagName === 'svg' ? $.svgRoot() : newTag(tagName);
Object.defineProperty(this, '$', {
value: elem,
writable: false,
enumerable: true,
configurable: false
});
if (Array.isArray(attribs)) {
var that = this;
attribs.forEach(function(attName) {
switch (attName.toLowerCase()) {
case 'value':
defineAttribValue.call(that, elem);
break;
case 'focus':
defineAttribFocus.call(that, elem);
break;
case 'textcontent':
defineAttribTextContent.call(that, elem);
break;
case 'innerhtml':
defineAttribInnerHTML.call(that, elem);
break;
default:
defineStandardAttrib.call(that, elem, attName);
}
});
}
}
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 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);
};