### Install UI Component

Source: https://github.com/totaljs/uibuilder/blob/main/public/forms/components.html

Handles the installation of a UI component. It retrieves the component's ID, name, and URL from element attributes. It then updates the component's status to 'installed' and adds it to the application's schema if it's not already present. It includes an optional approval step before installation.

```JavaScript
exports.install = function(el) {
  var id = el.attrd2('id');
  var name = el.attrd2('name');
  var url = el.attrd2('url');
  var download = function() {
    el.aclass('installed');
    if (!app.schema.components[id]) {
      app.schema.components[id] = url;
      redraw = true;
    }
  };
  if (exports.data.approve) EXEC('-approve/show', '@(Are you sure you want to import selected component <b>"{0}"</b>?)'.format(el.attrd2('name')), '"fas fa-cloud-download" @(Import)', download);
  else download();
};
```

--------------------------------

### Total.js UI Builder - Plugin Initialization and Functions

Source: https://github.com/totaljs/uibuilder/blob/main/public/forms/templates.html

Initializes a Total.js plugin with functions for reloading, refreshing the template list, installing a selected template, downloading template data, and closing the UI builder. It handles AJAX requests, data updates, and user feedback messages.

```JavaScript
PLUGIN(function(exports) {
  exports.reload = function() {
    exports.refresh();
  };
  exports.refresh = function() {
    var url = NAV.query.templates || '/templates.json';
    exports.set('demos', !NAV.query.templates);
    exports.ajax('GET ' + url, 'items');
    SETTER('loading/hide', 1000);
  };
  exports.install = function(el) {
    var id = ATTRD(el);
    var model = exports.model;
    var template = model.items.findItem('id', id);
    exports.ajax('GET ' + template.template, function(response) {
      response.id = Date.now().toString(36);
      UIBuilder.data = response;
      uibuilder_redraw();
      WAIT('app', uibuilder_settings);
      NUL('common.form');
    });
  };
  exports.download = function(el) {
    var id = ATTRD(el);
    exports.ajax('{0}'.format(id), function(response) {
      response.id = Date.now().toString(36);
      UIBuilder.data = response;
      uibuilder_redraw();
      WAIT('app', uibuilder_settings);
      NUL('common.form');
    });
  };
  exports.close = function() {
    if (!UIBuilder.data) {
      if (common.iframe) {
        uibuilder_close();
      } else {
        SETTER('message/warning', '@(You need to choose a template)');
        SET('common.form', exports.name, 2000);
      }
    }
  };
});
```

--------------------------------

### UIBuilder Directory Component Initialization

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

Initializes the UIBuilder directory component, setting up its internal structure, event listeners, and default configurations. It defines templates for rendering list items and handles initial setup like making the component non-compilable and read-only.

```javascript
COMPONENT('directory','minwidth:200;create:Create',function(self,config,cls){var cls2='.'+cls,container,timeout,icon,plus,skipreset=false,skipclear=false,ready=false,input=null,issearch=false,is=false,selectedindex=0,resultscount=0,templateE='{{ name | encode | ui_directory_helper}}',templateR='{{ name | raw}}',template='<li data-index="{{ $.index}}" data-search="{{ $.search}}" class="{{ $.classes}}">{{ if $.checkbox}}<span class="'+cls+'-checkbox"><i class="ti ti-check"></i></span>{{ fi}}{0}</li>',templateraw=template.format(templateR);var regstrip=/(&nbsp;|<([^>]+)>)/ig;var parentclass=null,parentclass2=null,skiphide=false,skipmouse=false,customvalue,search,main;template=template.format(templateE);Thelpers.ui_directory_helper=function(val){var t=this;return self.opt.templatecompiled?self.opt.templatecompiled(this):t.template?(typeof(t.template)==='string'?t.template.indexOf('{{')===-1?t.template:Tangular.render(t.template,this):t.render(this,val)):self.opt.render?self.opt.render(this,val):val};self.template=Tangular.compile(template);self.templateraw=Tangular.compile(templateraw);self.readonly();self.singleton();self.nocompile();self.configure=function(key,value,init){if(init)return;switch(key){case'placeholder':self.find('input').prop('placeholder',value);break}};
```

--------------------------------

### UIBuilder URL Path Handling

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

A utility function to process and return a URL path, ensuring it starts with a '/' and handles potential query parameters or fragments.

```javascript
function y(e){var t,n='';return n='/'!==e.charAt(0)?-1===(t=e.indexOf('/',9))?e:e.substring(0,t):n}
```

--------------------------------

### Image Processing and Resizing

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

This section covers the image processing logic, including reading image files, getting EXIF orientation, resizing images to specified dimensions, and converting them to base64 data URLs for upload.

