### Syntax Highlighter in Total.js

Source: https://github.com/totaljs/components/blob/master/j-Wiki/example.html

Shows how to use the syntax highlighter component in Total.js to display code snippets with proper formatting. The example uses JavaScript.

```javascript
wiki.push({
  name: 'Syntax highlighter',
  body: '```javascript\nalert(\'OK\');\n```'
});
```

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

### Markdown Rendering in Total.js

Source: https://github.com/totaljs/components/blob/master/j-Wiki/example.html

Demonstrates how to render Markdown content within the Total.js framework. It includes an example of pushing Markdown content into a wiki array.

```javascript
var wiki = [];
wiki.push({
  name: 'Markdown',
  body: '# Markdown\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam repellendus odit tempora iusto ea distinctio, illum. Accusamus fugiat, soluta optio!'
});
```

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

### Initialize and Configure Intro Component

Source: https://github.com/totaljs/components/blob/master/0cdn/j-intro@1.html

This snippet demonstrates how to initialize the Intro component with custom configurations such as width, height, icons for navigation, and a delay for transitions. It also shows how to append the component to the body and manage its visibility.

```javascript
COMPONENT('intro@1', 'closebutton:0;width:400;height:300;nexticon:ti ti-chevron-right;doneicon:ti ti-check-circle;delay:500', function(self, config, cls) {
    var cls2 = '.' + cls,
        container = 'intro' + GUID(4);
    var content, figures, buttons, button = null, index = 0, visible = false, body;

    self.readonly();

    self.hide = function() {
        if (visible) {
            self.set('');
            config.exec && self.EXEC(config.exec, true);
            config.remove && self.remove();
        }
    };

    self.make = function() {
        $(document.body).append('<div id="{0}" class="hidden {1}"><div class="{1}-body" style="max-width:{2}px;height:{3}px;top:{4}px"></div></div>'.format(container, cls, config.width, config.height, (WH / 2 >> 0) - config.height / 2 >> 0));
        content = self.element;
        container = $('#' + container);
        content.rclass('hidden');
        body = container.find(cls2 + '-body');
        body[0].appendChild(self.element[0]);
        self.replace(container);
        content.aclass(cls + '-figures');
        figures = content.find('figure');

        var items = [];
        figures.each(function(index) {
            items.push('<i class="ti ti-circle-alt {0}-button" data-index="{1}"></i>'.format(cls, index));
        });

        if (config.closebutton) {
            body.prepend('<span><i class="ti ti-times"></i></span>');
            body.find('span').on('click', self.hide);
        }

        body.append('<div class="{0}-pagination"><button name="next"></button>{1}</div>'.format(cls, items.join('')));
        buttons = self.find(cls2 + '-button');
        button = self.find(cls2 + '-pagination').find('button');

        self.event('click', 'button[name="next"],.next', function() {
            if (config.delay && BLOCKED(self.ID, config.delay)) return;
            index++;
            if (index >= figures.length) {
                var done = function() {
                    self.set('');
                    config.exec && self.EXEC(config.exec);
                    config.remove && self.remove();
                };
                if (config.check) {
                    self.EXEC(config.check, done);
                } else done();
            } else {
                self.move(index);
                config.page && self.EXEC(config.page, index);
            }
        });

        self.event('click', 'button[name="close"],.close', self.hide);
        self.event('click', cls2 + '-button', function() {
            self.move(+$(this).attrd('index'));
        });

        self.on('resize2', self.resize);
        self.resize();
    };

    self.resize = function() {
        setTimeout2(self.ID, self.resizeforce, 300);
    };

    self.resizeforce = function() {
        if (!visible) return;
        var css = {},
            footer = self.find(cls2 + '-pagination').innerHeight();
        css.top = (WH / 2 >> 0) - (config.height + footer) / 2 >> 0;
        if (WIDTH() === 'xs') {
            css['max-width'] = 'auto';
            css.width = '86%';
        } else css.width = '';
        css.height = config.height + footer;
        body.css(css);
        figures.css('height', config.height);
    };

    self.move = function(indexer) {
        figures.filter('.visible').rclass('visible');
        buttons.filter('.selected').rclass('selected');
        figures.eq(indexer).aclass('visible');
        buttons.eq(indexer).aclass('selected');
        var isnext = indexer < buttons.length - 1;
        button.html(isnext ? ((config.next || 'Next') + '<i class="' + config.nexticon + '"></i>') : ('<i class="' + config.doneicon + '"></i>' + (config.close || 'Done')));
        button.tclass('next', isnext);
        button.tclass('done', !isnext);
        index = indexer;
        return self;
    };

    self.setter = function(value) {
        var is = value == config.if;
        if (is === visible) return;
        index = 0;
        self.move(0);
        visible = is;
        self.tclass('hidden', !is);
        self.resizeforce();
        setTimeout(function() {
            self.find(cls2 + '-body').tclass(cls + '-body-visible', is);
        }, 200);
    };
});
```

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

### JavaScript Plugin for j-View Component

Source: https://github.com/totaljs/components/blob/master/j-View/readme.md

Provides an example of a JavaScript plugin for a j-View component. It includes optional 'init' and custom methods like 'uppercase'. The 'init' function is called once, and custom methods can manipulate the view's model using functions like GET and UPD.

```javascript
PLUGIN(function(exports) {

	// Optional
	// Is executed only one-time
	exports.init = function(el) {
		// @el {jQuery element}
	};

	exports.uppercase = function() {
		var model = GET('?');
		model.name = model.name.toUpperCase();
		UPD('?.name');
	};

});
```

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

### Initialize and Configure Intro Component

Source: https://github.com/totaljs/components/blob/master/0cdn/j-intro.html

This snippet demonstrates how to initialize the Intro component with various configuration options. It covers setting dimensions, custom icons for navigation, delays, and callback functions for actions like executing custom code or removing the component after completion. The component is appended to the body and made visible.

```javascript
COMPONENT('intro','closebutton:0;width:400;height:300;nexticon:ti ti-chevron-right;doneicon:ti ti-check-circle;delay:500',function(self,config,cls){var cls2='.'+cls,container='intro'+GUID(4);var content,figures,buttons,button=null,index=0,visible=false,body;self.readonly();self.hide=function(){if(visible){self.set('');config.exec&&self.EXEC(config.exec,true);config.remove&&self.remove()}};self.make=function(){$(document.body).append('<div id="{0}" class="hidden {1}"><div class="{1}-body" style="max-width:{2}px;height:{3}px;top:{4}px"></div></div>'.format(container,cls,config.width,config.height,(WH/2>>0)-config.height/2>>0));content=self.element;container=$('#'+container);content.rclass('hidden');body=container.find(cls2+'-body');body[0].appendChild(self.element[0]);self.replace(container);content.aclass(cls+'-figures');figures=content.find('figure');var items=[];figures.each(function(index){items.push('<i class="ti ti-circle-alt {0}-button" data-index="{1}"></i>'.format(cls,index))});if(config.closebutton){body.prepend('<span><i class="ti ti-times"></i></span>');body.find('span').on('click',self.hide)}body.append('<div class="{0}-pagination"><button name="next"></button>{1}</div>'.format(cls,items.join('')));buttons=self.find(cls2+'-button');button=self.find(cls2+'-pagination').find('button');self.event('click','button[name="next"],.next',function(){if(config.delay&&BLOCKED(self.ID,config.delay))return;index++;if(index>=figures.length){var done=function(){self.set('');config.exec&&self.EXEC(config.exec);config.remove&&self.remove()};if(config.check){self.EXEC(config.check,done)}else done()}else{self.move(index);config.page&&self.EXEC(config.page,index)}});self.event('click','button[name="close"],.close',self.hide);self.event('click',cls2+'-button',function(){self.move(+$(this).attrd('index'))});self.on('resize2',self.resize);self.resize()};self.resize=function(){setTimeout2(self.ID,self.resizeforce,300)};self.resizeforce=function(){if(!visible)return;var css={},footer=self.find(cls2+'-pagination').innerHeight();css.top=(WH/2>>0)-(config.height+footer)/2>>0;if(WIDTH()==='xs'){css['max-width']='auto';css.width='86%'}else css.width='';css.height=config.height+footer;body.css(css);figures.css('height',config.height)};self.move=function(indexer){figures.filter('.visible').rclass('visible');buttons.filter('.selected').rclass('selected');figures.eq(indexer).aclass('visible');buttons.eq(indexer).aclass('selected');var isnext=indexer<buttons.length-1;button.html(isnext?((config.next||'Next')+'<i class="{0}"></i>'.format(config.nexticon)):('<i class="{0}"></i>'.format(config.doneicon)+(config.close||'Done')));button.tclass('next',isnext);button.tclass('done',!isnext);index=indexer;return self};self.setter=function(value){var is=value==config.if;if(is===visible)return;index=0;self.move(0);visible=is;self.tclass('hidden',!is);self.resizeforce();setTimeout(function(){self.find(cls2+'-body').tclass(cls+'-body-visible',is)},200)}});
```

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

### UIBuilder Component Initialization and Loading

Source: https://github.com/totaljs/components/blob/master/0cdn/j-uibuilder@1.html

This snippet demonstrates the initialization of the UIBuilder component. It includes logic to parse UI metadata from a script tag or load it via an AJAX GET request. The `make` function handles initial setup, while `done` and `setter` manage loading UI configurations.

```javascript
COMPONENT('uibuilder@1','css:1',function(self,config,cls){
  self.make=function(){
    self.aclass(cls);
    var scr=self.find('scr'+'ipt');
    if(scr.length>0){
      var meta=PARSE(scr.html());
      self.empty();
      self.load(meta)
    }
  };
  self.done=function(){
    config.url&&AJAX('GET '+config.url,self.load)
  };
  self.load=function(data){
    if(!data||data instanceof Array||typeof(data)!=='object')return;
    if(self.app){
      self.app.remove();
      self.app=null;
      config.app&&self.SEEX(config.app,null)
    }
    data.id=config.id||self.ID;
    UIBuilder.build(self.element,data,function(response){
      if(!config.css)response.css='';
      response.component=self;
      response.schema=data;
      self.app=response;
      config.app&&self.SEEX(config.app,response,data);
      config.output&&self.app.on('output',function(meta){
        self.SEEX(config.output,meta)
      })
    })
  };
  self.setter=function(value){
    if(value){
      if(typeof(value)==='string')AJAX('GET '+value,self.load);
      else self.load(value)
    } else if(self.app){
      self.app.remove();
      self.app=null;
      config.app&&self.SEEX(config.app,null)
    }
  }
},[function(next){
  let cdn=(DEF.cdn||'https://cdn.componentator.com');
  IMPORT('<UIBuilder> {0}/uibuilder.min@1.js'.format(cdn),next)
}]);
```

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

### Total.js Spotlight Component Initialization and Core Logic

Source: https://github.com/totaljs/components/blob/master/0cdn/j-spotlight@1.html

Initializes the Spotlight component, setting up its structure, event listeners for search input and item selection, and handling keyboard navigation. It also includes methods for searching, rendering results, and managing the selected item.

```javascript
COMPONENT('spotlight@1','height:40;placeholder:Search',function(self,config,cls){var cls2='.'+cls,container,timeout,input,search,scroller=null,is=false,selectedindex=0,resultscount=0,skip=false,checksum,prevclass;self.items=null;self.template=Tangular.compile('<figure data-index="{{ $.index}}"{{ if selected}} class="selected"{{ fi}}>{{ if icon}}<i class="{{ icon}}"></i>{{ fi}}{{ if html}}{{ html | raw}}{{ else}}{{ name | raw}}{{ fi}}</figure>');self.callback=null;self.readonly();self.singleton();self.nocompile&&self.nocompile();var onclick=function(e){if(is&&(!$(e.target).closest(cls2).length))self.hide()};self.select=function(index){var item=self.items[index];if(item){self.opt.callback&&self.opt.callback(item);if(!self.opt.recent)return;var key='spotlight'+(self.opt.id||'');var arr=CACHE(key)||[];var id=HASH(item)+'';item.spotlightid=id;if(arr.length&&arr.findItem('spotlightid',id))return;arr.unshift(item);if(arr.length>10)arr.pop();CACHE(key,arr,typeof(self.opt.recent)==='string'?self.opt.recent:'1 month')}};self.make=function(){self.aclass(cls+'-layer hidden');self.append('<div class="{1}"><div class="{1}-search"><span><i class="ti ti-search"></i></span><div><input type="text" placeholder="{0}" class="{1}-search-input" /></div></div><div class="{1}-container"><div class="{1}-items"></div></div></div>'.format(config.placeholder,cls));container=self.find(cls2+'-items');scroller=self.find(cls2+'-container');input=self.find('input');search=self.find(cls2);self.event('click','figure[data-index]',function(e){self.select(+this.getAttribute('data-index'));self.hide();e.preventDefault();e.stopPropagation()});self.on('resize2',function(){is&&self.hide(0)});self.event('keydown','input',function(e){skip=false;switch(e.which){case 27:skip=true;self.hide();self.opt.cancel&&self.opt.cancel();break;case 13:skip=true;var sel=self.find('figure.selected');sel.length&&self.select(+sel.attrd('index'));self.hide();break;case 38:skip=true;selectedindex--;if(selectedindex<0)selectedindex=0;else self.move();break;case 40:skip=true;selectedindex++;if(selectedindex>=resultscount)selectedindex=resultscount;else self.move();break}if(skip){e.preventDefault();e.stopPropagation()}});self.event('keyup','input',function(){if(!skip)setTimeout2(self.id,self.search,self.opt.delay||100,null,this.value)})};self.search=function(value){if(typeof(self.opt.search)==='function'){self.opt.search(value,self.render)}else{var url=self.opt.search.format(encodeURIComponent(value));if(self.opt.cache){if(M.is20)AJAX(url+' <'+self.opt.cache+'>',self.render);else AJAXCACHE(url,self.render,self.opt.cache)}else AJAX(url,self.render)}};self.move=function(){var itemheight=self.opt.height||config.height,counter=0,h=scroller.css('max-height').parseInt();container.find('figure').each(function(){var el=$(this);if(el.hclass('hidden'))return;var is=selectedindex===counter;el.tclass('selected',is);if(is){var t=(itemheight*counter)-itemheight;scroller.scrollTop((t+itemheight*5)>h?t:0)}counter++})};self.render=function(items,noremap){if(items){if(!(items instanceof Array)){self.render(items.item
```

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

### Total.js Date Picker: Select Start Date

Source: https://github.com/totaljs/components/blob/master/0cdn/j-period.html

Handles the selection of a start date in the date picker. It adds a 'selected' class to the element, extracts the date, updates the selected start date, shows the selected dates, and enables the apply button.

```javascript
op.selectstart=function(el){
el.aclass('selected');
var start=op.extractdate(el);
selected.start=start;
op.showdates(selected);
counter++;
op.enable()};
```

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

### Bar Chart Example in Total.js

Source: https://github.com/totaljs/components/blob/master/j-Wiki/example.html

Provides an example of creating a bar chart using the charting component in Total.js. The data is formatted in a CSV-like structure.

```javascript
wiki.push({
  name: 'Chart example',
  body: '# Great charts\n```barchart\nYear | Apples | Bananas | Oranges\n2009 | 80 | 40 | 70\n2010 | 40 | 50 | 300\n2011 | 20 | 70 | 120\n2012 | 100 | 50 | 80\n2013 | 300 | 150 | 40\n```\n\n# Line chart\n\n```linechart\nYear | Apples | Bananas | Oranges\n2009 | 80 | 40 | 70\n2010 | 40 | 50 | 300\n2011 | 20 | 70 | 120\n2012 | 100 | 50 | 80\n2013 | 300 | 150 | 40\n```'
});
```

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

### Initialize Wiki Component (JavaScript)

Source: https://github.com/totaljs/components/blob/master/0cdn/j-wiki@1.html

Initializes the Wiki component with configuration options. It sets up the basic HTML structure, handles resizing, and attaches event listeners for user interaction like expanding topics and closing the wiki.

```javascript
COMPONENT('wiki@1','title:Wiki;margin:20;width:400',function(self,config,cls){var cls2='.'+cls,etopics,container;self.singleton();self.readonly();self.make=function(){self.css('max-width',config.width);self.aclass(cls+' hidden');self.append('<div class="{0}-title"><button><i class="ti ti-times"></i></button><span></span></div><div class="{0}-topics"><div class="{0}-topics-body markdown-small"></div></div>'.format(cls));etopics=self.find(cls2+'-topics-body');container=self.find(cls2+'-topics');self.scrollbar=SCROLLBAR(self.find(cls2+'-topics'),{visibleY:!!config.scrollbarY,orientation:'y'});self.scrollleft=self.scrollbar.scrollLeft;self.scrolltop=self.scrollbar.scrollTop;self.scrollright=self.scrollbar.scrollRight;self.scrollbottom=self.scrollbar.scrollBottom;self.on('resize2',self.resize);self.resize();self.event('click','label',function(){var el=$(this);var index=+el.attrd('index');var parent=el.parent();parent.tclass(cls+'-visible');if(parent.hclass(cls+'-visible')){el=parent.find(cls2+'-topic-body');if(!el.html().length){var item=GET(self.makepath(config.datasource))["index"];el.html(item?(item.body||"").markdown():"")}});self.event('click','button',function(){self.set(false)})};self.resize=function(){var offset=self.element.offset();var header=self.element.find(cls2+'-title').height();container.css('height',WH-header-offset.top-config.margin-1);self.scrollbar.resize()};self.rebind=function(path,value){if(M.is20){let tmp=value;value=path;path=value}var builder=[],template='<div class="{0}-topic"><label data-index="{1}"><i class="ti"></i>{2}</label><div class="{0}-topic-body"></div></div>';for(var i=0;i<(value||
                EMPTYARR
```

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

### Create and Configure a Total.js Window

Source: https://github.com/totaljs/components/blob/master/j-Windows/example.html

This snippet demonstrates how to create a new window instance using the Total.js framework. It includes setting the window's ID, its initial offset and dimensions (position, size, minimum size), title, HTML content, and defining available actions like minimize, maximize, move, resize, close, and a custom menu.

```javascript
var mywindows = [];
mywindows.push({
  id: 'A',
  offset: { x: 200, y: 100, width: 600, height: 400, minwidth: 200, minheight: 200 },
  title: 'A',
  html: '<div class="padding">Lorem ipsum dolor sit amet.</div>',
  actions: {
    minimize: true,
    maximize: true,
    move: true,
    resize: true,
    close: true,
    menu: true
  },
  menu: function(el) {
    alert('MENU');
  }
});
```

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

### Total.js Brand Icon Component Example

Source: https://github.com/totaljs/components/blob/master/0cdn/j-faicons.html

Shows an example of how a specific brand icon, like 'Font Awesome', might be implemented as a component in Total.js.

```javascript
const fontAwesomeComponent = {
    name: 'fa-font-awesome',
    icon: 'fab fa-font-awesome'
};

// Usage example:
// <fa-font-awesome></fa-font-awesome>
```

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

### Initialize and Style Total.js Gallery Component

Source: https://github.com/totaljs/components/blob/master/0cdn/j-gallery@1.html

This snippet initializes the Total.js UI Gallery component, appending a preview modal to the body and setting up event listeners for window resizing, keyboard navigation, and user interactions within the preview modal. It also includes CSS for basic gallery styling and responsive adjustments.

```javascript
COMPONENT('gallery@1',function(self,config,cls){var images,container,current=0,cls2='.'+cls;self.readonly();self.blind();self.nocompile&&self.nocompile();self.init=function(){$('body').append('<div class="{0}-preview hidden"><button name="prev"><i class="ti ti-caret-left"></i></button><button name="next"><i class="ti ti-caret-right"></i></button><div class="{0}-table"><div class="{0}-cell"><div><img src="" alt="" /></div></div></div></div>'.format(cls));W.uigallerycontainer=$('.'+cls+'-preview');ON('resize2 + resize',function(){setTimeout2(cls,function(){$(cls2+'-preview').css({width:WW,height:WH})},500)});$(W).on('keydown',function(e){if(!W.uigalleryinstance||W.uigallerycontainer.hclass('hidden'))return;switch(e.which){case 39:W.uigalleryinstance.next();break;case 37:W.uigalleryinstance.prev();break;case 27:W.uigalleryinstance.close();break}});W.uigallerycontainer.on('click','button',function(){W.uigalleryinstance&&W.uigalleryinstance[this.name]()});W.uigallerycontainer.on('click','img',function(){W.uigalleryinstance&&W.uigalleryinstance.close()})};self.make=function(){self.aclass(cls);images=self.find('img');images.each(function(index){$(this).attrd('index',index)});images=images.toArray();container=$($(cls2+'-preview')[0]);self.event('click','img',function(){var img=$(this);self.show(+img.attrd('index'))});container.on('touchmove',function(e){e.preventDefault()})};self.close=function(){container.aclass('hidden');$('html,body').rclass(cls+'-noscroll');W.uigalleryinstance=null};self.show=function(index){W.uigalleryinstance=self;current=index;var img=images[current];container.find('img').attr('src',$(img).attrd('src'));container.rclass('hidden');container.css('height',$(W).height()+5);$('html,body').aclass(cls+'-noscroll')};self.next=function(){current++;if(current>images.length-1)current=0;self.show(current)};self.prev=function(){current--;if(current<0)current=images.length-1;self.show(current)}});
```

```css
.ui-gallery-noscroll{overflow:hidden !important;overflow-scrolling:auto !important}.ui-gallery-preview,.ui-gallery img{border-radius:var(--radius);cursor:pointer}.ui-gallery-preview{position:fixed;left:0;top:0;bottom:0;right:0;background-color:rgba(255,255,255,0.8);height:100%;z-index:10;overflow:hidden}.ui-gallery-table{width:100%;height:100%;display:table}.ui-gallery-cell{vertical-align:middle;align-self:center;display:table-cell}.ui-gallery-cell img{margin:0 auto;border-radius:4px;box-shadow:0 10px 20px rgba(0,0,0,0.1);width:auto;max-height:100%;height:100%;display:block}.ui-gallery-cell div{position:absolute;bottom:20px;top:20px;right:20px;left:20px;z-index:2}.ui-gallery-preview button{position:absolute;width:50px;height:80px;background-color:#369CE6;color:#FFF;font-size:20px;border:0;top:50%;margin-top:-60px;outline:0;cursor:pointer;z-index:5}.ui-gallery-preview button *{cursor:pointer}.ui-gallery-preview button:hover{opacity:0.9}.ui-gallery-preview button[name="next"]:nth-child(1){right:0;border-radius:var(--radius) 0 0 var(--radius)}.ui-gallery-preview button[name="prev"]:nth-child(2){border-radius:0 var(--radius) var(--radius) 0}@media(max-width:980px){.ui-gallery-cell img{width:100%;max-height:auto;height:auto;max-width:100%;display:block;border-radius:0}.ui-gallery-cell div{position:relative;bottom:0;top:0;right:0;left:0;display:block}}
```

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

### j-DragDropElement Example

Source: https://github.com/totaljs/components/blob/master/j-DragDropElement/readme.md

This example demonstrates how to use the j-DragDropElement UI component in Total.js. It configures the component to log dropped files to the console using the 'exec' configuration option.

```html
<ui-component name="dragdropelement" config="exec:console.log;"></ui-component>
```

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

### j-DataTable Row Class Extension Example

Source: https://github.com/totaljs/components/blob/master/j-DataTable/readme.md

Demonstrates how to extend the class of a row in j-DataTable using Tangular templating. This example adds a 'dg-active-class' if the 'active' property is true.

```javascript
[
	'{{ if active }} dg-active-class{{ fi }}',
	{ name: 'name', text: 'Name', width: 200 },
	// other columns ...
]
```

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

### JavaScript API for Total.js Wiki Component Initialization

Source: https://github.com/totaljs/components/blob/master/0cdn/j-wiki.html

Demonstrates the JavaScript code for initializing and configuring the Total.js Wiki component. It covers setting up the component's structure, handling resize events, and binding data from a specified datasource.

```javascript
COMPONENT('wiki','title:Wiki;margin:20;width:400',function(self,config,cls){var cls2='.'+cls,etopics,container;self.singleton();self.readonly();self.make=function(){self.css('max-width',config.width);self.aclass(cls+' hidden');self.append('<div class="{0}-title"><button><i class="ti ti-times"></i></button><span></span></div><div class="{0}-topics"><div class="{0}-topics-body markdown-small"></div></div>'.format(cls));etopics=self.find(cls2+'-topics-body');container=self.find(cls2+'-topics');self.scrollbar=SCROLLBAR(self.find(cls2+'-topics'),{visibleY:!!config.scrollbarY,orientation:'y'});self.scrollleft=self.scrollbar.scrollLeft;self.scrollTop=self.scrollbar.scrollTop;self.scrollright=self.scrollbar.scrollRight;self.scrollbottom=self.scrollbar.scrollBottom;self.on('resize2',self.resize);self.resize();self.event('click','label',function(){var el=$(this);var index=+el.attrd('index');var parent=el.parent();parent.tclass(cls+'-visible');if(parent.hclass(cls+'-visible')){el=parent.find(cls2+'-topic-body');if(!el.html().length){var item=GET(self.makepath(config.datasource))[index];el.html(item?(item.body||'').markdown():'')}}self.scrollbar.resize()});self.event('click','button',function(){self.set(false)})};self.resize=function(){var offset=self.element.offset();var header=self.element.find(cls2+'-title').height();container.css('height',WH-header-offset.top-config.margin-1);self.scrollbar.resize()};self.rebind=function(path,value){if(M.is20){let tmp=value;value=path;path=value}var builder=[],template='<div class="{0}-topic"><label data-index="{1}"><i class="ti"></i>{2}</label><div class="{0}-topic-body"></div></div>';for(var i=0;i<(value||EMPTYARRAY
```

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

### JavaScript: Initialize and Push Windows

Source: https://github.com/totaljs/components/blob/master/j-InfoWindows/example.html

This snippet demonstrates initializing an array of window objects and pushing them into the array. Each window object defines its unique ID, offset properties (position, size, minimum dimensions), title, HTML content, and a set of actions that can be performed on the window.

```javascript
var mywindows = [];
mywindows.push({
    id: 'A',
    offset: { x: 200, y: 100, width: 600, height: 400, minwidth: 200, minheight: 200 },
    title: 'A',
    html: '<div class="padding">Lorem ipsum dolor sit amet.</div>',
    actions: {
        minimize: true,
        maximize: true,
        move: true,
        resize: true,
        close: true
    }
});
mywindows.push({
    id: 'B',
    offset: { x: 600, y: 300, width: 600, height: 400, minwidth: 200, minheight: 200 },
    title: 'B',
    html: '<div class="padding">Lorem ipsum dolor sit amet.</div>',
    actions: {
        minimize: true,
        maximize: false,
        move: true,
        resize: true,
        close: true
    }
});
```

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

### j-ASelected Configuration Example

Source: https://github.com/totaljs/components/blob/master/j-ASelected/readme.md

Demonstrates how to configure the j-ASelected component in Total.js. This example shows setting a custom class, a specific jQuery selector, and enabling strict URL comparison.

```javascript
// Example configuration for j-ASelected

// Using default selector 'a' and default class 'selected'
SET('jcomponent.selected', true);

// Custom configuration
SET('jcomponent.selected', {
    class: 'active-link',
    selector: 'nav a',
    strict: true,
    delay: 500,
    watch: 'url'
});
```

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

### j-Intro Configuration Options

Source: https://github.com/totaljs/components/blob/master/j-Intro/readme.md

This snippet outlines the various configuration options available for the j-Intro component. These options control the behavior, appearance, and callbacks for the intro tour, including conditions, button text, execution functions, and visual dimensions.

```JavaScript
{
  if: "String",
  next: "String",
  close: "String",
  page: "function(page) {}",
  exec: "function() {}",
  check: "function(done) {}",
  remove: "Boolean",
  closebutton: "Boolean",
  width: "Number",
  height: "Number",
  delay: "Number",
  nexticon: "String",
  doneicon: "String"
}
```

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

### Get Editor Selection HTML

Source: https://github.com/totaljs/components/blob/master/0cdn/j-paper@1.html

Retrieves the HTML content of the current selection within the editor. It supports different browser implementations for getting the selection and returns the HTML as a string.

```javascript
self.getSelection=function(node){if(D.selection&&D.selection.type==='Text')return D.selection.createRange().htmlText;else if(!W.getSelection)return;var sel=W.getSelection();if(!sel.rangeCount)return'';var container=D.createElement('div');for(var i=0,len=sel.rangeCount;i<len;++i)container.appendChild(sel.getRangeAt(i).cloneContents());return node?container:container.innerHTML};
```

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

### Date Range Calculation

Source: https://github.com/totaljs/components/blob/master/0cdn/j-period@1.html

Calculates and returns an array of Date objects representing all days within a specified start and end date, inclusive. Ensures the start date is not after the end date.

```javascript
op.calcrange = function(start, end) {
  if (start.getTime() > end.getTime()) {
    var tmp = end;
    start = end;
    end = tmp
  }
  var date = new Date(start.getTime());
  var dates = [];
  while (date <= end) {
    dates.push(new Date(date));
    date.setDate(date.getDate() + 1)
  }
  return dates
}
```

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

### Spotlight Component Initialization (JavaScript)

Source: https://github.com/totaljs/components/blob/master/0cdn/j-spotlight.html

Initializes the Spotlight component with configuration options. It sets up the DOM structure, event listeners for input and keyboard events, and defines methods for searching, rendering results, and handling item selection. Dependencies include Tangular for templating and Total.js AJAX for data fetching.

```javascript
COMPONENT('spotlight','height:40;placeholder:Search',function(self,config,cls){var cls2='.'+cls,container,timeout,input,search,scroller=null,is=false,selectedindex=0,resultscount=0,skip=false,checksum,prevclass;self.items=null;self.template=Tangular.compile('<figure data-index="{{ $.index}}"{{ if selected}} class="selected"{{ fi}}>{{ if icon}}<i class="{{ icon}}"></i>{{ fi}}{{ if html}}{{ html | raw}}{{ else}}{{ name | raw}}{{ fi}}</figure>');self.callback=null;self.readonly();self.singleton();self.nocompile&&self.nocompile();var onclick=function(e){if(is&&(!$(e.target).closest(cls2).length))self.hide()};self.select=function(index){var item=self.items[index];if(item){self.opt.callback&&self.opt.callback(item);if(!self.opt.recent)return;var key='spotlight'+(self.opt.id||'');var arr=CACHE(key)||[];var id=HASH(item)+'';item.spotlightid=id;if(arr.length&&arr.findItem('spotlightid',id))return;arr.unshift(item);if(arr.length>10)arr.pop();CACHE(key,arr,typeof(self.opt.recent)==='string'?self.opt.recent:'1 month')}};self.make=function(){self.aclass(cls+'-layer hidden');self.append('<div class="{1}"><div class="{1}-search"><span><i class="ti ti-search"></i></span><div><input type="text" placeholder="{0}" class="{1}-search-input" /></div></div><div class="{1}-container"><div class="{1}-items"></div></div></div>'.format(config.placeholder,cls));container=self.find(cls2+'-items');scroller=self.find(cls2+'-container');input=self.find('input');search=self.find(cls2);self.event('click','figure[data-index]',function(e){self.select(+this.getAttribute('data-index'));self.hide();e.preventDefault();e.stopPropagation()});self.on('resize2',function(){is&&self.hide(0)});self.event('keydown','input',function(e){skip=false;switch(e.which){case 27:skip=true;self.hide();self.opt.cancel&&self.opt.cancel();break;case 13:skip=true;var sel=self.find('figure.selected');sel.length&&self.select(+sel.attrd('index'));self.hide();break;case 38:skip=true;selectedindex--;if(selectedindex<0)selectedindex=0;else self.move();break;case 40:skip=true;selectedindex++;if(selectedindex>=resultscount)selectedindex=resultscount;else self.move();break}if(skip){e.preventDefault();e.stopPropagation()}});self.event('keyup','input',function(){if(!skip)setTimeout2(self.id,self.search,self.opt.delay||100,null,this.value)})};self.search=function(value){if(typeof(self.opt.search)==='function'){self.opt.search(value,self.render)}else{var url=self.opt.search.format(encodeURIComponent(value));if(self.opt.cache){if(M.is20)AJAX(url+' <'+self.opt.cache+'>',self.render);else AJAXCACHE(url,self.render,self.opt.cache)}else AJAX(url,self.render)}};self.move=function(){var itemheight=self.opt.height||config.height,counter=0,h=scroller.css('max-height').parseInt();container.find('figure').each(function(){var el=$(this);if(el.hclass('hidden'))return;var is=selectedindex===counter;el.tclass('selected',is);if(is){var t=(itemheight*counter)-itemheight;scroller.scrollTop((t+itemheight*5)>h?t:0)}counter++})};self.render=function(items,noremap){if(items){if(!(items instanceof Array)){self.render(items.items
```

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

### Initialize Kanban Component

Source: https://github.com/totaljs/components/blob/master/0cdn/j-kanban@1.html

Initializes the Kanban component with specified configurations. It sets up the basic structure, event listeners for drag and drop, and handles initial rendering and resizing. Dependencies include Tangular for templating and a SCROLLBAR component.

```javascript
COMPONENT('kanban@1','parent:parent;margin:0;padding:10;style:1',function(self,config,cls){var cls2='.'+cls,init=false,events={},draggable,gtemplate,body,selector=cls2+'-item',adi='data-id',skip=false,cachesize,groups={};self.readonly();self.make=function(){self.aclass(cls);var scr=self.find('script');gtemplate=Tangular.compile(scr[0].innerHTML);self.template=Tangular.compile(scr[1].innerHTML);scr.remove();self.append('<div class="{0}-container"><div class="{0}-body"></div></div>'.format(cls));body=self.find(cls2+'-body');self.scrollbar=new SCROLLBAR(self.find(cls2+'-container'),{visibleY:1});self.resize();config.dblclick&&self.event('dblclick',selector,function(){var el=$(this);var group=self.findgroup(el.attrd('id'));group&&self.SEEX(config.dblclick,group)});self.event('dragenter dragover dragexit drop dragleave dragstart',events.ondrag);$(document).on('mousedown',selector,events.ondown);self.on('resize2 + resize',self.resize2)};self.findgroup=function(id){var data=self.get();for(var i=0;i<data.length;i++){var item=data[i],index=item.items.findIndex('id',id);if(index!==-1)return{group:item,item:item.items[index],index:index}}};self.move=function(fromid,togroup,toindex){var data=self.get();var group=self.findgroup(fromid);if(!group)return;var index=group.index,item=group.item;group=group.group;var target=data.findItem('id',togroup);if(!target)return false;var item=group.items[index];if(toindex!=null){if(group===target)target.items.splice(target.items.indexOf(item),1);target.items.splice(toindex,0,item)}else target.items.push(item);if(group!==target)group.items.splice(index,1);skip=true;self.update();if(config.move){target={group:target,item:item,index:toindex};self.EXEC(config.move,group,target)}self.resizebody();return true};self.remove=function(id){var el=self.find(cls2+'-item[data-id="{0}"]'.format(id));if(el.length){el.remove();var group=self.findgroup(id);if(group){group.group.items.splice(group.index,1);skip=true;self.update();config.remove&&self.EXEC(config.remove,group);return true}}};events.ondrag=function(e){if(!draggable)return;if(e.type!=='dragstart'){e.stopPropagation();e.preventDefault()}switch(e.type){case'drop':var a=draggable,b=e.target,node,nodetype;while(true){var cn=b.getAttribute('class');if(cn===(cls+'-group-items')||cn===(cls+'-group-body')){if(cn===cls+'-group-items')b=b.parentNode;node=b.parentNode;nodetype=1;break}else if(cn===(cls+'-item')){node=b;nodetype=2;break}else b=b.parentNode;if(b===self.dom||b==null||b.tagName==='HTML')return}var aid=a.getAttribute(adi);if(nodetype===1){self.move(aid,node.getAttribute(adi),null,true);$(node).find(cls2+'-group-items')[0].appendChild(a);return}node.parentNode.insertBefore(a,node);var index=-1,children=node.parentNode.children;for(var i=0;i<children.length;i++){if(children[i]===a){index=i;break}}var parent=node,id;for(var i=0;i<5;i++){parent=parent.parentNode;if(parent!==self.dom){id=parent.getAttribute(adi);if(id)break}}id&&self.move(aid,id,index,true);break;case'dragstart':var eo=e.originalEvent;if(eo.dataTransfer)eo.dataTransfer.setData('text','1');break;case'dragenter':case'dragover':case'dragexit':case'dragleave':break}};events.ondown=function(){draggable=this};self.resize2=function(){setTimeout2(self.ID+'resize',self.resize,300)};self.destroy=function(){$(document).off('mousedown',selector,events.ondown)};self.resize=function(){if(self.release())return;var el=self.parent(config.parent);var h=el.height();var w=el.width();if(h===0||w===0){self.$waiting&&clearTimeout(self.$waiting);self.$waiting=setTimeout(self.resize,234);return}var width=WIDTH();var key=width+'x'+w+'x'+h;if(cachesize===key)return;cachesize=key;var margin=config.margin,responsivemargin=config['margin'+width];if(responsivemargin!=null)margin=responsivemargin;var css={};css.height=h-margin;self.find(cls2+'-container').css(css);self.element.SETTER('*','resize');var c=cls+'-hidden';self.hclass(c)&&self.rclass(c,100);self.scrollbar.resize();if(!init){self.rclass('invisible',250);init=true}setTimeout(self.resizebody,100)};self.resizebody=function(){var arr=body.find(cls2+'-group');var sum=config.padding*2;for(var i=0;i<arr.length;i++)sum+=$(arr[i]).width();var container=self.find(cls2+'-container');var w=container.width();var h=container.height();body.css('width',sum<w?'auto':(sum+'px'));self.scrollbar.resize();arr=body.find(cls2+'-scrollbar');var prop=config.style===1?'height':'max-
```

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

### j-Configuration Declaration Example

Source: https://github.com/totaljs/components/blob/master/j-Configuration/readme.md

This snippet demonstrates the declaration of configuration items for the j-Configuration component. It includes examples of grouping, defining string inputs with icons and disable conditions, and providing summaries. The structure is an array of objects, where each object represents a configuration field.

```javascript
[ 
	{
		name: 'My group label',
		type: 'group',
		// summary: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, nostrum.',
		// icon: 'ti ti-home'
	},
	{
		id: 'name',
		name: 'Application name',
		type: 'string',
		icon: 'ti ti-home',
		disable: 'model => model.interval < 100',
		summary: 'Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iste eos, illum voluptas assumenda sunt possimus necessitatibus nobis provident dicta deserunt.',
		required: true
	},
	... other items
]
```

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

### j-Breadcrumb Data Source Example

Source: https://github.com/totaljs/components/blob/master/j-Breadcrumb/readme.md

This example demonstrates the structure for providing data to the j-Breadcrumb component. Each item in the array represents a breadcrumb link with a 'name' (label) and 'url' (address). An optional 'callback' function can be provided for custom click event handling.

```javascript
[
	{
		name: 'Home',
		url: '/'
	},
	{
		name: 'Products',
		url: '/'
	}
];
```