PHP Classes

File: src/HtmlWidget.js

Recommend this page to a friend!
  Classes of Nikos M.   PHP Widget Library for HTML Pages   src/HtmlWidget.js   Download  
File: src/HtmlWidget.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Widget Library for HTML Pages
Generate HTML and JavaScript to show page widgets
Author: By
Last change: v.2.3.0 contd

* fix htmlwidgets missing on render
v.2.3.0

* enable adding handlers to restore dynamically structured elements
back to default state and remove any event handlers
in case they are re-rendered on same page
* add modelview re-render test example
* minor changes and corrections
Date: 1 year ago
Size: 150,430 bytes
 

Contents

Class file image Download
/** * HtmlWidget * Html Widgets for Javascript, PHP and Python (Browser and Server, Desktop and Mobile) * * @version: 2.3.0 * https://github.com/foo123/HtmlWidget * **/ !function(root, name, factory){ "use strict"; if (('undefined'!==typeof Components)&&('object'===typeof Components.classes)&&('object'===typeof Components.classesByID)&&Components.utils&&('function'===typeof Components.utils['import'])) /* XPCOM */ (root.$deps = root.$deps||{}) && (root.EXPORTED_SYMBOLS = [name]) && (root[name] = root.$deps[name] = factory.call(root)); else if (('object'===typeof module)&&module.exports) /* CommonJS */ (module.$deps = module.$deps||{}) && (module.exports = module.$deps[name] = factory.call(root)); else if (('function'===typeof define)&&define.amd&&('function'===typeof require)&&('function'===typeof require.specified)&&require.specified(name) /*&& !require.defined(name)*/) /* AMD */ define(name,['module'],function(module){factory.moduleUri = module.uri; return factory.call(root);}); else if (!(name in root)) /* Browser/WebWorker/.. */ (root[name] = factory.call(root)||1)&&('function'===typeof(define))&&define.amd&&define(function(){return root[name];} ); }( /* current root */ 'undefined' !== typeof self ? self : this, /* module name */ "HtmlWidget", /* module factory */ function ModuleFactory__HtmlWidget(undef){ "use strict"; var HAS = Object.prototype.hasOwnProperty, KEYS = Object.keys, json_encode = JSON.stringify, toString = Object.prototype.toString, isXPCOM = ("undefined" !== typeof Components) && ("object" === typeof Components.classes) && ("object" === typeof Components.classesByID) && Components.utils && ("function" === typeof Components.utils['import']), isNode = ("undefined" !== typeof global) && ('[object global]' === toString.call(global)), isWebWorker = !isXPCOM && !isNode && ('undefined' !== typeof WorkerGlobalScope) && ("function" === typeof importScripts) && (navigator instanceof WorkerNavigator), isBrowser = !isXPCOM && !isNode && !isWebWorker, GID = 0, self, widgets = {}, enqueuer = null, ASSETS = {}, CNT = {}, html_esc_re = /[&<>'"]/g, trim_re = /^\s+|\s+$/g, ESCAPED_RE = /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, trim = String.prototype.trim ? function(s) {return String(s).trim();} : function(s) {return String(s).replace(trim_re, '');} ; function esc_re(s) { return s.replace(ESCAPED_RE, "\\$&"); } function is_string(x) { return (x instanceof String) || ('[object String]' === toString.call(x)); } function is_array(x) { return (x instanceof Array) || ('[object Array]' === toString.call(x)); } function is_object(x) { return '[object Object]' === toString.call(x); } function isset(o, p) { // not set or null; if (1 === arguments.length) return (null != o); return HAS.call(o,p) && (null != o[p]); } function empty(o, p) { // not set or null; or empty string/array if (1 === arguments.length) return (null == o) || (0 === o) || (false === o) || ((is_array(o) || is_string(o)) && !o.length) || (is_object(o) && !KEYS(o).length); return !HAS.call(o,p) || (null == o[p]) || (0 === o[p]) || (false === o[p]) || ((is_array(o[p]) || is_string(o[p])) && !o[p].length) || (is_object(o[p]) && !KEYS(o[p]).length); } function htmlspecialchars(s) { return String(s).replace(html_esc_re, function(m){ switch(m) { case '&': return '&amp;' case '<': return '&lt;' case '>': return '&gt;' case '"': return '&quot;' default: return m; } }); } function merge(a, b) { var k, c = {}; for (k in a) if (HAS.call(a,k)) c[k] = a[k]; if (b) for (k in b) if (HAS.call(b,k)) c[k] = b[k]; return c; } function shuffle(a) { var p, b, i; for (i=a.length-1; i>0; i--) { p = Math.round(i*Math.random()); if (i === p) continue; b = a[i]; a[i] = a[p]; a[p] = b; } return a; } function data_attr(k, v) { if ('object' === typeof v) { var attr = '', ks = KEYS(v), k1, kl = ks.length; for (k1=0; k1<kl; k1++) { attr += (!attr.length ? '' : ' ') + data_attr( k+'-'+ks[k1], v[ks[k1]] ); } return attr; } else { return ''+k+'=\''+v+'\''; } } var HtmlWidget_Code = function HtmlWidget_Code(code) { this.code = code; }; HtmlWidget_Code.prototype = { constructor: HtmlWidget_Code ,code: '' }; var HtmlWidget = self = { VERSION: "2.3.0" ,BASE: './' ,enqueueAssets: function(_enqueuer) { enqueuer = _enqueuer && 'function' === typeof(_enqueuer) ? _enqueuer : null; } ,enqueue: function(type, id, asset, deps, props) { if (enqueuer) enqueuer(type, id, [asset, deps, props]); } ,assets: function(assets, base) { if (arguments.length) { if (true === assets) { base = String(base || ''); // resolve base path and transform to Importer format return KEYS(ASSETS).map(function(key) { var asset = ASSETS[key]; if (!empty(asset,'asset')) { if (is_array(asset['asset'])) { for (var k=0; k<asset['asset'].length; k++) asset['asset'][k] = asset['asset'][k].replace('${ASSETS}', base); } else { asset['asset'] = asset['asset'].replace('${ASSETS}', base); } } return [asset['type'], key, empty(asset,'asset') ? null : asset['asset'], empty(asset,'dependencies') ? null : asset['dependencies'], empty(asset,'attributes') ? null : asset['attributes']]; }); } else if (is_object(assets)) { ASSETS = !!base ? merge(ASSETS, assets) : merge({}, assets); } } else { return merge({}, ASSETS); } } ,uuid: function(prefix, suffix) { prefix = prefix || "widget"; suffix = suffix || (isNode ? "static2" : "dynamic"); return [prefix, new Date().getTime(), ++GID, ~~(1000*Math.random()), suffix].join("_"); } ,code: function(code) { return new HtmlWidget_Code(code); } ,extract_code: function(options) { var k, code = []; for (k in options) { if (HAS.call(options,k) && (options[k] instanceof HtmlWidget_Code)) { code.push([k, options[k]]); } } for (k=0; k<code.length; k++) { delete options[code[k][0]]; } return code; } ,data: function(attr, ctx) { var d_attr = ''; if (arguments.length < 2) ctx = 'data'; if (!!ctx && HAS.call(attr,ctx) && ('object' === typeof attr[ctx])) { var k, attr_ctx = attr[ctx]; for(k in attr_ctx) { if (!HAS.call(attr_ctx,k)) continue; d_attr += (!d_attr.length ? '' : ' ') + data_attr( ctx+'-'+k, attr_ctx[k] ); } } return d_attr; } ,attributes: function(attr, atts) { if (!atts || !attr) return ''; var attrs = [], i, l = atts.length, k, v; for (i=0; i<l; i++) { k = atts[i]; if (HAS.call(attr,k) && (null != attr[k])) { if ('data' == k) { attrs.push(self.data(attr)); } else { v = attr[k]; attrs.push(''+k+'="'+v+'"'); } } } return attrs.length ? attrs.join(' ') : ''; } ,options: function(opts, key, value) { var options = [], o_key, o_val, k, v, vv, l; opts = opts || {}; if (is_array(opts)) { for (k=0,l=opts.length; k<l; k++) { v = opts[k]; vv = [].concat(v); o_key = null; if (-1 === key) { o_key = k; } else if (null != key) { if (null!=vv[key]) o_key = vv[key]; } o_val = null; if (null != value) { if (null!=vv[value]) o_val = vv[value]; } else { o_val = v; } if (null === o_key) o_key = o_val; options.push([o_key, o_val]); } } else { for (k in opts) { if (!HAS.call(opts,k)) continue; v = opts[k]; vv = [].concat(v); o_key = null; if (-1 === key) { o_key = k; } else if (null != key) { if (null!=vv[key]) o_key = vv[key]; } o_val = null; if (null != value) { if (null!=vv[value]) o_val = vv[value]; } else { o_val = v; } if (null === o_key) o_key = o_val; options.push([o_key, o_val]); } } return options; } ,shuffle: function(arr, assoc) { var shuffled; if (true === assoc) { var keys = shuffle(KEYS(arr)); shuffled = {}; for(var i=0,l=keys.length; i<l; i++) shuffled[keys[i]] = arr[keys[i]]; } else { shuffled = shuffle(arr.slice()); } return shuffled; } ,menu: function menu(items, tab) { tab = tab || ''; var tab_tab = ' ' + tab, out, item, i, l, item_class, item_url; out = tab + '<ul>' + "\n"; for (i=0,l=items.length; i<l; i++) { item = items[i]; item_class = []; if (!empty(item,'submenu')) item_class.push('w-submenu-item'); if (!empty(item,'active')) item_class.push('active'); item_url = isset(item,'url') ? String(item['url']) : '#'; out += tab_tab+'<li'+(item_class.length ? ' class="'+item_class.join(' ')+'"' : '')+'>'+"\n"; out += tab_tab+'<a href="'+item_url+'">'+String(item['text'])+'</a>'+"\n"; if (!empty(item,'submenu')) out += menu(item['submenu'], tab_tab); out += tab_tab+'</li>'+"\n"; } out += tab + '</ul>' + "\n"; return out; } ,hasClass: function(classAttribute, className) { return -1 !== (' ' + classAttribute + ' ').indexOf(' ' + className + ' '); } ,addClass: function(classAttribute, className) { return self.hasClass(classAttribute, className) ? classAttribute : trim(classAttribute + ' ' + className); } ,removeClass: function(classAttribute, className) { return self.hasClass(classAttribute, className) ? trim((' ' + classAttribute + ' ').replace(' ' + className + ' ', ' ')) : classAttribute; } ,extractTag: function(content, tag, selector, offset) { if (empty(tag)) return false; var off = (offset ? offset.offset : 0)||0, offt, cont, start, m, m2, opened, re, re2; if (is_string(selector)) selector = selector.length ? {'attr' : selector} : null; re = new RegExp('<' + tag + '\\b' + (selector ? ('[^<>]*?\\b' + selector['attr'] + '\\s*=\\s*"' + (!isset(selector, 'value') || (true === selector['value']) ? '[^"]+' : (isset(selector, 'includes') ? ('[^"]*?\\b' + esc_re(selector['includes']) + '\\b[^"]*') : esc_re(selector['value']))) + '"') : '') + '[^<>]*>', 'mi'); offt = off; cont = content.slice(off); if (m=cont.match(re)) { start = off + m.index; off = m.index + m[0].length; offt += off; if ('/>' === m[0].slice(-2)) { offset && (offset.offset = offt); return trim(m[0]); } else { re2 = new RegExp('</?' + tag + '[^<>]*>', 'mi'); opened = 1; cont = cont.slice(off); while (m2=cont.match(re2)) { off = m.index + m[0].length; offt += off; opened += '</' === m[0].slice(0, 2) ? -1 : 1; if (0 === opened) { offset && (offset.offset = offt); return trim(content.slice(start, offt-start)); } else { cont = cont.slice(off); } } } } return false; } ,addWidget: function(widget, renderer) { if (widget && ("function" === typeof(renderer))) widgets['w_'+widget] = renderer; else if (widget && (false === renderer) && HAS.call(widgets,'w_'+widget)) delete widgets['w_'+widget]; } ,widget: function(widget, attr, data) { var out = ''; if (widget) { attr = attr || {}; data = data || {}; if (HAS.call(widgets,'w_'+widget)) return widgets['w_'+widget](attr, data, widget); if ('audio' === widget) attr['type'] = 'audio'; else if ('video' === widget) attr['type'] = 'video'; else if ('checkbox-array' === widget || 'check-array' === widget) attr['type'] = 'checkbox'; else if ('radiobox-array' === widget || 'radio-array' === widget) attr['type'] = 'radio'; else if ('checkbox-list' === widget || 'checklist' === widget) attr['type'] = 'checkbox'; else if ('radiobox-list' === widget || 'radio-list' === widget || 'radiolist' === widget) attr['type'] = 'radio'; else if ('checkbox' === widget || 'checkbox-image' === widget || 'checkbox-label' === widget) attr['type'] = 'checkbox'; else if ('radio' === widget|| 'radio-image' === widget || 'radio-label' === widget) attr['type'] = 'radio'; else if ('datetime' === widget || 'datetimepicker' === widget) attr['time'] = true; else if ('select2' === widget) attr['select2'] = true; else if ('dropdown' === widget) attr['dropdown'] = true; else if ('datatable' === widget) attr['datatable'] = true; else if ('codemirror' === widget || 'codemirror-editor' === widget || 'syntax-editor' === widget || 'source-editor' === widget || 'syntax' === widget || 'source' === widget || 'highlight-editor' === widget || 'highlighter' === widget) attr['syntax-editor'] = true; else if ('tinymce' === widget || 'wysiwyg-editor' === widget || 'wysiwyg' === widget || 'rich-editor' === widget || 'rich' === widget || 'editor' === widget) attr['wysiwyg-editor'] = true; switch(widget) { case 'empty': out = self.w_empty(attr, data, widget); break; case 'sep': case 'separator': out = self.w_sep(attr, data, widget); break; case 'icon': out = self.w_icon(attr, data, widget); break; case 'tooltip': out = self.w_tooltip(attr, data, widget); break; case 'link': out = self.w_link(attr, data, widget); break; case 'button': out = self.w_button(attr, data, widget); break; case 'label': out = self.w_label(attr, data, widget); break; case 'file': out = self.w_file(attr, data, widget); break; case 'textbox': case 'textfield': case 'text': out = self.w_text(attr, data, widget); break; case 'tinymce': case 'editor': case 'rich-editor': case 'rich': case 'wysiwyg-editor': case 'wysiwyg': case 'codemirror': case 'codemirror-editor': case 'source-editor': case 'source': case 'syntax-editor': case 'syntax': case 'highlight-editor': case 'highlighter': case 'textarea': out = self.w_textarea(attr, data, widget); break; case 'datetimepicker': case 'datepicker': case 'datetime': case 'date': out = self.w_date(attr, data, widget); break; case 'time': out = self.w_time(attr, data, widget); break; case 'colorpicker': case 'colorselector': case 'color': out = self.w_color(attr, data, widget); break; case 'rating': out = self.w_rating(attr, data, widget); break; case 'radiobox-array': case 'radio-array': case 'checkbox-array': case 'check-array': out = self.w_control_array(attr, data, widget); break; case 'radiobox-list': case 'radio-list': case 'radiolist': case 'checkbox-list': case 'checklist': out = self.w_control_list(attr, data, widget); break; case 'checkbox-image': case 'radio-image': case 'checkbox-label': case 'radio-label': case 'checkbox': case 'radio': case 'control': out = self.w_control(attr, data, widget); break; case 'switch': out = self.w_switch(attr, data, widget); break; case 'range': out = self.w_range(attr, data, widget); break; case 'dropdown': case 'selectbox': case 'select2': case 'select': out = self.w_select(attr, data, widget); break; case 'datatable': case 'table': out = self.w_table(attr, data, widget); break; case 'animation': out = self.w_animation(attr, data, widget); break; case 'sprite': out = self.w_sprite(attr, data, widget); break; case 'video': case 'audio': case 'media': out = self.w_media(attr, data, widget); break; case 'delayable': out = self.w_delayable(attr, data, widget); break; case 'disabable': out = self.w_disabable(attr, data, widget); break; case 'morphable': out = self.w_morphable(attr, data, widget); break; case 'modal': out = self.w_modal(attr, data, widget); break; case '/modal': out = self.w_modal_end(attr, data, widget); break; case 'menu': out = self.w_menu(attr, data, widget); break; case '/menu': out = self.w_menu_end(attr, data, widget); break; case 'pagination': out = self.w_pagination(attr, data, widget); break; case 'pages': out = self.w_pages(attr, data, widget); break; case 'tabs': out = self.w_tabs(attr, data, widget); break; case 'accordeon': out = self.w_accordeon(attr, data, widget); break; case 'panel': out = self.w_panel(attr, data, widget); break; case '/panel': out = self.w_panel_end(attr, data, widget); break; default: out = ''; break; } } return out; } ,w_empty: function(attr, data, widgetName) { self.enqueue('styles', 'htmlwidgets.css'); return ''; } ,w_sep: function(attr, data, widgetName) { var wclass, wstyle; wclass = 'w-separator'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; self.enqueue('styles', 'htmlwidgets.css'); return '<div class="'+wclass+'" '+wstyle+'></div>'; } ,w_icon: function(attr, data, widgetName) { var wclass, wstyle, wextra, wtitle; wclass = 'fa'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; if (!empty(attr,'icon')) wclass += ' fa-'+attr['icon']; wtitle = !empty(attr,"title") ? 'title="'+attr["title"]+'"' : ''; wextra = self.attributes(attr,['data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); self.enqueue('styles', 'htmlwidgets.css'); return '<i class="'+wclass+'" '+wstyle+' '+wtitle+' '+wextra+'></i>'; } ,w_label: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wfor, wtext, wtitle, winit; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wfor = isset(attr,"for") ? 'for="'+attr['for']+'"' : ''; wtext = isset(data,'text') ? data['text'] : ''; wtitle = isset(attr,'title') ? attr['title'] : wtext; wclass = 'w-widget w-label'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; if (!empty(attr,'icon')) { wclass += ' w-icon'; wtext = "<i class=\"fa fa-" + attr['icon'] + " left-fa\"></i>" + wtext; } if (!empty(attr,'iconr')) { wclass += ' w-icon-right'; wtext = wtext + "<i class=\"fa fa-" + attr['iconr'] + " right-fa\"></i>"; } wextra = self.attributes(attr,['disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); self.enqueue('styles', 'htmlwidgets.css'); if (winit) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['label-instance-'+wid])) CNT['label-instance-'+wid] = 0; self.enqueue('scripts', 'label-instance-'+wid+(isBrowser ? '-'+(++CNT['label-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ ("+winit+")(element, {});\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } // iOS needs an onlick attribute to handle label update if used as controller return '<label id="'+wid+'" '+wfor+' class="'+wclass+'" title="'+wtitle+'" '+wstyle+' onclick="" '+wextra+'>'+wtext+'</label>'; } ,w_link: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wtitle, whref, wfor, wtext, winit, ret; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wtext = isset(data,'text') ? data['text'] : ''; wtitle = isset(attr,'title') ? attr['title'] : wtext; wclass = 'w-link'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; if (!empty(attr,'icon')) { wclass += ' w-icon'; wtext = "<i class=\"fa fa-" + attr['icon'] + " left-fa\"></i>" + wtext; } if (!empty(attr,'iconr')) { wclass += ' w-icon-right'; wtext = wtext + "<i class=\"fa fa-" + attr['iconr'] + " right-fa\"></i>"; } wextra = self.attributes(attr,['disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); self.enqueue('styles', 'htmlwidgets.css'); if (isset(attr,'for')) { wfor = attr['for']; ret = '<label id="'+wid+'" class="'+wclass+'" '+wstyle+' onclick="" title="'+wtitle+'" for="'+wfor+'" '+wextra+'>'+wtext+'</label>'; } else { whref = isset(attr,'href') ? attr['href'] : '#'; wextra += ' '+self.attributes(attr,['target','rel']); ret = '<a id="'+wid+'" class="'+wclass+'" '+wstyle+' title="'+wtitle+'" href="'+whref+'" '+wextra+'>'+wtext+'</a>'; } if (winit) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['link-instance-'+wid])) CNT['link-instance-'+wid] = 0; self.enqueue('scripts', 'link-instance-'+wid+(isBrowser ? '-'+(++CNT['link-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ ("+winit+")(element, {});\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } return ret; } ,w_button: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wtype, wtitle, wtext, whref, wfor, winit, ret; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wtext = isset(data,'text') ? data['text'] : ''; wtitle = isset(attr,'title') ? attr['title'] : wtext; wclass = 'w-widget w-button'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; if (!empty(attr,'icon')) { if (!wtext.length) wclass += ' w-icon-only'; else wclass += ' w-icon'; wtext = "<span class=\"fa-wrapper left-fa\"><i class=\"fa fa-" + attr['icon'] + "\"></i></span>" + wtext; } if (!empty(attr,'iconr')) { if (!wtext.length) wclass += ' w-icon-only'; else wclass += ' w-icon-right'; wtext = wtext + "<span class=\"fa-wrapper right-fa\"><i class=\"fa fa-" + attr['iconr'] + "\"></i></span>"; } wextra = self.attributes(attr,['disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); self.enqueue('styles', 'htmlwidgets.css'); if (isset(attr,'for')) { wfor = attr['for']; ret = '<label id="'+wid+'" for="'+wfor+'" class="'+wclass+'" '+wstyle+' onclick="" title="'+wtitle+'" '+wextra+'>'+wtext+'</label>'; } else if (isset(attr,'href')) { whref = attr['href']; wextra += ' '+self.attributes(attr,['target','rel']); ret = '<a id="'+wid+'" href="'+whref+'" class="'+wclass+'" '+wstyle+' title="'+wtitle+'" '+wextra+'>'+wtext+'</a>'; } else { wtype = isset(attr,'type') ? attr['type'] : 'button'; ret = '<button id="'+wid+'" type="'+wtype+'" class="'+wclass+'" '+wstyle+' title="'+wtitle+'" '+wextra+'>'+wtext+'</button>'; } if (winit) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['button-instance-'+wid])) CNT['button-instance-'+wid] = 0; self.enqueue('scripts', 'button-instance-'+wid+(isBrowser ? '-'+(++CNT['button-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ ("+winit+")(element, {});\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } return ret; } ,w_control: function(attr, data, widgetName) { var wid, wclass, wstyle, wctrl, wextra, wtitle, wchecked, wvalue, wname, wtype, wstate, wtext, winit; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wname = !empty(attr,"name") ? 'name="'+attr["name"]+'"' : ''; wtype = !empty(attr,'type') ? attr['type'] : 'checkbox'; wvalue = isset(data,"value") ? data["value"] : "1"; wchecked = !empty(attr,'checked') && attr['checked'] ? 'checked' : ''; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wtitle = !empty(attr,"title") ? 'title="'+attr["title"]+'"' : ''; wextra = self.attributes(attr,['readonly','disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); wstate = ''; if (isset(attr,'state-on')) wstate += ' data-state-on="'+attr['state-on']+'"'; if (isset(attr,'state-off')) wstate += ' data-state-off="'+attr['state-off']+'"'; if (!empty(attr,'image')) { wctrl = 'radio' === wtype ? 'w-radio-image' : 'w-checkbox-image'; wtext = '<span style="background-image:url('+attr['image']+');"></span>'; } else if (!empty(attr,'label')) { wctrl = 'radio' === wtype ? 'w-radio-label' : 'w-checkbox-label'; wtext = attr['label']; } else { wctrl = 'radio' === wtype ? 'w-radio' : 'w-checkbox'; wtext = '&nbsp;'; } wclass = 'w-widget w-control'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; self.enqueue('styles', 'htmlwidgets.css'); if (winit) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['control-instance-'+wid])) CNT['control-instance-'+wid] = 0; self.enqueue('scripts', 'control-instance-'+wid+(isBrowser ? '-'+(++CNT['control-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ ("+winit+")(element, {});\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } return '<input type="'+wtype+'" id="'+wid+'" '+wname+' class="'+wctrl+'" value="'+wvalue+'" '+wextra+' '+wchecked+' /><label for="'+wid+'" '+wtitle+' class="'+wclass+'" '+wstyle+' '+wstate+' onclick="">'+wtext+'</label>'; } ,w_control_list: function(attr, data, widgetName) { var wid, wname, wtype, wclass, wstyle, wextra, wvalue, woptions, w_item_atts, w_item_class, w_large, w_xlarge, i, l, opt, widget, winit; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wname = !empty(attr,"name") ? attr["name"] : null; wtype = !empty(attr,'type') ? attr['type'] : 'checkbox'; wvalue = isset(data,"value") ? data["value"] : "1"; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = !empty(attr,"extra") ? attr["extra"] : ''; woptions = [].concat(data['options']); wvalue = isset(data,'value') ? data['value'] : ""; wclass = !empty(attr,"class") ? attr["class"] : ''; w_large = !!wclass && (-1 !== (' '+wclass+' ').indexOf(' w-large ')); w_xlarge = !!wclass && (-1 !== (' '+wclass+' ').indexOf(' w-xlarge ')); w_item_atts = self.attributes(attr,['readonly','disabled','data']); if (!empty(attr,"horizontal")) wclass += ' w-control-list-horizontal w-clearfloat'; if ('radio' == wtype) { if (w_xlarge) w_item_class = 'w-xlarge'; else if (w_large) w_item_class = 'w-large'; else w_item_class = ''; widget = '<ol id="'+wid+'" class="w-control-list w-radio-list '+wclass+'" '+wstyle+' '+wextra+'>'; for (i=0,l=woptions.length; i<l; i++) { opt = woptions[i]; widget += '<li class="w-control-list-option">'+self.widget('radio',{ 'id' : wid+'_option_'+(i+1), 'name' : wname, 'class' : w_item_class, 'title' : opt[1], 'checked' : String(opt[0]) === String(wvalue), 'extra' : w_item_atts },{ 'value' : opt[0] })+' '+self.widget('label',{ 'for' : wid+'_option_'+(i+1), 'class' : 'w-control-list-option-label', 'title' : opt[1] },{ 'text' : opt[1] })+'</li>'; } widget += '</ol>'; } else { wvalue = [].concat(wvalue); if (w_xlarge) w_item_class = 'w-xlarge'; else if (w_large) w_item_class = 'w-large'; else w_item_class = ''; widget = '<ul id="'+wid+'" class="w-control-list w-checkbox-list '+wclass+'" '+wstyle+' '+wextra+'>'; for (i=0,l=woptions.length; i<l; i++) { opt = woptions[i]; widget += '<li class="w-control-list-option">'+self.widget('checkbox',{ 'id' : wid+'_option_'+(i+1), 'name' : wname, 'class' : w_item_class, 'title' : opt[1], 'checked' : -1 < wvalue.map(String).indexOf(String(opt[0])), 'extra' : w_item_atts },{ 'value' : opt[0] })+' '+self.widget('label',{ 'for' : wid+'_option_'+(i+1), 'class' : 'w-control-list-option-label', 'title' : opt[1] },{ 'text' : opt[1] })+'</li>'; } widget += '</ul>'; } self.enqueue('styles', 'htmlwidgets.css'); if (winit) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['control-list-instance-'+wid])) CNT['control-list-instance-'+wid] = 0; self.enqueue('scripts', 'control-list-instance-'+wid+(isBrowser ? '-'+(++CNT['control-list-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ ("+winit+")(element, {});\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } return widget; } ,w_control_array: function(attr, data, widgetName) { var wid, wname, wtype, wclass, wstyle, wextra, wvalues, wvalue, woptions, wfields, fields, field, f,fl, w_item_atts, w_item_class, w_item_name, w_large, w_xlarge, i, l, opt, widget, winit; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wname = !empty(attr,"name") ? attr["name"] : null; wtype = !empty(attr,'type') ? attr['type'] : 'checkbox'; wvalue = isset(data,"value") ? data["value"] : "1"; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = !empty(attr,"extra") ? attr["extra"] : ''; wfields = data['fields'] || {}; woptions = [].concat(data['options']); wvalues = isset(data,'value') ? data['value'] : {}; wclass = !empty(attr,"class") ? attr["class"] : ''; w_large = !!wclass && (-1 !== (' '+wclass+' ').indexOf(' w-large ')); w_xlarge = !!wclass && (-1 !== (' '+wclass+' ').indexOf(' w-xlarge ')); w_item_atts = self.attributes(attr,['readonly','disabled','data']); fields = KEYS(wfields); if (!empty(attr,"randomised")) shuffle(fields); if ('radio' == wtype) { if (w_xlarge) w_item_class = 'w-xlarge'; else if (w_large) w_item_class = 'w-large'; else w_item_class = ''; widget = '<table id="'+wid+'" class="w-control-array w-radio-array '+wclass+'" '+wstyle+' '+wextra+'>'; widget += '<thead><tr><td>&nbsp;</td>'; for (i=0,l=woptions.length; i<l; i++) { opt = woptions[i]; widget += '<td>'+opt[1]+'</td>'; } widget += '<td>&nbsp;</td></tr></thead><tbody>'; for (f=0,fl=fields.length; f<fl; f++) { field = fields[f]; widget += '<tr><td>'+wfields[field]+'</td>'; w_item_name = wname+'['+field+']'; for (i=0,l=woptions.length; i<l; i++) { opt = woptions[i]; widget += '<td>'+self.widget('radio',{ 'id' : wid+'_'+field+'_'+(i+1), 'name' : w_item_name, 'class' : w_item_class, 'title' : opt[1], 'checked' : isset(wvalues,field) && (String(opt[0]) === String(wvalues[field])), 'extra' : w_item_atts },{ 'value' : opt[0] })+'</td>'; } widget += '<td>&nbsp;</td></tr>'; } widget += '</tbody></table>'; } else { if (w_xlarge) w_item_class = 'w-xlarge'; else if (w_large) w_item_class = 'w-large'; else w_item_class = ''; widget = '<table id="'+wid+'" class="w-control-array w-checkbox-array '+wclass+'" '+wstyle+' '+wextra+'>'; widget += '<thead><tr><td>&nbsp;</td>'; for (i=0,l=woptions.length; i<l; i++) { opt = woptions[i]; widget += '<td>'+opt[1]+'</td>'; } widget += '<td>&nbsp;</td></tr></thead><tbody>'; for (f=0,fl=fields.length; f<fl; f++) { field = fields[f]; wvalue = isset(wvalues,field) ? [].concat(wvalues[field]) : []; widget += '<tr><td>'+wfields[field]+'</td>'; w_item_name = wname+'['+field+']'; for (i=0,l=woptions.length; i<l; i++) { opt = woptions[i]; widget += '<td>'+self.widget('checkbox',{ 'id' : wid+'_'+field+'_'+(i+1), 'name' : w_item_name, 'class' : w_item_class, 'title' : opt[1], 'checked' : -1 < wvalue.map(String).indexOf(String(opt[0])), 'extra' : w_item_atts },{ 'value' : opt[0] })+'</td>'; } widget += '<td>&nbsp;</td></tr>'; } widget += '</tbody></table>'; } self.enqueue('styles', 'htmlwidgets.css'); if (winit) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['control-array-instance-'+wid])) CNT['control-array-instance-'+wid] = 0; self.enqueue('scripts', 'control-array-instance-'+wid+(isBrowser ? '-'+(++CNT['control-array-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ ("+winit+")(element, {});\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } return widget; } ,w_switch: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wtitle, wchecked, wiconon, wiconoff, wvalue, wvalue2, wdual, wname, wtype, wreverse, wstates, wswitches, winit; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wname = !empty(attr,"name") ? 'name="'+attr["name"]+'"' : ''; wtype = !empty(attr,'type') ? attr['type'] : 'checkbox'; wvalue = isset(data,"value") ? data["value"] : "1"; wvalue2 = isset(data,"valueoff") ? data["valueoff"] : false; wdual = false !== wvalue2; wtitle = !empty(attr,"title") ? 'title="'+attr["title"]+'"' : ''; wchecked = !empty(attr,'checked') && attr['checked']; wclass = 'w-widget w-switch'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wreverse = !empty(attr,"reverse")&&attr["reverse"]; wiconon='&nbsp;'; wiconoff='&nbsp;'; if (!empty(attr,"iconon") && empty(attr,"iconoff")) { wiconon = '<i class="fa fa-'+attr.iconon+' not-negative"></i>'; wiconoff = '<i class="fa fa-'+attr.iconon+' negative"></i>'; } else if (!empty(attr,"iconoff") && empty(attr,"iconon")) { wiconon = '<i class="fa fa-'+attr.iconoff+' positive"></i>'; wiconoff = '<i class="fa fa-'+attr.iconoff+' not-positive"></i>'; } else if ( !empty(attr,"iconon") && !empty(attr,"iconoff") ) { wiconon = '<i class="fa fa-'+attr.iconon+'"></i>'; wiconoff = '<i class="fa fa-'+attr.iconoff+'"></i>'; } wextra = self.attributes(attr,['readonly','disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); if (wdual) { // dual switch with separate on/off states wclass += ' dual'; wtype = 'radio'; if (wchecked) { wstates = '<input type="'+wtype+'" id="'+wid+'-on" '+wname+' class="w-switch-state w-state-on" value="'+wvalue+'" '+wextra+' checked /><input type="'+wtype+'" id="'+wid+'-off" '+wname+' class="w-switch-state w-state-off" value="'+wvalue2+'" '+wextra+' />'; } else { wstates = '<input type="'+wtype+'" id="'+wid+'-on" '+wname+' class="w-switch-state w-state-on" value="'+wvalue+'" '+wextra+' /><input type="'+wtype+'" id="'+wid+'-off" '+wname+' class="w-switch-state w-state-off" value="'+wvalue2+'" '+wextra+' checked />'; } if (wreverse) { wclass += ' reverse'; wswitches = '<label for="'+wid+'-off" class="w-switch-off" onclick="">'+wiconoff+'</label><label for="'+wid+'-on" class="w-switch-on" onclick="">'+wiconon+'</label>'; } else { wswitches = '<label for="'+wid+'-on" class="w-switch-on" onclick="">'+wiconon+'</label><label for="'+wid+'-off" class="w-switch-off" onclick="">'+wiconoff+'</label>'; } } else { // switch with one state for on/off if (wchecked) wchecked = 'checked'; wstates = '<input type="'+wtype+'" id="'+wid+'" '+wname+' class="w-switch-state" value="'+wvalue+'" '+wextra+' '+wchecked+' />'; if (wreverse) { wclass += ' reverse'; wswitches = '<label for="'+wid+'" class="w-switch-off" onclick="">'+wiconoff+'</label><label for="'+wid+'" class="w-switch-on" onclick="">'+wiconon+'</label>'; } else { wswitches = '<label for="'+wid+'" class="w-switch-on" onclick="">'+wiconon+'</label><label for="'+wid+'" class="w-switch-off" onclick="">'+wiconoff+'</label>'; } } self.enqueue('styles', 'htmlwidgets.css'); if (winit) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['switch-instance-'+wid])) CNT['switch-instance-'+wid] = 0; self.enqueue('scripts', 'switch-instance-'+wid+(isBrowser ? '-'+(++CNT['switch-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ ("+winit+")(element, {});\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } return '<span class="'+wclass+'" '+wtitle+' '+wstyle+'>'+wstates+wswitches+'<span class="w-switch-handle"></span></span>'; } ,w_range: function(attr, data, widgetName) { // adapted from https://github.com/yairEO/ui-range // and https://dev.to/madsstoumann/accessible-circular-sliders-11p var wid, wclass, wstyle, wextra, wtitle, wvalue, wvalue2, wdual, wcircular, wname, wname2, winit, wmin, wmax, wstep, wprefix, wsuffix; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wname = !empty(attr,"name") ? 'name="'+attr["name"]+'"' : ''; wname2 = !empty(attr,"name2") ? 'name="'+attr["name2"]+'"' : ''; wtitle = !empty(attr,"title") ? 'title="'+attr["title"]+'"' : ''; wstyle = !empty(attr,"style") ? attr["style"] : ''; wextra = self.attributes(attr,['readonly','disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); wclass = 'w-widget w-range'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wvalue = isset(data,'value') ? data['value'] : 0; wvalue2 = isset(data,'value2') ? data['value2'] : false; wdual = false !== wvalue2; if (wdual) wclass = self.addClass(wclass, 'dual'); wcircular = !empty(attr,'circular'); if (wcircular && !wdual) wclass = self.addClass(wclass, 'circular'); wmin = isset(attr,'min') ? parseInt(attr['min']) : 0; wmax = isset(attr,'max') ? parseInt(attr['max']) : 100; wstep = isset(attr,'step') ? attr['step'] : 1; wprefix = isset(attr,'prefix') ? attr['prefix'] : ""; wsuffix = isset(attr,'suffix') ? attr['suffix'] : ""; self.enqueue('styles', 'htmlwidgets.css'); if (winit || (wcircular && !wdual)) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['range-instance-'+wid])) CNT['range-instance-'+wid] = 0; self.enqueue('scripts', 'range-instance-'+wid+(isBrowser ? '-'+(++CNT['range-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ "+(winit ? "("+winit+")(element, {});" : "")+"\ "+(wcircular && !wdual ? "\ var range = element.getElementsByTagName('input')[0],\ output = element.getElementsByTagName('output')[0],\ center,\ restore = htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop);\ function computeCenter(element)\ {\ var rect = element.getBoundingClientRect();\ return {\ X: rect.left + rect.width / 2,\ Y: rect.top + rect.height / 2\ };\ }\ function update(evt)\ {\ var value = range.valueAsNumber, angle,\ min = +range.min, max = +range.max,\ span = max - min, step = +range.step;\ if (evt)\ {\ angle = Math.atan2(((evt.changedTouches&&evt.changedTouches.length ? evt.changedTouches[0].clientY : evt.clientY) - center.Y), (evt.changedTouches&&evt.changedTouches.length ? evt.changedTouches[0].clientX : evt.clientX) - center.X) * 180 / Math.PI + 90;\ if (angle < 0) angle += 360;\ angle = Math.max(0, Math.min(360, angle));\ range.value = Math.max(min, Math.min(max, min + step * Math.ceil(angle / 360 * span / step)));\ }\ else\ {\ angle = 360 * (value - min) / span;\ }\ element.style.setProperty('--value', range.value);\ element.style.setProperty('--text-value', '\"'+String(range.value)+'\"');\ element.style.setProperty('--angle', String(angle)+'deg');\ }\ function updateThrottled(evt)\ {\ evt.preventDefault && evt.preventDefault();\ update(evt);\ }\ function onKeyDown(evt)\ {\ switch(evt.key)\ {\ case 'ArrowLeft':\ case 'ArrowDown':\ evt.preventDefault && evt.preventDefault();\ range.stepDown();\ update();\ break;\ case 'ArrowRight':\ case 'ArrowUp':\ evt.preventDefault && evt.preventDefault();\ range.stepUp();\ update();\ break;\ }\ }\ function onMouseDown(evt)\ {\ evt.preventDefault && evt.preventDefault();\ center = computeCenter(element);\ htmlwidgets.addEvent(document, 'mouseup', function clear(evt) {\ htmlwidgets.removeEvent(document, 'mousemove', updateThrottled, {capture:false,passive:false});\ htmlwidgets.removeEvent(document, 'mouseup', clear);\ htmlwidgets.fireEvent(range, 'change');\ });\ htmlwidgets.addEvent(document, 'mousemove', updateThrottled, {capture:false,passive:false});\ }\ function onTouchStart(evt)\ {\ evt.preventDefault && evt.preventDefault();\ center = computeCenter(element);\ htmlwidgets.addEvent(document, 'touchend', function clear(evt) {\ htmlwidgets.removeEvent(document, 'touchmove', updateThrottled, {capture:false,passive:false});\ htmlwidgets.removeEvent(document, 'touchend', clear);\ htmlwidgets.fireEvent(range, 'change');\ });\ htmlwidgets.addEvent(document, 'touchmove', updateThrottled, {capture:false,passive:false});\ }\ function onClick(evt)\ {\ center = computeCenter(element);\ update(evt);\ htmlwidgets.fireEvent(range, 'change');\ }\ htmlwidgets.addEvent(output, 'keydown', onKeyDown, {capture:false,passive:false});\ htmlwidgets.addEvent(output, 'mousedown', onMouseDown, {capture:false,passive:false});\ htmlwidgets.addEvent(output, 'touchstart', onTouchStart, {capture:false,passive:false});\ htmlwidgets.addEvent(element, 'click', onClick);\ htmlwidgets.addHandler(element, 'restore', function(element) {\ restore(element);\ restore = null;\ var output = element.getElementsByTagName('output')[0];\ htmlwidgets.removeEvent(output, 'keydown', onKeyDown, {capture:false,passive:false});\ htmlwidgets.removeEvent(output, 'mousedown', onMouseDown, {capture:false,passive:false});\ htmlwidgets.removeEvent(output, 'touchstart', onTouchStart, {capture:false,passive:false});\ htmlwidgets.removeEvent(element, 'click', onClick);\ htmlwidgets.addHandler(element, 'restore', htmlwidgets.noop);\ });\ update();\ " : "")+"\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } return wdual ? '<div id="'+wid+'" class="'+wclass+'" '+wtitle+' style=\'--min:'+wmin+';--max:'+wmax+';--step:'+wstep+';--value-a:'+wvalue+';--value-b:'+wvalue2+';--text-value-a:"'+wvalue+'";--text-value-b:"'+wvalue2+'";--prefix:"'+wprefix+'";--suffix:"'+wsuffix+'";'+wstyle+'\'><input id="'+wid+'_rng1" type="range" '+wname+' min="'+wmin+'" max="'+wmax+'" step="'+wstep+'" value="'+wvalue+'" '+wextra+' oninput="this.parentNode.style.setProperty(\'--value-a\',this.value);this.parentNode.style.setProperty(\'--text-value-a\',JSON.stringify(this.value));"/><output for="'+wid+'_rng1"></output><input id="'+wid+'_rng2" type="range" '+wname2+' min="'+wmin+'" max="'+wmax+'" step="'+wstep+'" value="'+wvalue2+'" '+wextra+' oninput="this.parentNode.style.setProperty(\'--value-b\',this.value);this.parentNode.style.setProperty(\'--text-value-b\',JSON.stringify(this.value));"/><output for="'+wid+'_rng2"></output><div class="w-range-progress"></div></div>' : (wcircular ? '<div id="'+wid+'" class="'+wclass+'" '+wtitle+' style=\'--min:'+wmin+';--max:'+wmax+';--step:'+wstep+';--value:'+wvalue+';--text-value:"'+wvalue+'";--prefix:"'+wprefix+'";--suffix:"'+wsuffix+'";'+wstyle+'\'><output tabindex="0" for="'+wid+'_rng"></output><input id="'+wid+'_rng" '+wname+' type="range" min="'+wmin+'" max="'+wmax+'" step="'+wstep+'" value="'+wvalue+'" '+wextra+' hidden/></div>' : '<div id="'+wid+'" class="'+wclass+'" '+wtitle+' style=\'--min:'+wmin+';--max:'+wmax+';--step:'+wstep+';--value:'+wvalue+';--text-value:"'+wvalue+'";--prefix:"'+wprefix+'";--suffix:"'+wsuffix+'";'+wstyle+'\'><input id="'+wid+'_rng" '+wname+' type="range" min="'+wmin+'" max="'+wmax+'" step="'+wstep+'" value="'+wvalue+'" '+wextra+' oninput="this.parentNode.style.setProperty(\'--value\',this.value); this.parentNode.style.setProperty(\'--text-value\',JSON.stringify(this.value));"/><output for="'+wid+'_rng"></output><div class="w-range-progress"></div></div>'); } ,w_rating: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wvalue, wratings, wname, wtitle, wtext, wicon, r, rate, label, widget, wchecked, w_item_atts, w_icon; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wname = !empty(attr,"name") ? 'name="'+attr["name"]+'"' : 'name="__rating_'+wid+'"'; wvalue = isset(data,'value') ? data['value'] : ""; wtitle = !empty(attr,"title") ? 'title="'+attr["title"]+'"' : ''; wtext = !empty(data,'text') ? data['text'] : ''; wclass = 'w-rating'; if ( !empty(attr,"class") ) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wicon = !empty(attr,"icon") ? attr["icon"] : 'star'; w_item_atts = self.attributes(attr,['readonly','disabled','data']); wextra = !empty(attr,"extra") ? (' '+attr["extra"]) : ''; wratings = !empty(data,"ratings") && (data["ratings"] instanceof Array) ? data["ratings"] : self.options({'1':'1','2':'2','3':'3','4':'4','5':'5'},-1); widget = "<fieldset id=\""+wid+"\" "+wtitle+" class=\""+wclass+"\" "+wstyle+" "+wextra+">"; if (!!wtext ) widget += "<legend "+wtitle+">"+wtext+"</legend>"; if (!wicon) wicon = 'star'; for (r=wratings.length-1; r>=0; r--) { rate = wratings[r][0]; label = wratings[r][1]; if (is_array(wicon)) { if (wicon.length > r) w_icon = wicon[r]; else w_icon = wicon[wicon.length-1]; } else { w_icon = wicon; } wchecked = !!wvalue && wvalue == rate ? 'checked' : ''; widget += "<input type=\"radio\" id=\""+wid+"_rating_"+rate+"\" class=\"w-rating-input\" "+wname+" value=\""+rate+"\" "+wchecked+" "+w_item_atts+"/><label for=\""+wid+"_rating_"+rate+"\" class=\"fa fa-"+w_icon+" w-rating-label\" title=\""+label+"\">&nbsp;</label>"; } widget += "</fieldset>"; self.enqueue('styles', 'htmlwidgets.css'); return widget; } ,w_select: function(attr, data, widgetName) { // may use https://select2.org/ var wid, wclass, wstyle, wextra, wname, wdropdown, woptions, wselected, opts, o, opt, l, key, val, selected, has_selected, options, code, wtitle, winit; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wname = !empty(attr,"name") ? 'name="'+attr["name"]+'"' : ''; wdropdown = !!attr['dropdown']; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wtitle = !empty(attr,"title") ? 'title="'+attr["title"]+'"' : ''; wextra = self.attributes(attr,['multiple','readonly','disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); wselected = isset(data,'selected') ? data['selected'] : []; if (!is_array(wselected)) wselected = [wselected]; woptions = ''; opts = data['options']; l = opts.length; has_selected = false; for (o=0; o<l; o++) { // NOTE: use HtmlWidget.options() to format options accordingly to be used here opt = opts[o]; key = opt[0]; val = opt[1]; selected = -1 < wselected.map(String).indexOf(String(key)) ? ' selected="selected"' : ''; if (selected.length) has_selected = true; woptions += "<option value=\""+key+"\""+selected+">"+val+"</option>"; } if (!empty(attr,'placeholder')) { woptions = "<option value=\"\" class=\"w-option-placeholder\" disabled"+(has_selected?'':' selected')+">"+attr['placeholder']+"</option>" + woptions; //if ( !/\brequired\b/.test(wextra) ) wextra += ' required'; //if ( !wname.length ) wextra += ' form="__NONE__"'; wextra += ' data-placeholder="'+attr['placeholder']+'"'; } wclass = wdropdown ? 'w-widget w-dropdown' : 'w-widget w-select'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; self.enqueue('styles', 'htmlwidgets.css'); if (winit && wdropdown) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['dropdown-instance-'+wid])) CNT['dropdown-instance-'+wid] = 0; self.enqueue('scripts', 'dropdown-instance-'+wid+(isBrowser ? '-'+(++CNT['dropdown-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ ("+winit+")(element, {});\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } if (!!attr['select2'] && !wdropdown) { options = is_object(attr["options"]) ? attr["options"] : {}; code = self.extract_code(options); wclass += ' w-select2'; // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['select2-instance-'+wid])) CNT['select2-instance-'+wid] = 0; self.enqueue('scripts', 'select2-instance-'+wid+(isBrowser ? '-'+(++CNT['select2-instance-'+wid]) : ''), ["(function(){\ var tries = 0, options = "+(json_encode(options))+";\ "+code.map(function(c) {return "options['"+c[0]+"'] = " + c[1].code + ";";}).join("\n")+"\ function render()\ {\ if ('undefined' === typeof(htmlwidgets) || 'undefined' === typeof(jQuery) || 'function' !== typeof(jQuery.fn.select2)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ " + (winit ? '('+winit+')(element, options);' : "jQuery(element).select2(options); htmlwidgets.addHandler(element, 'restore', function(element) {\ jQuery(element).select2('destroy');\ htmlwidgets.addHandler(element, 'restore', htmlwidgets.noop);\ });") + "\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js', 'select2']); } return wdropdown ? '<span class="'+wclass+'" '+wstyle+'><select id="'+wid+'" '+wname+' class="w-dropdown-select" '+wtitle+' '+wextra+'>'+woptions+'</select></span>' : '<select id="'+wid+'" '+wname+' class="'+wclass+'" '+wstyle+' '+wtitle+' '+wextra+'>'+woptions+'</select>'; } ,w_text: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wtype, wicon, wplaceholder, wvalue, wname, wtitle, wrapper_class, titl, winit; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wname = !empty(attr,"name") ? 'name="'+attr["name"]+'"' : ''; wvalue = isset(data,"value") ? data["value"] : ""; titl = isset(attr,"title") ? attr["title"] : ''; wtitle = !!titl ? 'title="'+titl+'"' : ''; wplaceholder = isset(attr,'placeholder') ? attr['placeholder'] : titl; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wtype = !empty(attr,"type") ? attr["type"] : 'text'; wicon = ''; wrapper_class = 'w-wrapper'; if (!empty(attr,'icon')) { wicon += "<span class=\"fa-wrapper left-fa\"><i class=\"fa fa-" + attr['icon'] + "\"></i></span>"; wrapper_class += ' w-icon'; } if (!empty(attr,'iconr')) { wicon += "<span class=\"fa-wrapper right-fa\"><i class=\"fa fa-" + attr['iconr'] + "\"></i></span>"; wrapper_class += ' w-icon-right'; } wextra = self.attributes(attr,['readonly','disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); wclass = 'w-widget w-text'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; self.enqueue('styles', 'htmlwidgets.css'); if (winit) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['text-instance-'+wid])) CNT['text-instance-'+wid] = 0; self.enqueue('scripts', 'text-instance-'+wid+(isBrowser ? '-'+(++CNT['text-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ ("+winit+")(element, {});\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } return wicon.length ? '<span class="'+wrapper_class+'" '+wstyle+'><input type="'+wtype+'" id="'+wid+'" '+wname+' '+wtitle+' class="'+wclass+'" placeholder="'+wplaceholder+'" value="'+wvalue+'" '+wextra+' />'+wicon+'</span>' : '<input type="'+wtype+'" id="'+wid+'" '+wname+' '+wtitle+' class="'+wclass+'" '+wstyle+' placeholder="'+wplaceholder+'" value="'+wvalue+'" '+wextra+' />'; } ,w_textarea: function(attr, data, widgetName) { // may use https://codemirror.net/, https://www.tiny.cloud/ var wid, wclass, wstyle, wextra, wplaceholder, wvalue, wname, wtitle, weditor, defaults, titl, options, code, winit; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wname = !empty(attr,"name") ? 'name="'+attr["name"]+'"' : ''; wvalue = isset(data,"value") ? data["value"] : ""; titl = isset(attr,"title") ? attr["title"] : ''; wtitle = !!titl ? 'title="'+titl+'"' : ''; wplaceholder = isset(attr,'placeholder') ? attr['placeholder'] : titl; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = self.attributes(attr,['readonly','disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); if (!!attr['syntax-editor']) { options = is_object(attr["options"]) ? attr["options"] : {}; code = self.extract_code(options); if (empty(options,'mode')) options['mode'] = 'text/html'; if (empty(options,'theme')) options['theme'] = 'default'; if (!isset(options,'readOnly')) options['readOnly'] = isset(attr,'readonly') ? !!attr['readonly'] : false; if (!isset(options,'lineWrapping')) options['lineWrapping'] = false; if (!isset(options,'lineNumbers')) options['lineNumbers'] = true; if (!isset(options,'indentUnit')) options['indentUnit'] = 4; if (!isset(options,'indentWithTabs')) options['indentWithTabs'] = false; if (!isset(options,'lint')) options['lint'] = false; if (!isset(options,'foldGutter')) options['foldGutter'] = true; if (!isset(options,'gutters')) options['gutters'] = ['CodeMirror-lint-markers','CodeMirror-linenumbers','CodeMirror-foldgutter']; wclass = 'w-widget w-syntax-editor w-codemirror-editor'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['codemirror-instance-'+wid])) CNT['codemirror-instance-'+wid] = 0; self.enqueue('scripts', 'codemirror-instance-'+wid+(isBrowser ? '-'+(++CNT['codemirror-instance-'+wid]) : ''), ["(function(){\ var tries = 0, options = "+(json_encode(options))+";\ "+code.map(function(c) {return "options['"+c[0]+"'] = " + c[1].code + ";";}).join("\n")+"\ function render()\ {\ if ('undefined' === typeof(htmlwidgets) || 'function' !== typeof(CodeMirror)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var autosave = false;\ if (options.autosave)\ {\ autosave = true;\ delete options.autosave;\ }\ if (options.grammar && ('undefined' !== typeof(CodeMirrorGrammar)))\ {\ var mode = CodeMirrorGrammar.getMode(options.grammar);\ CodeMirror.defineMode(options.mode, mode);\ mode.supportCodeFolding = true;\ CodeMirror.registerHelper('fold', mode.foldType, mode.folder);\ mode.supportGrammarAnnotations = true;\ CodeMirror.registerHelper('lint', options.mode, mode.validator);\ delete options.grammar;\ }\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ " + (winit ? '('+winit+')(element, options);' : "element.codemirror = CodeMirror.fromTextArea(element, options);\ htmlwidgets.addHandler(element, 'restore', function(element) {\ if (element.codemirror) {try{element.codemirror.toTextArea();}catch(e){} element.codemirror = null;}\ htmlwidgets.addHandler(element, 'restore', htmlwidgets.noop);\ });\ if (autosave)\ {\ element.codemirror.on('changes', function(cm){\ cm.save();\ htmlwidgets.fireEvent(element, 'change');\ });\ }") + "\ }\ }\ window.requestAnimationFrame(render);\ })();"], !empty(options,'grammar') ? ['htmlwidgets.js','codemirror-htmlmixed', 'codemirror-grammar'] : ['htmlwidgets.js','codemirror-htmlmixed']); } else if (!!attr['wysiwyg-editor']) { options = is_object(attr["options"]) ? attr["options"] : {}; code = self.extract_code(options); if (!isset(options,'plugins')) options['plugins'] = 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help' /*placeholderalt codemirror jbimages*/; if (!isset(options,'toolbar')) options['toolbar'] = 'undo redo formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat'; if (empty(options,'theme')) options['theme'] = 'modern'; if (empty(options,'skin')) options['skin'] = 'lightgray'; if (empty(options,'directionality')) options['directionality'] = 'ltr'; if (empty(options,'height')) options['height'] = 500; if (!isset(options,'placeholder')) options['placeholder'] = isset(attr,'placeholder') ? attr['placeholder'] : ''; if (!isset(options,'automatic_uploads')) options['automatic_uploads'] = true; if (!isset(options,'image_advtab')) options['image_advtab'] = true; if (!isset(options,'paste_data_images')) options['paste_data_images'] = true; if (!isset(options,'browser_spellcheck')) options['browser_spellcheck'] = true; /*if (!isset(options,'templates')) options['templates'] = []; if (!isset(options,'body_class')) options['body_class'] = null; if (!isset(options,'content_css')) options['content_css'] = null; if (!isset(options,'content_style')) options['content_style'] = null;*/ options['selector'] = '#'+wid; wclass = 'w-widget w-wysiwyg-editor'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['tinymce-instance-'+wid])) CNT['tinymce-instance-'+wid] = 0; self.enqueue('scripts', 'tinymce-instance-'+wid+(isBrowser ? '-'+(++CNT['tinymce-instance-'+wid]) : ''), ["(function(){\ var tries = 0, options = "+(json_encode(options))+";\ "+code.map(function(c) {return "options['"+c[0]+"'] = " + c[1].code + ";";}).join("\n")+"\ function render()\ {\ if ('undefined' === typeof(htmlwidgets) || 'undefined' === typeof(tinymce)) {if (tries<10) {tries++; setTimeout(render,100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ if (options.autosave)\ {\ if (!options.setup)\ {\ options.setup = function(editor) {\ editor.on('change', function(){\ editor.save();\ htmlwidgets.fireEvent(element, 'change');\ });\ };\ }\ delete options.autosave;\ }\ if (options.locale && options.i18n)\ {\ tinymce.util.I18n.add(options.locale, options.i18n);\ delete options.locale;\ delete options.i18n;\ }\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ " + (winit ? '('+winit+')(element, options);' : "tinymce.init(options);\ htmlwidgets.addHandler(element, 'restore', function(element) {\ var prev_editor = tinymce.get(element.id);\ if (prev_editor) prev_editor.remove();\ htmlwidgets.addHandler(element, 'restore', htmlwidgets.noop);\ });\ ") + "\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js','tinymce']); } else { wclass = 'w-widget w-textarea'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; self.enqueue('styles', 'htmlwidgets.css'); if (winit) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['textarea-instance-'+wid])) CNT['textarea-instance-'+wid] = 0; self.enqueue('scripts', 'textarea-instance-'+wid+(isBrowser ? '-'+(++CNT['textarea-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ ("+winit+")(element, {});\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } } return '<textarea id="'+wid+'" '+wname+' '+wtitle+' class="'+wclass+'" '+wstyle+' placeholder="'+wplaceholder+'" '+wextra+'>'+wvalue+'</textarea>'; } ,w_date: function(attr, data, widgetName) { // uses https://github.com/foo123/Pikadaytime var wid, wclass, wstyle, wextra, wplaceholder, wicon, wvalue, wname, wtitle, wrapper_class, titl, options, code, winit; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wname = !empty(attr,"name") ? 'name="'+attr["name"]+'"' : ''; titl = isset(attr,"title") ? attr["title"] : ''; wtitle = !!titl ? 'title="'+titl+'"' : ''; wplaceholder = isset(attr,'placeholder') ? attr['placeholder'] : titl; wclass = 'w-widget w-text w-date'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wicon = ''; wrapper_class = 'w-wrapper'; if (!empty(attr,'icon')) { wicon += "<span class=\"fa-wrapper left-fa\"><i class=\"fa fa-" + attr['icon'] + "\"></i></span>"; wrapper_class += ' w-icon'; } if (!empty(attr,'iconr')) { wicon += "<span class=\"fa-wrapper right-fa\"><i class=\"fa fa-" + attr['iconr'] + "\"></i></span>"; wrapper_class += ' w-icon-right'; } if (empty(attr,'icon') && empty(attr,'iconr')) { wicon += "<span class=\"fa-wrapper right-fa\"><i class=\"fa fa-calendar\"></i></span>"; wrapper_class += ' w-icon-right'; } wextra = self.attributes(attr,['readonly','disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); options = is_object(attr["options"]) ? attr["options"] : {}; code = self.extract_code(options); wvalue = isset(options,"value") ? options["value"] : (isset(data,"value") ? data["value"] : ""); if (empty(options,'format')) options['format'] = 'Y-m-d'; // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['pikadaytime-instance-'+wid])) CNT['pikadaytime-instance-'+wid] = 0; self.enqueue('scripts', 'pikadaytime-instance-'+wid+(isBrowser ? '-'+(++CNT['pikadaytime-instance-'+wid]) : ''), ["(function(){\ var tries = 0, options = "+(json_encode(options))+";\ "+code.map(function(c) {return "options['"+c[0]+"'] = " + c[1].code + ";";}).join("\n")+"\ function render()\ {\ if ('undefined' === typeof(htmlwidgets) || 'function' !== typeof(Pikadaytime)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var locale = options.i18n, format = options.format;\ if ('function' === typeof(DateX))\ {\ var datetime_parse = DateX.getParser(format, locale);\ options.encoder = function(datetime) {return DateX.format(datetime, format, locale);};\ options.decoder = function(datetime) {return !!datetime && datetime_parse(datetime);};\ }\ else\ {\ options.encoder = function(datetime, pikaday) {return pikaday._o.showTime ? datetime.toString() : datetime.toDateString();};\ options.decoder = function(datetime) {return new Date(Date.parse(datetime));};\ }\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ " + (winit ? '('+winit+')(element, options);' : "options.field = element;\ element.pikadaytime = new Pikadaytime(options);\ htmlwidgets.addHandler(element, 'restore', function(element) {\ if (element.pikadaytime) {element.pikadaytime.dispose(); element.pikadaytime = null;}\ htmlwidgets.addHandler(element, 'restore', htmlwidgets.noop);\ });") + "\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js', 'pikadaytime']); return '<span class="'+wrapper_class+'" '+wstyle+'><input type="text" id="'+wid+'" '+wname+' '+wtitle+' class="'+wclass+'" placeholder="'+wplaceholder+'" value="'+wvalue+'" '+wextra+' />'+wicon+'</span>'; } ,w_time: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wvalue, wtitle, wname, wnam, wformat, wtimes, time_options, i, tt, t, p, f, selected; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wname = !empty(attr,"name") ? attr["name"] : ''; wtitle = !empty(attr,"title") ? 'title="'+attr["title"]+'"' : ''; wformat = !empty(attr,'format') ? attr['format'].split(':') : ["h","m","s"]; if (isset(data,'value')) { wvalue = is_array(data['value']) ? data['value'] : data['value'].split(':'); while (wvalue.length < 3) wvalue.push("00"); } else { wvalue = ["00", "00", "00"]; } wclass = 'w-widget w-time'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = self.attributes(attr,['readonly','disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); time_options = { 'h':[], 'm':[], 's':[] }; for (i=0; i<60; i++) { tt = i<10 ? '0'+i : ''+i; for (p=0; p<wformat.length; p++) { f = wformat[p]; if ('h' === f && i>=24) continue; selected = tt === wvalue[p] ? 'selected="selected"' : ''; time_options[f].push('<option value="'+tt+'" '+selected+'>'+tt+'</option>'); } } wtimes = []; for (p=0; p<wformat.length; p++) { t = wformat[p]; wnam = wname.length ? 'name="'+wname+'['+t+']"' : ''; wtimes.push('<select class="w-time-component" id="'+wid+'_'+t+'" '+wnam+' '+wtitle+' '+wextra+'>'+time_options[t].join('')+'</select>'); } wtimes = wtimes.join('<span class="w-time-sep">:</span>'); self.enqueue('styles', 'htmlwidgets.css'); return '<span class="'+wclass+'" '+wstyle+'>'+wtimes+'</span>'; } ,w_color: function(attr, data, widgetName) { // uses https://github.com/foo123/ColorPicker var wid, wclass, wstyle, wextra, winput, wname, wtitle, options, code, winit, titl, wplaceholder, input_id, wrapper_class, icon_class, ret; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wname = !empty(attr,"name") ? 'name="'+attr["name"]+'"' : ''; options = is_object(attr["options"]) ? attr["options"] : {}; code = self.extract_code(options); if (empty(options,'changeEvent')) options['changeEvent'] = 'change'; if (empty(options,'format')) options['format'] = 'rgba'; if (!isset(options,'color') && isset(data,'color')) options['color'] = data['color']; if (!isset(options,'opacity') && isset(data,'opacity')) options['opacity'] = data['opacity']; titl = isset(attr,"title") ? attr["title"] : ''; wtitle = !empty(titl) ? 'title="'+titl+'"' : ''; wplaceholder = isset(attr,'placeholder') ? attr['placeholder'] : titl; wclass = 'colorpicker-selector w-colorselector'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = self.attributes(attr,['readonly','disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); if (!empty(attr,'input')) { if (true === attr['input']) { input_id = wid; wid = "colorselector_"+input_id; options['input'] = input_id; wclass = 'w-widget w-text'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wrapper_class = 'w-wrapper'; icon_class = 'fa-wrapper'; if (!empty(attr,'iconr')) { wrapper_class += ' w-icon-right'; icon_class += ' right-fa'; } else { wrapper_class += ' w-icon'; icon_class += ' left-fa'; } if (!empty(attr,'selector-class')) icon_class += ' '+attr['selector-class']; ret = '<span class="'+wrapper_class+'" '+wstyle+'><input type="text" id="'+input_id+'" '+wname+' '+wtitle+' class="'+wclass+'" placeholder="'+wplaceholder+'" value="" '+wextra+' /><span id="'+wid+'" class="'+icon_class+' colorpicker-selector w-colorselector"></span></span>'; } else { if (!empty(attr,'selector-class')) wclass += ' '+attr['selector-class']; ret = '<input id="'+attr['input']+'" type="hidden" '+wname+' value="" style="display:none" />'+'<div id="'+wid+'" '+wtitle+' class="'+wclass+'" '+wstyle+' '+wextra+'></div>'; } } else { if (!empty(attr,'selector-class')) wclass += ' '+attr['selector-class']; ret = '<div id="'+wid+'" '+wtitle+' class="'+wclass+'" '+wstyle+' '+wextra+'></div>'; } // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['colorpicker-instance-'+wid])) CNT['colorpicker-instance-'+wid] = 0; self.enqueue('scripts', 'colorpicker-instance-'+wid+(isBrowser ? '-'+(++CNT['colorpicker-instance-'+wid]) : ''), ["(function(){\ var tries = 0, options = "+(json_encode(options))+";\ "+code.map(function(c) {return "options['"+c[0]+"'] = " + c[1].code + ";";}).join("\n")+"\ function render()\ {\ if ('undefined' === typeof(htmlwidgets) || 'function' !== typeof(ColorPicker)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ if (options.input) options.input = document.getElementById(options.input);\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ " + (winit ? '('+winit+')(element, options)' : "element.colorpicker = new ColorPicker(element, options);\ htmlwidgets.addHandler(element, 'restore', function(element) {\ if (element.colorpicker) {element.colorpicker.dispose(); element.colorpicker = null;}\ htmlwidgets.addHandler(element, 'restore', htmlwidgets.noop);\ });") + ";\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js', 'colorpicker']); return ret; } ,w_file: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wicon, wplaceholder, wvalue, wname, wtitle, wrapper_class, titl, winit; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wname = !empty(attr,"name") ? 'name="'+attr["name"]+'"' : ''; wvalue = isset(data,"value") ? data["value"] : ""; titl = isset(attr,"title") ? attr["title"] : ''; wtitle = !!titl ? 'title="'+titl+'"' : ''; wplaceholder = isset(attr,'placeholder') ? attr['placeholder'] : titl; wclass = 'w-widget w-file w-text'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wicon = ''; wrapper_class = 'w-wrapper'; if (!empty(attr,'icon')) { wicon += "<span class=\"fa-wrapper left-fa\"><i class=\"fa fa-" + attr['icon'] + "\"></i></span>"; wrapper_class += ' w-icon'; } if (!empty(attr,'iconr')) { wicon += "<span class=\"fa-wrapper right-fa\"><i class=\"fa fa-" + attr['iconr'] + "\"></i></span>"; wrapper_class += ' w-icon-right'; } wextra = self.attributes(attr,['accept','multiple','readonly','disabled','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); self.enqueue('styles', 'htmlwidgets.css'); if (isBrowser && (null == CNT['file-instance-'+wid])) CNT['file-instance-'+wid] = 0; self.enqueue('scripts', 'file-instance-'+wid+(isBrowser ? '-'+(++CNT['file-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ var input = document.getElementById('text_input_"+wid+"');\ if (element && input)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ " + (winit ? '('+winit+')(element, {input:input});' : "\ if (element.changehandler) {htmlwidgets.removeEvent(element, 'change', element.changehandler); element.changehandler = null;}\ htmlwidgets.addEvent(element, 'change', element.changehandler = function() {input.value = element.value;});\ htmlwidgets.addHandler(element, 'restore', function(element) {\ if (element.changehandler) {htmlwidgets.removeEvent(element, 'change', element.changehandler); element.changehandler = null;}\ htmlwidgets.addHandler(element, 'restore', htmlwidgets.noop);\ });") + "\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); return '<label for="'+wid+'" class="'+wrapper_class+'" '+wstyle+'><input type="file" id="'+wid+'" '+wname+' class="w-file-input" value="'+wvalue+'" '+wextra+' style="position:absolute;opacity:0;width:100%;z-index:-1;"/><input type="text" id="text_input_'+wid+'" '+wtitle+' class="'+wclass+'" placeholder="'+wplaceholder+'" value="'+wvalue+'" form="__NONE__" style="pointer-events:none"/>'+wicon+'</label>'; } ,w_table: function(attr, data, widgetName) { // may use https://datatables.net/ var wid, wclass, wstyle, wextra, wdata, wcolumns, wrows, wheader, wfooter, column_values, column_keys, row, rowid, rowk, rowv, r, c, rl, cl, options, code, winit; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wclass = 'w-widget w-table'; /* if ( !empty(attr,'stripped') ) wclass += ' stripped'; if ( !empty(attr,'bordered') ) wclass += ' bordered'; if ( !empty(attr,'responsive') ) wclass += ' responsive'; */ if (!empty(attr,"class")) wclass += ' '+attr["class"]; var plus_footer = !empty(attr['footer']); wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = !empty(attr,"extra") ? attr["extra"] : ''; wcolumns = ''; column_values = data['columns']; column_keys = KEYS(data_cols); cl = column_keys.length for (c=0; c<cl; c++) { wcolumns += "<th data-columnkey=\""+column_keys[c]+"\"><span>"+column_values[column_keys[c]]+"</span></th>"; } wcolumns = "<tr>"+wcolumns+"</tr>"; wheader = !isset(attr['header']) || !empty(attr['header']) ? '<thead>'+wcolumns+'</thead>' : ''; wfooter = !empty(attr['footer']) ? '<tfoot>'+wcolumns+'</tfoot>' : ''; wrows = ''; rl = data['rows'].length; for (r=0; r<rl; r++) { row = data['rows'][r]; rowid = null != row.id ? row.id : r; rowv = null != row.cells ? row.cells : row; rowk = KEYS(rowv); wrows += "\n" + "<tr data-row=\""+rowid+"\">"; for (c=0; c<cl; c++) { wrows += "<td data-columnkey=\""+column_keys[c]+"\" data-column=\""+column_values[column_keys[c]]+"\">"+rowv[rowk[c]]+"</td>"; } wrows += "</tr>"; } wdata = self.data(attr); self.enqueue('styles', 'htmlwidgets.css'); if (winit && empty(attr,'datatable')) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['table-instance-'+wid])) CNT['table-instance-'+wid] = 0; self.enqueue('scripts', 'table-instance-'+wid+(isBrowser ? '-'+(++CNT['table-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ ("+winit+")(element, {});\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } if (!!attr['datatable']) { options = is_object(attr["options"]) ? attr["options"] : {}; code = self.extract_code(options); wclass += ' w-datatable'; // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['datatable-instance-'+wid])) CNT['datatable-instance-'+wid] = 0; self.enqueue('scripts', 'datatable-instance-'+wid+(isBrowser ? '-'+(++CNT['datatable-instance-'+wid]) : ''), ["(function(){\ var tries = 0, options = "+(json_encode(options))+";\ "+code.map(function(c) {return "options['"+c[0]+"'] = " + c[1].code + ";";}).join("\n")+"\ function render()\ {\ if ('undefined' === typeof(htmlwidgets) || 'undefined' === typeof(jQuery) || 'function' !== typeof(jQuery.fn.DataTable)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ " + (winit ? '('+winit+')(element, options);' : "element.datatable = jQuery(element).DataTable(options);\ htmlwidgets.addHandler(element, 'restore', function(element) {\ if (element.datatable) {element.datatable.destroy(); element.datatable = null;}\ htmlwidgets.addHandler(element, 'restore', htmlwidgets.noop);\ });") + "\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js', 'datatables-all']); } return '<table id="'+wid+'" class="'+wclass+'" '+wstyle+' '+wextra+' '+wdata+'>'+wheader+'<tbody>'+wrows+'</tbody>'+wfooter+'</table>'; } ,w_tooltip: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wdata, wtitle, wtext, warrow; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wtext = isset(data,'text') ? data['text'] : ''; wtitle = isset(attr,'title') ? attr['title'] : wtext; wclass = 'w-tooltip'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = !empty(attr,"extra") ? attr["extra"] : ''; if (!empty(attr,'icon')) { wtext = "<i class=\"fa fa-" + attr['icon'] + " left-fa\"></i>" + wtext; } else if (!empty(attr,'iconr')) { wtext = wtext + "<i class=\"fa fa-" + attr['iconr'] + " right-fa\"></i>"; } if (!empty(attr,'tooltip')) { if ('top' === attr.toolip) warrow = '<div class="w-tooltip-arrow w-arrow-bottom"></div>'; else if ('bottom' === attr.toolip) warrow = '<div class="w-tooltip-arrow w-arrow-top"></div>'; else if ('right' === attr.toolip) warrow = '<div class="w-tooltip-arrow w-arrow-left"></div>'; else warrow = '<div class="w-tooltip-arrow w-arrow-right"></div>'; } else { warrow = '<div class="w-tooltip-arrow w-arrow-right"></div>'; } wdata = self.data(attr); self.enqueue('styles', 'htmlwidgets.css'); return '<div id="'+wid+'" class="'+wclass+'" '+wstyle+' '+wextra+' title="'+wtitle+'" '+wdata+'>'+wtext+warrow+'</div>'; } ,w_media: function(attr, data, widgetName) { var wid, wtype, wclass, wstyle, wextra, wtext, wsources, wsource, source, src, src_type, winit; wid = isset(attr,"id") ? attr["id"] : self.uuid(); winit = isset(attr,"init") && (attr["init"] instanceof HtmlWidget_Code) ? attr["init"].code : null; wtype = empty(attr,'type') ? "video" : attr['type']; if ('audio' !== wtype) wtype = 'video'; wclass = 'w-media w-'+wtype; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = self.attributes(attr,['title','width','height','src','controls','autoplay','loop','data'])+(!empty(attr,"extra") ? (' '+attr["extra"]) : ''); wtext = empty(data,'text') ? '' : data['text']; wsources = empty(data,'sources') ? [] : data['sources']; wsource = ''; for (var o=0,l=wsources.length; o<l; o++) { // NOTE: use HtmlWidget::options() to format options accordingly to be used here source = wsources[o]; src = source[0]; src_type = source[1]; wsource += '<source src="'+src+'" type="'+src_type+'" />'; } self.enqueue('scripts','html5media'); if (winit) { // if in browser and re-render, use dynamic id to re-enqueue if (isBrowser && (null == CNT['media-instance-'+wid])) CNT['media-instance-'+wid] = 0; self.enqueue('scripts', 'media-instance-'+wid+(isBrowser ? '-'+(++CNT['media-instance-'+wid]) : ''), ["(function(){\ var tries = 0;\ function render()\ {\ if ('undefined' === typeof(htmlwidgets)) {if (tries<10) {tries++; setTimeout(render, 100);} return;}\ var element = document.getElementById('"+wid+"');\ if (element)\ {\ htmlwidgets.getHandler(element, 'restore', htmlwidgets.noop)(element);\ ("+winit+")(element, {});\ }\ }\ window.requestAnimationFrame(render);\ })();"], ['htmlwidgets.js']); } return '<'+wtype+' id="'+wid+'" class="'+wclass+'" '+wstyle+' '+wextra+'>'+wsource+wtext+'</'+wtype+'>'; } ,w_modal: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wdata, wicon, wtitle, woverlay, wcontroller; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wcontroller = isset(attr,'controller') ? !empty(attr,'controller') : true; wclass = 'w-modal w-dialog'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = !empty(attr,"extra") ? attr["extra"] : ''; wtitle = isset(data,'title') ? data['title'] : ''; wicon = !empty(attr,'icon') ? "<i class=\"fa fa-" + attr['icon'] + "\"></i>" : ''; woverlay = wcontroller && !empty(attr,'autoclose') ? '<label for="modal_'+wid+'" class="w-modal-overlay" onclick="">' : '<div class="w-modal-overlay">'; wdata = self.data(attr); self.enqueue('styles', 'htmlwidgets.css'); return (wcontroller ? '<input id="modal_'+wid+'" type="checkbox" class="w-modal-controller" />' : '') + woverlay+'<div id="'+wid+'" class="'+wclass+'" '+wstyle+' '+wextra+' '+wdata+'><div class="w-dialog-title">'+wicon+wtitle+'<label for="modal_'+wid+'" class="w-label w-dialog-close" title="Close" onclick=""><i class="fa fa-times-circle"></i></label></div><div class="w-dialog-content">'; } ,w_modal_end: function(attr, data, widgetName) { var wbuttons, woverlay; wbuttons = isset(attr,'buttons') ? attr['buttons'] : ''; woverlay = !empty(attr,'autoclose') ? '</label>' : '</div>'; return '</div>'+(wbuttons && wbuttons.length ? '<div class="w-dialog-buttons">'+wbuttons+'</div>' : '')+'</div>'+woverlay; } ,w_menu: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wdata, out; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wclass = 'w-widget'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = !empty(attr,"extra") ? attr["extra"] : ''; wdata = self.data(attr); if (is_array(data) && data.length) { out = '<nav id="'+wid+'" class="'+wclass+'" '+wstyle+' '+wextra+' '+wdata+'>'+"\n"; if (empty(attr,'mobile')) { out += '<label for="mobile-menu_'+wid+'" class="w-menu-controller-bt"><i class="fa fa-bars fa-2x"></i>&nbsp;</label><input id="mobile-menu_'+wid+'" type="checkbox" class="w-menu-controller" value="1" />'+"\n"; } out += self.menu(data); out += '</nav>'; self.enqueue('styles', 'htmlwidgets.css'); return out; } else { return '<nav id="'+wid+'" class="'+wclass+'" '+wstyle+' '+wextra+' '+wdata+'>'; } } ,w_menu_end: function(attr, data, widgetName) { self.enqueue('styles', 'htmlwidgets.css'); return '</nav>'; } ,w_pagination: function(attr, data, widgetName) { // adapted from https://github.com/foo123/Paginator var wid, wclass, wstyle, wextra, totalItems, itemsPerPage, currentPage, maxPagesToShow, placeholder, urlPattern, previousText, nextText, ellipsis, numPages, pages, page, i, l, numAdjacents, slidingStart, slidingEnd, selectBox, out; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wclass = 'w-pagination pagination'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = !empty(attr,"extra") ? attr["extra"] : ''; totalItems = parseInt(data['totalItems']); itemsPerPage = parseInt(data['itemsPerPage']); currentPage = isset(data,'currentPage') ? parseInt(data['currentPage']) : 1; maxPagesToShow = isset(attr,'maxPages') ? parseInt(attr['maxPages']) : 10; placeholder = isset(attr,'placeholder') ? String(attr['placeholder']) : '(:page)'; urlPattern = isset(attr,'urlPattern') ? String(attr['urlPattern']) : '?page='+placeholder; previousText = isset(attr,'previousText') ? String(attr['previousText']) : '&laquo; Previous'; nextText = isset(attr,'nextText') ? String(attr['nextText']) : 'Next &raquo;'; ellipsis = isset(attr,'ellipsis') ? String(attr['ellipsis']) : '...'; selectBox = !empty(attr,'selectBox'); numPages = 0 >= itemsPerPage || 0 >= totalItems ? 0 : Math.ceil(totalItems/itemsPerPage); if (numPages > 1) { pages = []; if (numPages <= maxPagesToShow) { for (i=1; i<=numPages; ++i) { pages.push({ text : i, url : urlPattern.replace(placeholder, String(i)), isCurrent : i===currentPage }); } } else { // Determine the sliding range, centered around the current page. numAdjacents = Math.floor((maxPagesToShow - 3) / 2); if (currentPage + numAdjacents > numPages) { slidingStart = numPages - maxPagesToShow + 2; } else { slidingStart = currentPage - numAdjacents; } if (slidingStart < 2) slidingStart = 2; slidingEnd = slidingStart + maxPagesToShow - 3; if (slidingEnd >= numPages) slidingEnd = numPages - 1; // Build the list of pages. pages.push({ text : 1, url : urlPattern.replace(placeholder, String(1)), isCurrent : 1===currentPage }); if (slidingStart > 2) { pages.push({ text : ellipsis, url : null, isCurrent : false }); } for (i=slidingStart; i<=slidingEnd; ++i) { pages.push({ text : i, url : urlPattern.replace(placeholder, String(i)), isCurrent : i===currentPage }); } if (slidingEnd < numPages - 1) { pages.push({ text : ellipsis, url : null, isCurrent : false }); } pages.push({ text : numPages, url : urlPattern.replace(placeholder, String(numPages)), isCurrent : numPages===currentPage }); } if (selectBox) { out = '<div id="'+wid+'" class="'+wclass+'" '+wstyle+' '+wextra+'>'; if (currentPage > 1) { out += '<span class="page-previous"><a href="' + htmlspecialchars(urlPattern.replace(placeholder, String(currentPage-1))) + '">'+ previousText +'</a></span>'; } out += '<select class="page-select">'; for (i=0,l=pages.length; i<l; ++i) { page = pages[i]; if (page.url) { out += '<option value="' + htmlspecialchars(page.url) + '"' + (page.isCurrent ? ' selected' : '') + '>' + String(page.text) + '</option>'; } else { out += '<option disabled>' + String(page.text) + '</option>'; } } out += '</select>'; if (currentPage < numPages) { out += '<span class="page-next"><a href="' + htmlspecialchars(urlPattern.replace(placeholder, String(currentPage+1))) + '">'+ nextText +'</a></span>'; } out += '</div>'; } else { out = '<ul id="'+wid+'" class="'+wclass+'" '+wstyle+' '+wextra+'>'; if (currentPage > 1) { out += '<li class="page-previous"><a href="' + htmlspecialchars(urlPattern.replace(placeholder, String(currentPage-1))) + '">'+ previousText +'</a></li>'; } for (i=0,l=pages.length; i<l; ++i) { page = pages[i]; if (page.url) { out += '<li class="page-item' + (1==page.text ? ' page-first' : '') + (numPages==page.text ? ' page-last' : '') + (page.isCurrent ? ' page-active active' : '') + '"><a href="' + htmlspecialchars(page.url) + '">' + String(page.text) + '</a></li>'; } else { out += '<li class="page-item disabled"><span>' + String(page.text) + '</span></li>'; } } if (currentPage < numPages) { out += '<li class="page-next"><a href="' + htmlspecialchars(urlPattern.replace(placeholder, String(currentPage+1))) + '">'+ nextText +'</a></li>'; } out += '</ul>'; } self.enqueue('styles', 'htmlwidgets.css'); return out; } else { return ''; } } /*,w_sortable: function(attr, data, widgetName) { } ,w_selectable: function(attr, data, widgetName) { } ,w_removable: function(attr, data, widgetName) { }*/ ,w_delayable: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wspinner; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wclass = 'w-delayable-overlay'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = !empty(attr,"extra") ? attr["extra"] : ''; wspinner = 'w-spinner'; wspinner += !empty(attr,'spinner') ? " "+attr['spinner'] : " w-spinner-dots"; self.enqueue('styles', 'htmlwidgets.css'); return '<div id="'+wid+'" class="'+wclass+'" '+wstyle+' '+wextra+'><div class="'+wspinner+'"></div></div>'; } ,w_disabable: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wclass = 'w-disabable-overlay'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = !empty(attr,"extra") ? attr["extra"] : ''; self.enqueue('styles', 'htmlwidgets.css'); return '<div id="'+wid+'" class="'+wclass+'" '+wstyle+' '+wextra+'></div>'; } ,w_morphable: function(attr, data, widgetName) { var wid, wclass, wstyle, wmodes, wmode_class, wshow_class, whide_class, wselector, wselector_animated, wshow_selector, whide_selector, wshow_selector_animated, whide_selector_animated, wshow_selector__important, whide_selector__important, wshow_selector_animated__important, whide_selector_animated__important, whide_sel, whide_not_sel, wshow_sel, wshow_not_sel, mode_class; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wclass = 'w-morphable'; wmodes = [].concat(attr['modes']); wmode_class = !empty(attr,'mode') ? attr['mode'] : 'mode-${MODE}'; wshow_class = !empty(attr,'show') ? attr['show'] : 'show-if-${MODE}'; whide_class = !empty(attr,'hide') ? attr['hide'] : 'hide-if-${MODE}'; wselector = '#'+wid+'.w-morphable:not(.w-animated-morphable)'; wselector_animated = '#'+wid+'.w-morphable.w-animated-morphable'; wshow_selector = []; whide_selector = []; wshow_selector__important = []; whide_selector__important = []; wshow_selector_animated = []; whide_selector_animated = []; wshow_selector_animated__important = []; whide_selector_animated__important = []; var i, j, l = wmodes.length; for (i=0; i<l; i++) { mode_class = wmode_class.split('${MODE}').join(wmodes[i]); whide_sel = ' .w-morphable-item.' + whide_class.split('${MODE}').join(wmodes[i]); whide_not_sel = ' .w-morphable-item.' + whide_class.split('${MODE}').join('not-'+wmodes[i]); wshow_sel = ' .w-morphable-item.' + wshow_class.split('${MODE}').join(wmodes[i]); wshow_not_sel = ' .w-morphable-item.' + wshow_class.split('${MODE}').join('not-'+wmodes[i]); /* SHOW < HIDE, SHOW default mode + show =====> SHOW !important mode + hide =====> HIDE !important !mode + hide_not =====> HIDE !mode + show_not =====> SHOW !mode + show =====> HIDE !mode + hide =====> SHOW mode + hide_not =====> SHOW mode + show_not =====> HIDE else =====> LEAVE AS IS CSS selectors are LINEAR O(n) in the number of options/modes inluding AND/OR operations between modes */ // 1st level only wshow_selector.push( wselector+'.w-morphable-level-1 > .w-morphable-item' ); wshow_selector_animated.push( wselector_animated+'.w-morphable-level-1 > .w-morphable-item' ); whide_selector__important.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector+'.w-morphable-level-1 >'+whide_sel ); whide_selector__important.push( wselector+'.w-morphable-class.'+mode_class+'.w-morphable-level-1 >'+whide_sel ); whide_selector.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector+'.w-morphable-level-1 >'+wshow_sel ); whide_selector.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector+'.w-morphable-level-1 >'+wshow_not_sel ); whide_selector.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector+'.w-morphable-level-1 >'+whide_not_sel ); whide_selector.push( wselector+'.w-morphable-class:not(.'+mode_class+').w-morphable-level-1 >'+wshow_sel ); whide_selector.push( wselector+'.w-morphable-class.'+mode_class+'.w-morphable-level-1 >'+wshow_not_sel ); whide_selector.push( wselector+'.w-morphable-class:not(.'+mode_class+').w-morphable-level-1 >'+whide_not_sel ); wshow_selector__important.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector+'.w-morphable-level-1 >'+wshow_sel ); wshow_selector__important.push( wselector+'.w-morphable-class.'+mode_class+'.w-morphable-level-1 >'+wshow_sel ); wshow_selector.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector+'.w-morphable-level-1 >'+whide_sel ); wshow_selector.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector+'.w-morphable-level-1 >'+whide_not_sel ); wshow_selector.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector+'.w-morphable-level-1 >'+wshow_not_sel ); wshow_selector.push( wselector+'.w-morphable-class:not(.'+mode_class+').w-morphable-level-1 >'+whide_sel ); wshow_selector.push( wselector+'.w-morphable-class.'+mode_class+'.w-morphable-level-1 >'+whide_not_sel ); wshow_selector.push( wselector+'.w-morphable-class:not(.'+mode_class+').w-morphable-level-1 >'+wshow_not_sel ); whide_selector_animated__important.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector_animated+'.w-morphable-level-1 >'+whide_sel ); whide_selector_animated__important.push( wselector_animated+'.w-morphable-class.'+mode_class+'.w-morphable-level-1 >'+whide_sel ); whide_selector_animated.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector_animated+'.w-morphable-level-1 >'+wshow_sel ); whide_selector_animated.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector_animated+'.w-morphable-level-1 >'+wshow_not_sel ); whide_selector_animated.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector_animated+'.w-morphable-level-1 >'+whide_not_sel ); whide_selector_animated.push( wselector_animated+'.w-morphable-class:not(.'+mode_class+').w-morphable-level-1 >'+wshow_sel ); whide_selector_animated.push( wselector_animated+'.w-morphable-class.'+mode_class+'.w-morphable-level-1 >'+wshow_not_sel ); whide_selector_animated.push( wselector_animated+'.w-morphable-class:not(.'+mode_class+').w-morphable-level-1 >'+whide_not_sel ); wshow_selector_animated__important.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector_animated+'.w-morphable-level-1 >'+wshow_sel ); wshow_selector_animated__important.push( wselector_animated+'.w-morphable-class.'+mode_class+'.w-morphable-level-1 >'+wshow_sel ); wshow_selector_animated.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector_animated+'.w-morphable-level-1 >'+whide_sel ); wshow_selector_animated.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector_animated+'.w-morphable-level-1 >'+whide_not_sel ); wshow_selector_animated.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector_animated+'.w-morphable-level-1 >'+wshow_not_sel ); wshow_selector_animated.push( wselector_animated+'.w-morphable-class:not(.'+mode_class+').w-morphable-level-1 >'+whide_sel ); wshow_selector_animated.push( wselector_animated+'.w-morphable-class.'+mode_class+'.w-morphable-level-1 >'+whide_not_sel ); wshow_selector_animated.push( wselector_animated+'.w-morphable-class:not(.'+mode_class+').w-morphable-level-1 >'+wshow_not_sel ); // any level wshow_selector.push( wselector+':not(.w-morphable-level-1) .w-morphable-item' ); wshow_selector_animated.push( wselector_animated+':not(.w-morphable-level-1) .w-morphable-item' ); whide_selector__important.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector+':not(.w-morphable-level-1)'+whide_sel ); whide_selector__important.push( wselector+'.w-morphable-class.'+mode_class+':not(.w-morphable-level-1)'+whide_sel ); whide_selector.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector+':not(.w-morphable-level-1)'+wshow_sel ); whide_selector.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector+':not(.w-morphable-level-1)'+wshow_not_sel ); whide_selector.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector+':not(.w-morphable-level-1)'+whide_not_sel ); whide_selector.push( wselector+'.w-morphable-class:not(.'+mode_class+'):not(.w-morphable-level-1)'+wshow_sel ); whide_selector.push( wselector+'.w-morphable-class.'+mode_class+':not(.w-morphable-level-1)'+wshow_not_sel ); whide_selector.push( wselector+'.w-morphable-class:not(.'+mode_class+'):not(.w-morphable-level-1)'+whide_not_sel ); wshow_selector__important.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector+':not(.w-morphable-level-1)'+wshow_sel ); wshow_selector__important.push( wselector+'.w-morphable-class.'+mode_class+':not(.w-morphable-level-1)'+wshow_sel ); wshow_selector.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector+':not(.w-morphable-level-1)'+whide_sel ); wshow_selector.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector+':not(.w-morphable-level-1)'+whide_not_sel ); wshow_selector.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector+':not(.w-morphable-level-1)'+wshow_not_sel ); wshow_selector.push( wselector+'.w-morphable-class:not(.'+mode_class+'):not(.w-morphable-level-1)'+whide_sel ); wshow_selector.push( wselector+'.w-morphable-class.'+mode_class+':not(.w-morphable-level-1)'+whide_not_sel ); wshow_selector.push( wselector+'.w-morphable-class:not(.'+mode_class+'):not(.w-morphable-level-1)'+wshow_not_sel ); whide_selector_animated__important.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector_animated+':not(.w-morphable-level-1)'+whide_sel ); whide_selector_animated__important.push( wselector_animated+'.w-morphable-class.'+mode_class+':not(.w-morphable-level-1)'+whide_sel ); whide_selector_animated.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector_animated+':not(.w-morphable-level-1)'+wshow_sel ); whide_selector_animated.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector_animated+':not(.w-morphable-level-1)'+wshow_not_sel ); whide_selector_animated.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector_animated+':not(.w-morphable-level-1)'+whide_not_sel ); whide_selector_animated.push( wselector_animated+'.w-morphable-class:not(.'+mode_class+'):not(.w-morphable-level-1)'+wshow_sel ); whide_selector_animated.push( wselector_animated+'.w-morphable-class.'+mode_class+':not(.w-morphable-level-1)'+wshow_not_sel ); whide_selector_animated.push( wselector_animated+'.w-morphable-class:not(.'+mode_class+'):not(.w-morphable-level-1)'+whide_not_sel ); wshow_selector_animated__important.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector_animated+':not(.w-morphable-level-1)'+wshow_sel ); wshow_selector_animated__important.push( wselector_animated+'.w-morphable-class.'+mode_class+':not(.w-morphable-level-1)'+wshow_sel ); wshow_selector_animated.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector_animated+':not(.w-morphable-level-1)'+whide_sel ); wshow_selector_animated.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:checked ~ '+wselector_animated+':not(.w-morphable-level-1)'+whide_not_sel ); wshow_selector_animated.push( 'input[data-morph-'+wid+'="'+mode_class+'"]:not(:checked) ~ '+wselector_animated+':not(.w-morphable-level-1)'+wshow_not_sel ); wshow_selector_animated.push( wselector_animated+'.w-morphable-class:not(.'+mode_class+'):not(.w-morphable-level-1)'+whide_sel ); wshow_selector_animated.push( wselector_animated+'.w-morphable-class.'+mode_class+':not(.w-morphable-level-1)'+whide_not_sel ); wshow_selector_animated.push( wselector_animated+'.w-morphable-class:not(.'+mode_class+'):not(.w-morphable-level-1)'+wshow_not_sel ); } wstyle = ''; wstyle += whide_selector.join(',') + '{display: none !important}'; wstyle += wshow_selector.join(',') + '{display: block}'; wstyle += whide_selector__important.join(',') + '{display: none !important}'; wstyle += wshow_selector__important.join(',') + '{display: block !important}'; wstyle += whide_selector_animated.join(',') + '{\ pointer-events: none !important; overflow: hidden !important;\ min-width: 0 !important; max-width: 0 !important;\ min-height: 0 !important; max-height: 0 !important; opacity: 0 !important;\ -webkit-transition: opacity 0.4s ease, max-width 0.6s ease 0.2s, max-height 0.6s ease 0.2s;\ -moz-transition: opacity 0.4s ease, max-width 0.6s ease 0.2s, max-height 0.6s ease 0.2s;\ -ms-transition: opacity 0.4s ease, max-width 0.6s ease 0.2s, max-height 0.6s ease 0.2s;\ -o-transition: opacity 0.4s ease, max-width 0.6s ease 0.2s, max-height 0.6s ease 0.2s;\ transition: opacity 0.4s ease, max-width 0.6s ease 0.2s, max-height 0.6s ease 0.2s;\ }'; wstyle += wshow_selector_animated.join(',') + '{\ overflow: hidden !important;\ min-width: 0 !important; max-width: 5000px; min-height: 0 !important; max-height: 5000px; opacity: 1;\ -webkit-transition: opacity 0.4s ease 0.2s, max-width 0.6s ease, max-height 0.6s ease;\ -moz-transition: opacity 0.4s ease 0.2s, max-width 0.6s ease, max-height 0.6s ease;\ -ms-transition: opacity 0.4s ease 0.2s, max-width 0.6s ease, max-height 0.6s ease;\ -o-transition: opacity 0.4s ease 0.2s, max-width 0.6s ease, max-height 0.6s ease;\ transition: opacity 0.4s ease 0.2s, max-width 0.6s ease, max-height 0.6s ease;\ }'; wstyle += whide_selector_animated__important.join(',') + '{\ pointer-events: none !important; overflow: hidden !important;\ min-width: 0 !important; max-width: 0 !important;\ min-height: 0 !important; max-height: 0 !important; opacity: 0 !important;\ -webkit-transition: opacity 0.4s ease, max-width 0.6s ease 0.2s, max-height 0.6s ease 0.2s;\ -moz-transition: opacity 0.4s ease, max-width 0.6s ease 0.2s, max-height 0.6s ease 0.2s;\ -ms-transition: opacity 0.4s ease, max-width 0.6s ease 0.2s, max-height 0.6s ease 0.2s;\ -o-transition: opacity 0.4s ease, max-width 0.6s ease 0.2s, max-height 0.6s ease 0.2s;\ transition: opacity 0.4s ease, max-width 0.6s ease 0.2s, max-height 0.6s ease 0.2s;\ }'; wstyle += wshow_selector_animated__important.join(',') + '{\ overflow: hidden !important;\ min-width: 0 !important; max-width: 5000px !important; min-height: 0 !important; max-height: 5000px !important; opacity: 1 !important;\ -webkit-transition: opacity 0.4s ease 0.2s, max-width 0.6s ease, max-height 0.6s ease;\ -moz-transition: opacity 0.4s ease 0.2s, max-width 0.6s ease, max-height 0.6s ease;\ -ms-transition: opacity 0.4s ease 0.2s, max-width 0.6s ease, max-height 0.6s ease;\ -o-transition: opacity 0.4s ease 0.2s, max-width 0.6s ease, max-height 0.6s ease;\ transition: opacity 0.4s ease 0.2s, max-width 0.6s ease, max-height 0.6s ease;\ }'; /*wstyle = { hide_mode: { selector: whide_selector.join(','), rules: [ 'display: none !important' ] }, show_mode: { selector: wshow_selector.join(','), rules: [ 'display: block' ] } };*/ self.enqueue('styles', "w-morphable-"+wid, [wstyle], ['htmlwidgets.css']); return ''; } ,w_panel: function(attr, data, widgetName) { var wid, wclass, wstyle, wextra, wtitle, wchecked, wdata; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wclass = 'w-panel'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wtitle = !empty(attr,'title') ? attr['title'] : '&nbsp;'; wchecked = !empty(attr,'opened') ? 'checked' : ''; wextra = !empty(attr,"extra") ? attr["extra"] : ''; wdata = self.data(attr); self.enqueue('styles', 'htmlwidgets.css'); return '<input type="checkbox" id="controller_'+wid+'" class="w-panel-controller" value="1" '+wchecked+'/><div id="'+wid+'" class="'+wclass+'" '+wstyle+' '+wextra+' '+wdata+'><div class="w-panel-header">'+wtitle+'<label class="w-panel-controller-button fa fa-2x" for="controller_'+wid+'" onclick=""></label></div><div class="w-panel-content">'; } ,w_panel_end: function(attr, data, widgetName) { return '</div></div>'; } ,w_accordeon: function(attr, data, widgetName) { var wid, wstyle, wcontext, wtype, witems, i, l, wcontrollers, wctrl, wselector, wselected, wheight; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wcontext = !empty(attr,'context') ? (attr['context']+" ") : ""; wheight = !empty(attr,'height') ? attr['height'] : '1500px'; wtype = !empty(attr,'independent') ? 'checkbox' : 'radio'; witems = [].concat(attr['items']); wctrl = "ctrl_"+wid; wcontrollers = "<input name=\""+wctrl+"\" type=\""+wtype+"\" id=\"item_" + witems.join( "\" class=\"w-transition-controller w-"+wctrl+"-controller\"/><input name=\""+wctrl+"\" type=\""+wtype+"\" id=\"item_" ) + "\" class=\"w-transition-controller w-"+wctrl+"-controller\"/>"; wstyle = ''; // de-activate wselector = []; for (i=0,l=witems.length; i<l; i++) wselector.push(".w-"+wctrl+"-controller.w-transition-controller:not(#item_"+witems[i]+"):checked ~ "+wcontext+"#"+witems[i]+""); wstyle += '\ '+wselector.join(',')+'\ {\ max-height: 0;\ -webkit-transition: max-height .3s ease;\ -moz-transition: max-height .3s ease;\ -ms-transition: max-height .3s ease;\ -o-transition: max-height .3s ease;\ transition: max-height .3s ease;\ }\ '; // activate wselector = []; for (i=0,l=witems.length; i<l; i++) wselector.push("#item_"+witems[i]+".w-"+wctrl+"-controller.w-transition-controller:checked ~ "+wcontext+"#"+witems[i]+""); wstyle += '\ '+wselector.join(',')+'\ {\ max-height: '+wheight+';\ -webkit-transition: max-height .2s ease .1s;\ -moz-transition: max-height .2s ease .1s;\ -ms-transition: max-height .2s ease .1s;\ -o-transition: max-height .2s ease .1s;\ transition: max-height .2s ease .1s;\ }\ '; self.enqueue('styles', "w-accordeon-"+wid, [wstyle], ['htmlwidgets.css']); return wcontrollers; } ,w_tabs: function(attr, data, widgetName) { var wid, wstyle, wcontext, wtabs, i, l, wcontrollers, wctrl, wselector, wselected, wtransform1, wtransform2; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wcontext = !empty(attr,'context') ? (attr['context']+" ") : ""; wtabs = [].concat(attr['tabs']); if (!empty(attr['3d'])) { wtransform1 = 'w-fx-slideout-3d'; wtransform2 = 'w-fx-slidein-3d'; } else { wtransform1 = 'w-fx-slideout'; wtransform2 = 'w-fx-slidein'; } wctrl = "ctrl_"+wid; wcontrollers = "<input name=\""+wctrl+"\" checked type=\"radio\" id=\"tab_" + wtabs.join( "\" class=\"w-transition-controller w-"+wctrl+"-controller\"/><input name=\""+wctrl+"\" type=\"radio\" id=\"tab_" ) + "\" class=\"w-transition-controller w-"+wctrl+"-controller\"/>"; wstyle = ''; // de-activate wselector = []; for (i=0,l=wtabs.length; i<l; i++) wselector.push(".w-"+wctrl+"-controller.w-transition-controller:not(#tab_"+wtabs[i]+"):checked ~ "+wcontext+"#"+wtabs[i]+""); wstyle += '\ '+wselector.join(',')+'\ {\ position: absolute;\ \ -webkit-animation-name: '+wtransform1+';\ -moz-animation-name: '+wtransform1+';\ -ms-animation-name: '+wtransform1+';\ -o-animation-name: '+wtransform1+';\ animation-name: '+wtransform1+';\ \ -webkit-animation-timing-function: ease-out;\ -moz-animation-timing-function: ease-out;\ -ms-animation-timing-function: ease-out;\ -o-animation-timing-function: ease-out;\ animation-timing-function: ease-out;\ }\ '; // activate wselector = []; for (i=0,l=wtabs.length; i<l; i++) wselector.push("#tab_"+wtabs[i]+".w-"+wctrl+"-controller.w-transition-controller:checked ~ "+wcontext+"#"+wtabs[i]+""); wstyle += '\ '+wselector.join(',')+'\ {\ position: relative;\ z-index: 10;\ \ -webkit-animation-name: '+wtransform2+';\ -moz-animation-name: '+wtransform2+';\ -ms-animation-name: '+wtransform2+';\ -o-animation-name: '+wtransform2+';\ animation-name: '+wtransform2+';\ \ -webkit-animation-timing-function: ease-in;\ -moz-animation-timing-function: ease-in;\ -ms-animation-timing-function: ease-in;\ -o-animation-timing-function: ease-in;\ animation-timing-function: ease-in;\ }\ '; self.enqueue('styles', "w-tabs-"+wid, [wstyle], ['htmlwidgets.css']); return wcontrollers; } ,w_pages: function(attr, data, widgetName) { var wid, wstyle, wcontext, wpages, main_page, i, l, wcontrollers, wselector, wtransform1, wtransform2, wtransform3; wid = isset(attr,"id") ? attr["id"] : self.uuid(); wcontext = !empty(attr,'context') ? (attr['context']+" ") : ""; wpages = [].concat(attr['pages']); if (!empty(attr['3d'])) { wtransform1 = 'translate3d(0px,0px,0px)'; wtransform2 = 'translate3d(-100%,0px,0px)'; wtransform3 = 'translate3d(100%,0px,0px)'; } else { wtransform1 = 'translateX(0px)'; wtransform2 = 'translateX(-100%)'; wtransform3 = 'translateX(100%)'; } wcontrollers = "<span id=\"page_" + wpages.join( "\" class=\"w-page-controller\"></span><span id=\"page_" ) + "\" class=\"w-page-controller\"></span>"; wstyle = ''; // main page main_page = wpages.shift(); wstyle += '\ #'+main_page+'.w-page\ {\ position: relative;\ -webkit-transform: '+wtransform1+';\ -moz-transform: '+wtransform1+';\ -ms-transform: '+wtransform1+';\ -o-transform: '+wtransform1+';\ transform: '+wtransform1+';\ }\ .w-page-controller:not(#page_'+main_page+'):target ~ '+wcontext+'#'+main_page+'.w-page\ {\ position: absolute;\ \ -webkit-transform: '+wtransform2+';\ -moz-transform: '+wtransform2+';\ -ms-transform: '+wtransform2+';\ -o-transform: '+wtransform2+';\ transform: '+wtransform2+';\ \ -webkit-transition: -webkit-transform .3s ease;\ -moz-transition: -moz-transform .3s ease;\ -ms-transition: -ms-transform .3s ease;\ -o-transition: -o-transform .3s ease;\ transition: transform .3s ease;\ }\ '; // rest pages wselector = []; for (i=0,l=wpages.length; i<l; i++) wselector.push('#page_'+wpages[i]+'.w-page-controller:not(:target) ~ '+wcontext+'#'+wpages[i]+'.w-page'); wstyle += '\ '+wselector.join(',')+'\ {\ -webkit-transform: '+wtransform3+';\ -moz-transform: '+wtransform3+';\ -ms-transform: '+wtransform3+';\ -o-transform: '+wtransform3+';\ transform: '+wtransform3+';\ }\ '; wselector = []; for (i=0,l=wpages.length; i<l; i++) wselector.push('#page_'+wpages[i]+'.w-page-controller:target ~ '+wcontext+'#'+wpages[i]+'.w-page'); wstyle += '\ '+wselector.join(',')+'\ {\ position: relative;\ \ -webkit-transform: '+wtransform1+';\ -moz-transform: '+wtransform1+';\ -ms-transform: '+wtransform1+';\ -o-transform: '+wtransform1+';\ transform: '+wtransform1+';\ \ -webkit-transition: -webkit-transform .3s ease;\ -moz-transition: -moz-transform .3s ease;\ -ms-transition: -ms-transform .3s ease;\ -o-transition: -o-transform .3s ease;\ transition: transform .3s ease;\ }\ '; self.enqueue('styles', "w-pages-"+wid, [wstyle], ['htmlwidgets.css']); return wcontrollers; } ,w_animation: function(attr, data, widgetName) { var wid, wselector, wanimation, wtransition, wduration, wdelay, wtiming_function, weasing, witeration_count, wfill_mode, wanimation_def; wid = isset(attr,"id") ? attr["id"] : self.uuid('widget_animation'); wselector = isset(attr,"selector") ? attr["selector"] : '.animate-'+wid; wanimation = !empty(attr,'animation') ? attr['animation'] : ''; wtransition = !empty(attr,'transition') ? attr['transition'] : ''; wduration = isset(attr,'duration') ? attr['duration'] : '0.5s'; wdelay = isset(attr,'delay') ? attr['delay'] : '0s'; wtiming_function = !empty(attr,'timing-function') ? attr['timing-function'] : ''; weasing = !empty(attr,'easing') ? attr['easing'] : 'linear'; if (!wtiming_function.length) wtiming_function = weasing; witeration_count = !empty(attr,'iteration-count') ? attr['iteration-count'] : '1'; wfill_mode = !empty(attr,'fill-mode') ? attr['fill-mode'] : 'both'; wanimation_def = ''; if (wanimation.length) { wanimation_def += '\ '+wselector+'\ {\ -webkit-animation-duration: '+wduration+';\ -moz-animation-duration: '+wduration+';\ -ms-animation-duration: '+wduration+';\ -o-animation-duration: '+wduration+';\ animation-duration: '+wduration+';\ \ -webkit-animation-delay: '+wdelay+';\ -moz-animation-delay: '+wdelay+';\ -ms-animation-delay: '+wdelay+';\ -o-animation-delay: '+wdelay+';\ animation-delay: '+wdelay+';\ \ -webkit-animation-iteration-count: '+witeration_count+';\ -moz-animation-iteration-count: '+witeration_count+';\ -ms-animation-iteration-count: '+witeration_count+';\ -o-animation-iteration-count: '+witeration_count+';\ animation-iteration-count: '+witeration_count+';\ \ -webkit-animation-timing-function: '+wtiming_function+';\ -moz-animation-timing-function: '+wtiming_function+';\ -ms-animation-timing-function: '+wtiming_function+';\ -o-animation-timing-function: '+wtiming_function+';\ animation-timing-function: '+wtiming_function+';\ \ -webkit-animation-fill-mode: '+wfill_mode+';\ -moz-animation-fill-mode: '+wfill_mode+';\ -ms-animation-fill-mode: '+wfill_mode+';\ -o-animation-fill-mode: '+wfill_mode+';\ animation-fill-mode: '+wfill_mode+';\ \ -webkit-animation-name: '+wid+';\ -moz-animation-name: '+wid+';\ -ms-animation-name: '+wid+';\ -o-animation-name: '+wid+';\ animation-name: '+wid+';\ }\ @-webkit-keyframes '+wid+'\ {\ '+wanimation+'\ }\ @keyframes '+wid+'\ {\ '+wanimation+'\ }\ '; } if (wtransition.length) { wanimation_def += '\ '+wselector+'\ {\ -webkit-transition: '+wtransition+' '+wduration+' '+wtiming_function+' '+wdelay+';\ -moz-transition: '+wtransition+' '+wduration+' '+wtiming_function+' '+wdelay+';\ -ms-transition: '+wtransition+' '+wduration+' '+wtiming_function+' '+wdelay+';\ -o-transition: '+wtransition+' '+wduration+' '+wtiming_function+' '+wdelay+';\ transition: '+wtransition+' '+wduration+' '+wtiming_function+' '+wdelay+';\ }\ '; } self.enqueue('styles', 'w-animation-'+wid, [wanimation_def], ['htmlwidgets.css']); return ''; } ,w_sprite: function(attr, data, widgetName) { var wid, wtext, wtitle, wclass, wstyle, wextra, wsprite, wanimation, witer, wfps, ww, wh, wr, wc, d, nframes, wsprite_def, two_dim_grid, attX, attY, iniX, iniY, finX, finY, factX = 1, factY = 1, aspect_ratio, background_size, animation_name, animation_duration, animation_delay, animation_timing, animation_iteration; wid = isset(attr,"id") ? attr["id"] : self.uuid('widget_sprite'); wtext = isset(data,'text') ? data['text'] : ''; wtitle = isset(attr,'title') ? attr['title'] : wtext; wstyle = !empty(attr,"style") ? 'style="'+attr["style"]+'"' : ''; wextra = !empty(attr,"extra") ? attr["extra"] : ''; wanimation = isset(attr,"animation") ? attr["animation"] : 'sprite-'+wid; wclass = 'w-sprite '+wanimation+'-class'; if (!empty(attr,"class")) wclass += ' '+attr["class"]; wsprite = isset(attr,"sprite") ? attr["sprite"] : wid; witer = isset(attr,"iteration") ? attr["iteration"] : 'infinite'; wfps = isset(attr,'fps') ? +attr['fps'] : 12; ww = isset(attr,'width') ? +attr['width'] : 100; wh = isset(attr,'height') ? +attr['height'] : 100; wr = isset(attr,'rows') ? +attr['rows'] : 1; wc = isset(attr,'columns') ? +attr['columns'] : 1; nframes = wr*wc; d = nframes/wfps; factX = wc; factY = wr; aspect_ratio = 100*wh/ww; background_size = ''+(100*wc)+'% '+(100*wr)+'%'; /*if ( (-1 < (' '+wclass+' ').indexOf(' w-sprite-responsive ')) || (-1 < (' '+wclass+' ').indexOf(' sprite-responsive ')) ) { factX = wc; factY = wr; }*/ if ((1 < wr) && (1 < wc)) { // background-position-x, background-position-y NOT supported very well two_dim_grid = true; attX = "background-position-x"; attY = "background-position-y"; iniX = "0%"; iniY = "0%"; finX = "-"+(factX*100)+"%"; finY = "-"+(factY*100)+"%"; animation_name = wanimation+"-grid-x, "+wanimation+"-grid-y"; animation_duration = ''+(d/wr)+'s, '+d+'s'; animation_delay = '0s, 0s'; animation_timing = "steps("+wc+"), steps("+wr+")"; animation_iteration = ""+witer+", "+witer; } else if (1 < wr) { two_dim_grid = false; attX = "background-position"; iniX = "0% 0%"; finX = "0% -"+(factY*100)+"%"; animation_name = wanimation+"-grid-x"; animation_duration = ''+d+'s'; animation_delay = '0s'; animation_timing = "steps("+wr+")"; animation_iteration = witer; } else { two_dim_grid = false; attX = "background-position"; iniX = "0% 0%"; finX = "-"+(factX*100)+"% 0%"; animation_name = wanimation+"-grid-x"; animation_duration = ''+d+'s'; animation_delay = '0s'; animation_timing = "steps("+wc+")"; animation_iteration = witer; } wsprite_def = '\ #'+wid+'.w-sprite.'+wanimation+'-class\ {\ width: '+ww+'px; height: '+wh+'px;\ background-image: url("'+wsprite+'");\ background-repeat: none;\ background-position: 0% 0%;\ background-size: auto auto;\ -webkit-animation-name: '+animation_name+';\ -webkit-animation-duration: '+animation_duration+';\ -webkit-animation-delay: '+animation_delay+';\ -webkit-animation-timing-function: '+animation_timing+';\ -webkit-animation-iteration-count: '+animation_iteration+';\ -moz-animation-name: '+animation_name+';\ -moz-animation-duration: '+animation_duration+';\ -moz-animation-delay: '+animation_delay+';\ -moz-animation-timing-function: '+animation_timing+';\ -moz-animation-iteration-count: '+animation_iteration+';\ -ms-animation-name: '+animation_name+';\ -ms-animation-duration: '+animation_duration+';\ -ms-animation-delay: '+animation_delay+';\ -ms-animation-timing-function: '+animation_timing+';\ -ms-animation-iteration-count: '+animation_iteration+';\ -o-animation-name: '+animation_name+';\ -o-animation-duration: '+animation_duration+';\ -o-animation-delay: '+animation_delay+';\ -o-animation-timing-function: '+animation_timing+';\ -o-animation-iteration-count: '+animation_iteration+';\ animation-name: '+animation_name+';\ animation-duration: '+animation_duration+';\ animation-delay: '+animation_delay+';\ animation-timing-function: '+animation_timing+';\ animation-iteration-count: '+animation_iteration+';\ }\ #'+wid+'.w-sprite.responsive.'+wanimation+'-class,\ #'+wid+'.w-sprite.sprite-responsive.'+wanimation+'-class,\ #'+wid+'.w-sprite.w-sprite-responsive.'+wanimation+'-class\ {\ width: 100% !important; height: auto !important;\ padding-bottom: '+aspect_ratio+'% !important;\ background-size: '+background_size+' !important;\ }\ @-webkit-keyframes '+wanimation+'-grid-x {\ 0% { '+attX+': '+iniX+'; }\ 100% { '+attX+': '+finX+'; }\ }\ @-moz-keyframes '+wanimation+'-grid-x {\ 0% { '+attX+': '+iniX+'; }\ 100% { '+attX+': '+finX+'; }\ }\ @-ms-keyframes '+wanimation+'-grid-x {\ 0% { '+attX+': '+iniX+'; }\ 100% { '+attX+': '+finX+'; }\ }\ @-o-keyframes '+wanimation+'-grid-x {\ 0% { '+attX+': '+iniX+'; }\ 100% { '+attX+': '+finX+'; }\ }\ @keyframes '+wanimation+'-grid-x {\ 0% { '+attX+': '+iniX+'; }\ 100% { '+attX+': '+finX+'; }\ }\ '; if ( two_dim_grid ) { wsprite_def += "\n"+'\ @-webkit-keyframes '+wanimation+'-grid-y {\ 0% { '+attY+': '+iniY+'; }\ 100% { '+attY+': '+finY+'; }\ }\ @-moz-keyframes '+wanimation+'-grid-y {\ 0% { '+attY+': '+iniY+'; }\ 100% { '+attY+': '+finY+'; }\ }\ @-ms-keyframes '+wanimation+'-grid-y {\ 0% { '+attY+': '+iniY+'; }\ 100% { '+attY+': '+finY+'; }\ }\ @-o-keyframes '+wanimation+'-grid-y {\ 0% { '+attY+': '+iniY+'; }\ 100% { '+attY+': '+finY+'; }\ }\ @keyframes '+wanimation+'-grid-y {\ 0% { '+attY+': '+iniY+'; }\ 100% { '+attY+': '+finY+'; }\ }\ '; } self.enqueue('styles', 'w-sprite-'+wid, [wsprite_def], ['htmlwidgets.css']); return '<div id="'+wid+'" class="'+wclass+'" title="'+wtitle+'" '+wstyle+' '+wextra+'>'+wtext+'</div>'; } }; if (isXPCOM) { HtmlWidget.BASE = './'; } else if (isNode) { HtmlWidget.BASE = __dirname; } else if (isWebWorker) { HtmlWidget.BASE = this.location.href.split('/').slice(0,-1).join('/'); } else { var this_script = document.getElementsByTagName('script'); HtmlWidget.BASE = (this_script[this_script.length-1].src||'./').split('/').slice(0,-1).join('/'); // absolute uri } // export it return HtmlWidget; });