```javascript
self.processimage=function(file,callback){
    var name=self.preparefilename(file.name.replace(/\.(ico|png|jpeg|jpg|gif|svg|webp|heic)$/i,self.opt.background==='transparent'?'.png':'.jpg'));
    self.getorientation(file,function(orient){
        var reader=new FileReader();
        reader.onload=function(){
            var img=new Image();
            img.onload=function(){
                if(self.opt.keeporiginal&&((img.width==self.opt.width&&img.height==self.opt.height)||(self.opt.width&&self.opt.onlylarger&&img.width<=self.opt.width)))
                    fetch(reader.result).then(res=>res.blob()).then(blob=>callback(name,blob));
                else
                    self.resizeimage(img,name,callback)
            };
            img.crossOrigin='anonymous';
            if(orient<2)
                img.src=reader.result;
            else
                self.resetorientation(reader.result,orient,url=>img.src=url)
        };
        reader.readAsDataURL(file)
    })
};
var resizewidth=function(w,h,size){
    return Math.ceil(w*(size/h))
};
var resizeheight=function(w,h,size){
    return Math.ceil(h*(size/w))
};
self.resizeimage=function(image,name,callback){
    var opt=self.opt,canvas=document.createElement('canvas');
    var ctx=canvas.getContext('2d');
    var w=0,h=0,x=0,y=0,is=false,diff=0;
    if(!opt.width)opt.width=(image.width*(opt.height/image.height))>>0;
    if(!opt.height)opt.height=image.height*(opt.width/image.width);
    canvas.width=opt.width;
    canvas.height=opt.height;
    if(opt.background!=='transparent'){
        ctx.fillStyle=opt.background||'#FFFFFF';
        ctx.fillRect(0,0,opt.width,opt.height)
    }
    if(image.width>opt.width||image.height>opt.height){
        if(image.width>image.height){
            w=resizewidth(image.width,image.height,opt.height);
            h=opt.height;
            if(w<opt.width){
                w=opt.width;
                h=resizeheight(image.width,image.height,opt.width)
            }
            if(w>opt.width){
                diff=w-opt.width;
                x-=(diff/2)>>0
            }
            is=true
        } else if(image.height>image.width){
            w=opt.width;
            h=resizeheight(image.width,image.height,opt.width);
            if(h<opt.height){
                h=opt.height;
                w=resizewidth(image.width,image.height,opt.width)
            }
            if(h>opt.height){
                diff=h-opt.height;
                y-=(diff/2)>>0
            }
            is=true
        }
    }
    if(!is){
        if(image.width<opt.width&&image.height<opt.height){
            w=image.width;
            h=image.height;
            x=(opt.width/2)-(image.width/2);
            y=(opt.height/2)-(image.height/2)
        } else if(image.width>=image.height){
            w=opt.width;
            h=image.height*(opt.width/image.width);
            y=(opt.height/2)-(h/2)
        } else {
            h=opt.height;
            w=(image.width*(opt.height/image.height))>>0;
            x=(opt.width/2)-(w/2)
        }
    }
    ctx.drawImage(image,x,y,w,h);
    var base64=opt.background==='transparent'?canvas.toDataURL('image/png'):canvas.toDataURL('image/jpeg',(opt.quality||90)*0.01);
    if(base64.length>10)
        fetch(base64).then(res=>res.blob()).then(blob=>callback(name,blob))
};
self.getorientation=function(file,callback){
    var reader=new FileReader();
    reader.onload=function(e){
        var view=new DataView(e.target.result);
        if(view.getUint16(0,false)!=0xFFD8)
            return callback(-2);
        var length=view.byteLength,offset=2;
        while(offset<length){
            var marker=view.getUint16(offset,false);
            offset+=2;
            if(marker==0xFFE1)
                // ... orientation processing ...
                return
        }
    }
};

```

--------------------------------

### UIBuilder Component Listing Template (HTML)

Source: https://github.com/totaljs/uibuilder/blob/main/public/forms/components.html

HTML template for displaying Total.js UIBuilder components. It includes a section for account expiration warnings and iterates through components, showing details like name, version, author, icon, update status, and enterprise status. It also includes links for reading the README and installation.

```html
<div class="bg-smoke padding m" style="border-radius:var(--radius)"> <i class="ti ti-totaljs mr5 green"></i>@(Your Total.js Enterprise Account expires on) <i class="ti ti-bull"></i> <b>{{ value.dtexpire | format('[date]') }}</b> </div> @(Warn about component installation)

{{ foreach n in value }} {{ if n.name && n.name !== '0' }} <div class="listing-caption">{{ n.name }}</div> {{ fi }} <div class="listing-download"> {{ foreach m in n.items }} <figure data-search="{{ m.id }} {{ m.author }}" class="exec{{ if m.installed }} installed{{ fi }}{{ if m.enterprise }} enterprise{{ fi }}" data-exec="?/install" data-id="{{ m.id }}" data-name="{{ m.name }}" data-version="{{ m.version }}" data-url="{{ m.url }}"> <section> <div class="icon" style="background:{{ m.groupcolor }}"><i class="{{ m.icon | empty('fas fa-plug') }}"></i></div> <div class="name hellip"><span class="exec readme" data-exec="?/readme" data-prevent="true">@(Read me)</span>{{ if m.newupdate }}<span class="badge badge-green badge-small mr5 newupdate">@(update)</span>{{ fi }}{{ if m.enterprise }}<span class="badge badge-small badge-red mr5">Enterprise</span>{{ fi }}{{ m.name }}</div> </section> </figure> {{ end }} <div class="clearfix"></div> </div> <br /> {{ end }}
```

--------------------------------

### UIBuilder Brick Initialization and Rendering

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

This snippet outlines the process of initializing UIBuilder bricks, parsing their attributes, and managing their children. It details how component configurations are loaded, how coordinates and z-index are set, and how the brick's structure is prepared for rendering, including handling nested components and script-based configurations.

```javascript
c.config=(i.getAttribute('config')||'').parseConfig(),c.x=i.getAttribute('x')||'',c.x=c.x?c.x.parseInt():void 0,c.y=i.getAttribute('y')||'',c.y=c.y?c.y.parseInt():void 0,c.zindex=i.getAttribute('zindex')||'',c.zindex=c.zindex?c.zindex.parseInt():void 0,c.children=[],c.iscontainer='UIBUILDER-CONTAINER'===i.parentNode.tagName;for(var l of i.children)if('SCRIPT'===l.tagName){var f=PARSE(l.innerHTML);if(f)for(var u in f)c.config[u]=f[u]}var p=i.getAttribute('path');p&&(c.config.path=p),a.push(i),h.components[c.component];h.components[c.component]||(h.components[c.component]=i.getAttribute('source')||'@')}else W.console&&W.console.warn(b,'Invalid brick declaration.',i)}n&&!s.length&&(e.push(t=[]),e=t);for(o of a){var d=o.$uibuilderbrick;if(e.push(d),o.children.length){let e=d.children;d.iscontainer||(e=[],d.children.push(e)),v(e,o)}}for(r of s){var m=[];e.push(m),v(m,r)}});v(h.children,n,!0),UIBuilder.build(n,h,function(e){var t=n.getAttribute('load');(t=t&&GET(t))&&'function'==typeof t&&t(e)})}}
```

--------------------------------

### UIBuilder Rebind Functionality

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

Handles the re-binding of UI components. It identifies components with paths starting with '@', groups them by their target ID, and updates their binding information.

```javascript
function f(e){var t,n={},i={},o=!1;e.$rebindtimeout=null;for(r of e.instances)r.config.path&&'@'===r.config.path.charAt(0)&&(t=r.config.path.substring(1))!=r.id&&(n[t]?n[t].push(r):n[t]=[r],i[r.id]=t,o=!0);if(o)for(var r of e.instances)r.binded=n[r.id]||null,r.binder=i[r.id]?e.instances.findItem('id',i[r.id]):null}
```

--------------------------------

### Initialize and Manage UI Builder Instances

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

This code iterates through UI Builder instances, manages their z-index, collects inputs and outputs, and handles application readiness and callbacks. It also includes logic for forkable components and emitting application-level events.

```javascript
var e,t,n,i,o,r,s,a,l,f,u,c,p,h,d,g,m,v,y,b,_;m.list=[],m.zindex=1;for(var e of m.instances)if(e.dom.parentNode){var t=e.component,n=(t.floating&&(m.zindex=(e.element.css('z-index')||'').parseInt(),m.zindex<=0)&&(m.zindex=1),e.inputs||t.inputs),i=e.config.name||t.name;if(m.list&&m.list.push({id:e.id,componentid:t.id,name:i,icon:t.icon,color:t.color}),n)for(var o of n)m.inputs.push({id:e.id+'_'+o.id,ref:o.id,name:i+(1<n.length?': '+o.name:''),componentid:t.id,component:t.name,input:o.name,icon:t.icon,color:t.color,note:o.note,schema:o.schema});if((n=e.outputs||t.outputs)&&n.length)for(var o of n)m.outputs.push({id:e.id+'_'+o.id,ref:o.id,name:i+(1<n.length?': '+o.name:''),componentid:t.id,component:t.name,output:o.name,icon:t.icon,color:t.color,note:o.note,schema:o.schema})}}if(!m.ready){m.ready=!0,m.callback&&m.callback(m),a.rclass('invisible'),f(m);function r(e){e.state.init=1,e.events.ready&&e.emit('ready')}var s;for(s of m.instances)s.fork&&c(s,r),s.state.init=1,s.events.ready&&s.emit('ready');g.emit('app',m),m.emit('ready')}m.emit('io',m),g.emit('io',m)
```

--------------------------------

### UIBuilder: Data Manipulation and Access

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

Includes methods for reading data ('read'), writing data to nested properties ('write'), and accessing component state ('get').

```javascript
e.read = function(e, t) {
    if (t && '@' !== t.charAt(0)) for (var n = t.split('.'), i = 0; i < n.length; i++) if (!(e = e[n[i]])) return e;
    return e;
}

e.write = function(e, t, n) {
    if (!t || '@' === t.charAt(0)) return n;
    for (var i = t.split('.'), o = 0; o < i.length - 1; o++) {
        var r = e[i[o]];
        e = r = null == r ? e[i[o]] = {} : r;
    }
    return e[i[o]] = n, e;
}

e.get = function(e) {
    return this.state[e || 'value'];
}
```

--------------------------------

### UIBuilder Download Configuration

Source: https://github.com/totaljs/uibuilder/blob/main/views/index.html

Provides functionality to download the current UIBuilder component configuration. It prepares a configuration object including schema, children, inputs, and outputs, and then initiates a download or copy-to-clipboard action.

```javascript
function uibuilder_download(element) {
  cms_hide();
  let opt = {};
  opt.element = element;
  opt.align = 'right';
  opt.items = [];
  opt.items.push({ id: 'copy', name: '@(Copy to clipboard)', icon: 'ti ti-copy' });
  opt.items.push({ id: 'download', name: '@(Download)', icon: 'ti ti-download' });
  opt.callback = function(selected) {
    var meta = CLONE(app.schema);
    var data = app.stringify();
    for (var key in meta.components) {
      var url = meta.components[key];
      if (url.charAt(0) === '@')
        delete meta.components[key];
    }
    meta.children = data.children;
    meta.inputs = app.inputs;
    meta.outputs = app.outputs;
    if (selected.id === 'download') {
      SE
```

--------------------------------

### UIBuilder Initialization and Component Management

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

This snippet demonstrates the core logic for initializing the UIBuilder and managing its component structure. It handles the creation of component instances, their children, and the overall tree structure, including emitting a 'stringify' event if configured.

```javascript
g.edit=I,g.makeid=function(e){return'cid'+Math.random().toString(36).substring(2).substring(0,8)}}(W.UIBuilder={});</script>

	<script>
		COMPONENT('viewbox','margin:0;scroll:true;delay:100;resizedelay:200;initdelay:250;scrollbar:1;visibleY:1;height:100;invisible:1',function(self,config,cls){var eld,elb,scrollbar,cls2='.'+cls,init=false,cache,scrolltoforce;self.readonly();self.init=function(){var resize=function(){setTimeout2(self.name,function(){for(var m of M.components){if(m.name==='viewbox'&&!HIDDEN(m.dom)&&(m.ready||(m.$ready&&!m.$removed)))m.resize()}},200)};self.on('resize2',resize)};self.destroy=function(){scrollbar&&scrollbar.destroy()};self.configure=function(key,value,init){switch(key){case'disabled':eld.tclass('hidden',!value);break;case'minheight':case'margin':case'marginxs':case'marginsm':case'marginmd':case'marginlg':!init&&self.resizeforce();break;case'selector':config.parent=value;self.resize();break}};self.scrollbottom=function(val){if(val==null)return elb[0].scrollTop;elb[0].scrollTop=(elb[0].scrollHeight-self.dom.clientHeight)-(val||0);return elb[0].scrollTop};self.scrolltop=function(val){if(val==null)return elb[0].scrollTop;elb[0].scrollTop=(val||0);return elb[0].scrollTop};self.make=function(){var centered='';if(config.centered)centered='<div><div class="{0}-centered-table"><div class="{0}-centered-cell"></div></div></div>'.format(cls);config.invisible&&self.aclass('invisible');config.scroll&&MAIN.version>17&&self.element.wrapInner('<div class="'+cls+'-body">'+centered+'</div>');self.element.prepend('<div class="'+cls+'-disabled hidden"></div>');eld=self.find('> .{0}-disabled'.format(cls)).eq(0);elb=self.find('> .{0}-body'.format(cls)).eq(0);self.aclass('{0} {0}-hidden'.format(cls));if(config.scroll){if(config.scrollbar){if(MAIN.version>17){var scrolledcache=null,scrolled=function(scrollbar){if(config.togglescrolled){if(!scrolledcache)scrolledcache=self.parent(config.togglescrolled);scrolledcache&&scrolledcache.tclass(cls+'-scrolled',scrollbar.scrollTop()>0)}};scrollbar=W.SCROLLBAR(self.find(cls2+'-body'),{shadow:config.scrollbarshadow,visibleY:config.visibleY,visibleX:config.visibleX,orientation:config.visibleX?null:'y',parent:self.element,onscroll:scrolled});self.scrollbar=scrollbar;self.scrolltop=scrollbar.scrollTop;self.scrollbottom=scrollbar.scrollBottom}else self.aclass(cls+'-scroll')}else{self.aclass(cls+'-scroll');if(M.version<19)self.find(cls2+'-body').aclass('noscrollbar')}}self.resize()};self.released=function(is){!is&&self.resize()};var css={};self.resize=function(){setTimeout2(self.ID,self.resizeforce,config.resizedelay)};self.resizeforce=function(){var el=self.parent(config.parent);var h=el.height();var w=el.width();var width=WIDTH();var mywidth=self.element.width();var key=width+'x'+mywidth+'x'+w+'x'+h+'x'+config.margin;if(cache===key){scrollbar&&scrollbar.resize();if(scrolltoforce){if(scrolltoforce==='bottom')self.scrollbottom(0);else self.scrolltop(0);scrolltoforce=null}return}cache=key;var margin=config.margin,responsivemargin=config['margin'+width];if(responsivemargin!=null)margin=responsivemargin;if(margin==='auto')margin=self.element.offset().top;if(h===0||w===0){self.$waiting&&clearTimeout(self.$waiting);self.$waiting=setTimeout(self.resize,234);return}h=((h/100)*config.height)-margin;if(config.minheight&&h<config.minheight)h=config.minheight;if(config.centered)elb.find(cls2+'-centered-table').css('min-height',h);css.height=h;css.width=mywidth;eld.css(css);css.width='';self.css(css);elb.length&&elb.css(css);self.element.SETTER('*/resize');var c=cls+'-hidden';self.hclass(c)&&self.rclass(c,100);scrollbar&&scrollbar.resize();if(scrolltoforce){if(scrolltoforce==='bottom')self.scrollbottom(0);else self.scrolltop(0);scrolltoforce=null}if(!init){self.rclass('invisible',config.initdelay);init=true}};self.resizescrollbar=function(){scrollbar&&scrollbar.resize()};self.setter=function(){scrolltoforce=config.scrollto||config.scrolltop;if(scrolltoforce){if(scrolltoforce==='bottom')self.scrollbottom(0);else self.scrolltop(0);scrolltoforce=null}setTimeout(self.resize,config.delay,scrolltoforce)}});
```

--------------------------------

### UIBuilder Schema Editing

Source: https://github.com/totaljs/uibuilder/blob/main/views/index.html

Enables editing of the UIBuilder component schema. It prepares a schema object by excluding component URLs starting with '@' and includes children, inputs, and outputs. The modified schema is then set for display in a form.

```javascript
function uibuilder_edit() {
  cms_hide();
  var meta = CLONE(app.schema);
  var data = app.stringify();
  for (var key in meta.components) {
    var url = meta.components[key];
    if (url.charAt(0) === '@')
      delete meta.components[key];
  }
  meta.children = data.children;
  meta.inputs = app.inputs;
  meta.outputs = app.outputs;
  SET('formschema @reset', { body: JSON.stringify(meta, null, '\t') });
  SET('common.form', 'formschema');
}
```

--------------------------------

### URL Cleaning and AJAX Request in UIBuilder

Source: https://github.com/totaljs/uibuilder/blob/main/public/forms/totaldb.html

This snippet demonstrates how to clean a URL by removing specific characters and then uses it to make an AJAX GET request to fetch data. It also includes a watcher for URL changes.

```JavaScript
PLUGIN(function(exports) {
    var clean = function(url) {
        return url.substring(0, 10) + url.substring(10).replace(/\\/\\\/g, '/');
    };

    exports.watch('url', function(value) {
        if (value && value.isURL()) {
            exports.ajax('GET ' + clean(value.replace(/api/, '/types/')) + ' ERROR', function(response) {
                exports.set('types', response);
            });
        }
    });

    exports.submit = function(el) {
        var model = exports.model;
        var id = ATTRD(el);
        model.callback(clean(model.url.replace(/api/, '/attrs/{0}/'.format(id))));
        NULL('common.form2');
    };
});
```

--------------------------------

### UIBuilder Instance Initialization

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

Initializes a UIBuilder instance with properties like ID, query, application context, cache, class, components, events, and references. It also manages the instances array.

```javascript
function u(e){var t=this;t.id=e.id,t.query=e.query,t.app=e,t.cache=e.cache,t.class=e.class,t.components=e.components,t.instances=[],t.events={},t.refs={}}
```

--------------------------------

### Watch Href Attribute for External Links

Source: https://github.com/totaljs/uibuilder/blob/main/public/forms/link.html

This snippet watches the 'href' attribute for changes. If the new href is a valid external URL (longer than 12 characters and starts with http/https) and the target is not already '_blank', it automatically sets the target to '_blank'.

```javascript
exports.watch('href', function(value, path, type) {
  if (type === 2 && value.length > 12 && (/^(http|https)\:\/\//i).test(value) && exports.model.target !== '_blank') exports.set('target', '_blank');
}, true);
```

--------------------------------

### UIBuilder CMS Linking Functionality

Source: https://github.com/totaljs/uibuilder/blob/main/views/index.html

Manages the linking of UI elements within the CMS context using Total.js UIBuilder. It handles selecting and deselecting elements, emitting 'link' or 'remove' events, and updating the UI state. It relies on `GET`, `SETTER`, and `UIBuilder.emit`.

```javascript
function cms_link() { var obj = GET('\*cms'); obj.element.rclass('CMS_selected'); UIBuilder.emit('link', obj.link ? $(obj.link) : obj.element, function(model) { if (model.element) { model.element.aclass('CMS_selected'); cms_selected(model.element); } obj.instance.emit('cms', obj.element, model.element ? 'link' : 'remove'); }); }
```

--------------------------------

### Initialize and Configure Datepicker

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

Initializes the datepicker component, sets up event listeners for user interactions (click, scroll, resize), and defines methods for showing and hiding the datepicker. It also handles the initial HTML generation and element binding.

```javascript
ure=true}reconfigure&&self.reconfigure(conf);W.$datepicker=self;self.event('click',function(e){e.stopPropagation()});var hide=function(){visible&&W.$datepicker&&W.$datepicker.hide()};var hide2=function(){visible&&setTimeout2('datepickerhide',function(){W.$datepicker&&W.$datepicker.hide()},20)};self.bindevents=function(){if(!visible)$(W).on('scroll',hide2)};self.unbindevents=function(){if(visible)$(W).off('scroll',hide2)};self.element.on('click',function(e){if(e.target===self.dom)hide()});self.on('reflow + scroll + resize + resize2',hide)}
```

--------------------------------

### UIBuilder: Initialize and Show Component

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

Initializes and displays the UIBuilder component with specified options. It handles item data, templates, search functionality, and callbacks. The component can be shown attached to a specific DOM element.

```javascript
self.show = function(opt) {
    if (opt.checked == true) opt.checked = [];
    var el = opt.element instanceof jQuery ? opt.element[0] : opt.element;
    if (opt.items == null) opt.items = [];
    self.tclass(cls + '-default', !opt.render);
    if (opt.classname) {
        main.aclass(opt.classname);
        parentclass = opt.classname;
    }
    if (opt.class) {
        main.aclass(opt.class);
        parentclass2 = opt.class;
    }
    if (!opt.minwidth) opt.minwidth = config.minwidth;
    if (is) {
        clearTimeout(timeout);
        if (self.target === el) {
            self.hide(1);
            return;
        }
    }
    if (opt.template) opt.templatecompiled = Tangular.compile(opt.template);
    self.initializing = true;
    self.target = el;
    opt.ajax = null;
    self.ajaxold = null;
    var element = opt.element ? $(opt.element) : null;
    var callback = opt.callback, items = opt.items, type = typeof(items);
    var item;
    if (type === 'string') {
        items = opt.items = GET(items);
        type = typeof(items);
    }
    if (type === 'function' && callback) {
        type = '';
        opt.ajax = items;
        items = null;
    }
    if (!items && !opt.ajax) {
        self.hide(0);
        return;
    }
    self.tclass(cls + '-search-hidden', opt.search === false);
    self.opt = opt;
    opt.class && main.aclass(opt.class);
    skiphide = true;
    input.val('');
    var builder = [],
        selected = null;
    opt.ta = opt.key ? Tangular.compile((opt.raw ? templateraw : template).replace(/\{\{\sname/g, '{{ ' + opt.key)) : opt.raw ? self.templateraw : self.template;
    if (!opt.ajax) {
        var indexer = {},
            key = (opt.search == true ? opt.key : (opt.search || opt.key)) || 'name';
        for (var i = 0; i < items.length; i++) {
            item = items[i];
            if (typeof(item) === 'string') item = { name: item, id: item, selected: item === opt.selected };
            if (opt.exclude && opt.exclude(item)) continue;
            if (item.selected || opt.selected === item) {
                selected = i;
                skipreset = true;
                item.selected = true;
            } else item.selected = false;
            if (opt.checked && item.selected) opt.checked.push(item.id);
            var c = '';
            if (item.selected) c += (c ? ' ' : '') + 'selected current';
            if (item.classname) c += (c ? ' ' : '') + item.classname;
            if (item.disabled) c += (c ? ' ' : '') + 'ui-disabled';
            indexer.classes = c;
            indexer.checkbox = opt.checkbox === true;
            indexer.index = i;
            indexer.search = item[key] ? item[key].replace(regstrip, '') : '';
            builder.push(opt.ta(item, indexer));
        }
        if (opt.empty) {
            item = {};
            var tmp = opt.raw ? '<b>{0}</b>'.format(opt.empty) : opt.empty;
            item[opt.key || 'name'] = tmp;
            if (!opt.raw) item.template = '<b>{0}</b>'.format(opt.empty);
            indexer.index = -1;
            builder.unshift(opt.ta(item, indexer));
        }
    }
    self.target = element ? element[0] : null;
    var w = element ? elemen
```

--------------------------------

### Initialize and Configure File Uploader

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

This snippet shows the basic structure of the UIBuilder file uploader component. It initializes the component, sets up a file input, and handles the change event to process selected files.

```javascript
COMPONENT('fileuploader',function(self,config){
    var input;
    self.singleton();
    self.readonly();
    self.nocompile();
    // ... other methods ...
    self.make=function(){
        self.aclass('hidden');
        self.append('<input type="file" multiple />');
        input=self.find('input');
        self.event('change','input',function(e){
            self.processfiles(e.target.files,()=>this.value='')
        })
    };
    // ... other methods ...
});
```

--------------------------------

### Reload UI Components and Data

Source: https://github.com/totaljs/uibuilder/blob/main/public/forms/components.html

Initiates a reload of UI components and associated data. It resets update counts and groups, fetches component data using the `refresh` function, and then updates the application's state with the new component information and organized groups. It also marks components as installed if they exist in `app.components`.

```JavaScript
exports.reload = function() {
  redraw = false;
  var opt = {};
  opt.updates = 0;
  opt.groups = {};
  opt.components = [];
  var queue = [];
  queue.push(next => refresh(common.componentsdb, opt, next));
  // if (enterprise.is)
  // queue.push(next => refresh('https://enterprise.totaljs.com/download/uibuilder/?token=' + enterprise.token, opt, next));
  queue.async(function() {
    var arr = [];
    var keys = Object.keys(opt.groups);
    keys.quicksort();
    for (var item of opt.components) item.installed = !!app.components[item.id];
    for (var key of keys) {
      opt.groups[key].items.quicksort('name');
      arr.push(opt.groups[key]);
    }
    exports.set('newupdates', opt.updates);
    exports.set('components', opt.components);
    exports.set('items', arr);
  });
};
```

--------------------------------

### Application Initialization and Loading

Source: https://github.com/totaljs/uibuilder/blob/main/views/index.html

Handles the initial loading of the UIBuilder application, including setting dark mode, detecting if running in an iframe, and fetching application data from a specified URL or base64 encoded string.

```javascript
ON('ready', function() {
    common.darkmode && $('body').aclass('ui-dark');
    if (top !== W) {
        SET('common.iframe', true);
        SET('common.allowclose', NAV.query.hideclose !== '1');
        FUNC.send({ TYPE: 'ready' });
        return;
    }
    var url = NAV.query.url;
    if (!url) {
        var base64 = NAV.query.base64;
        if (base64) {
            var data = PARSE(decodeURIComponent(atob(base64)));
            if (data) {
                UIBuilder.data = response;
                uibuilder_redraw();
                return;
            }
        }
        SET('common.form', 'templatesform');
        return;
    }
    AJAX('GET ' + url, function(response, err) {
        if (err) {
            SET('common.form', 'templatesform');
            SETTER('message/warning @hideloading', 'Invalid source: ' + err);
        } else {
            UIBuilder.data = response;
            uibuilder_redraw();
        }
    });
});
```

--------------------------------

### UIBuilder Instance Methods

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

Defines core methods for UIBuilder instances, including finding components by path or ID, URL manipulation, CSS class finding and reading, view management, cleaning, event handling (on, emit), and re-binding.

```javascript
u.prototype.find=function(e){var t,n='.'===e.charAt(0)?e.substring(1):'',e=n?'':'@'===e.charAt(0)?e.substring(1):e;for(t of this.instances)if(n){if(t.config.path===n)return t}else if(t.id===e)return t},u.prototype.urlify=function(){return this.app.urlify.apply(this.app,arguments),this},u.prototype.clfind=function(){return this.app.clfind.apply(this.app,arguments),this},u.prototype.clread=function(){return this.app.clread.apply(this.app,arguments),this},u.prototype.view=function(){return this.app.view.apply(this.app,arguments),this},u.prototype.clean=function(){return this},u.prototype.on=function(e,t){var n=this;n.events[e]?n.events[e].push(t):n.events[e]=[t]},u.prototype.rebind=function(){var e=this;e.$rebindtimeout&&clearTimeout(e.$rebindtimeout),e.$rebindtimeout=setTimeout(f,50,e)},u.prototype.emit=function(e,t,n,i,o,r){e=this.events[e];if(e)for(var s of e)s.call(this,t,n,i,o,r)},u.prototype.emitstate=function(e,t){var n,i={},o=e.instance,r=t=t||'state',s='noemit'+t,a=(e.instance.cache[r]=null,o.parent),c=0;for(e.level=0,e.type=t;a&&(e.level++,i[a.id]=!0,!a.fork)&&(a.events[t]&&(c++,a.emit(t,e)),!e.$propagation);)a=a.parent;e.level=null,t='@'+t;for(n of this.instances)i[o.id]||n===e.instance||n.events[t]&&(c++,n.emit(t,e));o.state[s]=0===c}
```

--------------------------------

### UI Builder Initialization and Message Handling

Source: https://github.com/totaljs/uibuilder/blob/main/views/index.html

This snippet initializes the UI Builder, sets global variables, and handles messages from the parent window. It manages component data, application states, and callbacks for dynamic updates.

```javascript
var common = {};
var settingsform = {};
DEF.language = '';
DEF.cl.inputs = [];
DEF.cl.outputs = [];
UIBuilder.editor = true;
UIBuilder.origin = location.origin;
common.progress = 0;
common.windows = [];
common.components = [];
common.iframeapps = [];
common.paths = '';
common.codes = '';
common.apps = '';
common.views = '';
common.callbacks = {};
common.componentsdb = NAV.query.components || 'https://cdn.componentator.com/uibuilder/db.json';
if (NAV.query.color) APPEARANCE({ color: NAV.query.color });
CACHEPATH('common.darkmode', '1 year');
ON('@flag showloading', function() {
    SETTER('loading/show');
});
ON('@flag hideloading', function() {
    SETTER('loading/hide', 500);
});
ON('ERROR', function(err) {
    if (err instanceof Array) err = err[0].error || err[0].message;
    else err = err.toString();
    SETTER('notify/warning @hideloading', Thelpers.encode(err) || 'Unexpected error');
});
function settings_reload(form) {
    cms_hide();
    var id = settingsform.componentid;
    var data = settingsform[id];
    var com = app.components[id];
    form.reconfigure({ title: '@(Settings:) ' + com.name });
    if (!data.name) data.name = com.name;
    EXEC('settingsform.' + id + '/reload', data);
}
$(W).on('message', function(e) {
    e = e.originalEvent;
    var msg = e.data;
    if (typeof(msg) === 'string') msg = PARSE(msg);
    if (!msg.uibuilder) return;
    switch (msg.TYPE) {
        case 'init':
            UIBuilder.origin = e.origin;
            common.upload = msg.upload;
            common.iframeapps = msg.apps || [];
            common.iframeviews = msg.views || [];
            common.iframecodes = msg.codes || [];
            common.iframepaths = msg.paths || [];
            if (msg.components) common.componentsdb = msg.components;
            DEF.cl.usergroups = msg.groups || [];
            SET('DEF.cl.views', common.iframeviews.slice(0));
            SET('DEF.cl.paths', prepare_external_paths(common.iframepaths.slice(0)));
            SET('DEF.cl.codes', common.iframecodes.slice(0));
            SET('DEF.cl.apps', common.iframeapps.slice(0));
            if (msg.data && msg.data.id) {
                UIBuilder.data = msg.data;
                uibuilder_redraw();
            } else SET('common.form', 'templatesform');
            break;
        case 'redraw':
            if (msg.data) UIBuilder.data = msg.data;
            uibuilder_redraw(msg.data ? false : true);
            break;
        case 'refresh':
            if (msg.upload) common.upload = msg.upload;
            if (msg.apps) {
                common.iframeapps = msg.apps;
                SET('DEF.cl.apps', common.iframeapps.slice(0));
            }
            if (msg.views) {
                common.iframeviews = msg.views;
                SET('DEF.cl.views', common.iframeviews.slice(0));
            }
            if (msg.codes) {
                common.iframecodes = msg.codes;
                SET('DEF.cl.codes', common.iframecodes.slice(0));
            }
            if (msg.paths) {
                common.iframepaths = msg.paths;
                SET('DEF.cl.paths', prepare_external_paths(common.iframepaths.slice(0)));
            }
            if (msg.groups) SET('DEF.cl.usergroups', msg.groups);
            if (msg.components) common.componentsdb = msg.components;
            uibuilder_rebuildpaths();
            break;
        case 'callback':
            var cb = common.callbacks[msg.id];
            if (cb) {
                cb(msg.data);
                delete common.callbacks[msg.id];
            }
            break;
    }
});
function settings_load(id, next) {
    var com = app.components[id];
    if (com) {
        var done = function(response, err) {
            if (err) response = '';
            if (typeof(response) !== 'string') response = '';
            response = ADAPT(null, null, response.replace(/CLASS/g, com.cls));
            var beg = response.indexOf('<scr' + 'ipt>');
            if (beg !== -1) {
                response = response.replace(/PLUGIN\((\s)?function/g, 'PLUGIN(\'settingsform.' + id + '\', function');
                var end = response.indexOf('</scr' + 'ipt>', beg + 8);
                var scr = response.substring(beg + 8, end).trim();
                response = response.substring(0, beg) + response.substring(end);
                new Function(scr)();
            }
            next('<ui-plugin path="settingsform.{0}" class="{2}_settings"><ui-component name="ready" config="delay:300" class="invisible"><ui-component name="viewbox" path="common.form" config="scrollbar:1;scrollbarshadow:1;margin:70;parent:auto"><div class="padding main npb"><div class="grid-2"><div class="m"><ui-component name="input" path="?.name" config="required:1;placeholder:@(Component name);maxlength:10000">@(Name)</ui-component><div clas' + 's="mt5"></div></div></div></div></ui-component></ui-component></ui-plugin>', id, com.name, com.cls);
        };
        RESTBUILDER('components/' + id, null, done);
    }
}
```

--------------------------------

### UIBuilder Component Compilation Logic

Source: https://github.com/totaljs/uibuilder/blob/main/public/render.txt

This snippet details the core 'h' function, which compiles UIBuilder components. It handles component instantiation, attribute merging, configuration application, event setup, and DOM manipulation. It also manages component hierarchy, fork instances, and ensures proper rendering and event emission.

```javascript
function h(e,t,n,i,o,r){var s=this,a=s.components[t.component];if(a){var c=o||document.createElement('DIV'),f=new m;if(c.classList.add('ui_'+a.id),t.gap&&c.classList.add('UI_gap'),a.floating&&(c.classList.add('UI_floating'),c.style='left:{0}px;top:{1}px;z-index:{2};position:absolute'.format(t.x||0,t.y||0,t.zindex||1)),t.bind&&(f.state.bind=!0),t.notify&&(f.state.notify=!0),a.config||(a.config={}),f.id=t.id,f.args=s.args,f.newbie=r||t.newbie,f.element=$(c),f.element.aclass(g.selectors.component.substring(1)+' '+a.cls).attrd('id',t.id),f.dom=c,f.events={},f.config=CLONE(a.config),f.app=s,f.component=a,f.protected=t.protected,f.meta=t,f.edit=I,t.newbie&&delete t.newbie,o&&(f.forked=!0),t.config)for(var l in t.config)f.config[l]=t.config[l];if(f.config.name||(f.config.name=a.name),s.instances.push(f),o&&(r=e.getAttribute('uid'))&&(s.refs[r]=f),c.uibuilder=f,!o){var u=e.cl
```

--------------------------------

### Configure Component Settings

Source: https://github.com/totaljs/uibuilder/blob/main/views/index.html

Handles component settings, including loading from URLs (plain or base64 encoded) or directly from provided HTML content. It also manages AJAX requests for external settings.

```javascript
function settings_configure(com, done) {
    if (com.settings) {
        if (com.settings.indexOf('<') === -1) {
            var url = com.settings;
            if (url.substring(0, 6) === 'base64') {
                done(decodeURIComponent(atob(url.substring(7))));
            } else {
                if (url.charAt(0) === '/') url = UIBuilder.origin + url;
                AJAX('GET ' + url.format(com.id), done);
            }
        } else done(com.settings);
    } else done(com.settings);
}

// Example usage within a larger context:
// ...
// if (com.settings) {
//     settings_configure(com, function(response) {
//         // Handle response
//     });
// } else {
//     next('');
// }
// ...
```