Updated CDN.

0cdn/j-spotlight.html

@@ -1,2 +1,2 @@
 <style>.ui-spotlight-layer{position:fixed;width:100%;height:100%;left:0;top:0;overflow:hidden;z-index:101;background-color:rgba(200,200,200,0.8);transition:0.25s transform cubic-bezier(0.23,1,0.32,1);-webkit-transition:0.25s transform cubic-bezier(0.23,1,0.32,1);-moz-transition:0.25s transform cubic-bezier(0.23,1,0.32,1);-ms-transition:0.25s transform cubic-bezier(0.23,1,0.32,1);transform:scale(0.8);-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8)}.ui-spotlight{position:absolute;top:8%;z-index:20;box-shadow:0 1px 20px rgba(0,0,0,0.05);transform:translate(0px,20px);-webkit-transform:translate(0px,20px);-moz-transform:translate(0px,20px);-ms-transform:translate(0px,20px);background-color:#FFF;border-radius:2px;overflow:hidden}.ui-spotlight-search{height:60px;background:#FFF;border-radius:2px 2px 0 0;border-bottom:1px solid #E0E0E0}.ui-spotlight-search input{width:100%;background-color:#FFF;border:0;font-size:20px;outline:0}.ui-spotlight-search > div{margin-left:42px;padding:15px 10px 0 0}.ui-spotlight-search > span{float:left;width:32px;text-align:right;padding:17px 0 0;font-size:18px}.ui-spotlight .selected{background-color:#F8F8F8}.ui-spotlight-visible{opacity:1;filter:alpha(opacity=100);transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1)}.ui-spotlight img{vertical-align:middle}.ui-spotlight-container{max-height:200px;overflow-x:hidden;overflow-y:auto;overflow-scrolling:touch;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-ms-overflow-scrolling:touch;width:}.ui-spotlight figure{border-bottom:1px solid #E5E5E5;font-size:14px;padding:0 10px 0;background-color:#FFF;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:40px;margin:0;display:block;line-height:39px}.ui-spotlight figure i{width:15px;text-align:center;margin-right:7px}.ui-spotlight figure:hover{background-color:#F8F8F8}.ui-spotlight-noscroll{overflow:hidden !important}.ui-dark .ui-spotlight-layer{background-color:rgba(0,0,0,0.8)}.ui-dark .ui-spotlight{background-color:#404040}.ui-dark .ui-spotlight-search{background:#202020;border-bottom-color:#404040}.ui-dark .ui-spotlight-search input{background-color:#202020}.ui-dark .ui-spotlight .selected{background-color:#303030;color:#FFF !important}.ui-dark .ui-spotlight figure{border-bottom-color:#404040;background-color:#202020}.ui-dark .ui-spotlight figure:hover{background-color:#282828}</style>
-<script>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;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=PREF[key]||[],id=HASH(item)+'';item.spotlightid=id;if(arr.length&&arr.findItem('spotlightid',id))return;arr.unshift(item);if(arr.length>10)arr.pop();PREF.set(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="fa fa-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()});$(W).on('resize',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,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)AJAXCACHE(url,self.render,self.opt.cache);else AJAX(url,self.render)}};self.move=function(){var 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=(config.height*counter)-config.height;if((t+config.height*5)>h)scroller.scrollTop(t);else scroller.scrollTop(0)}counter++})};self.render=function(items,noremap){if(items){if(!(items instanceof Array)){self.render(items.items||items.response);return}if(!noremap&&self.opt.remap){var tmp=self.opt.remap(items);if(tmp)items=tmp}var newchecksum;if(self.items&&items){newchecksum=HASH(STRINGIFY(items,true));if(checksum===newchecksum)return}checksum=newchecksum;self.items=items}selectedindex=0;resultscount=self.items.length;var builder=[],indexer={};for(var i=0;i<self.items.length;i++){var item=items[i];indexer.index=i;if(item.icon&&item.icon.indexOf(' ')===-1)item.icon='fa fa-'+item.icon;builder.push(self.template(item,indexer))}container.html(builder);self.move()};self.show=function(opt){if(is){clearTimeout(timeout);self.hide(0);return}var key='spotlight'+(opt.id||'');var recent=PREF[key];$(document).on('touchstart mousedown',onclick);self.opt=opt;self.rclass('hidden');if(opt.recent==null)opt.recent='3 days';if(opt.clear)input.val('');if(!self.items||!self.items.length){selectedindex=0;if(recent&&recent.length)self.render(recent,true);else self.render([])}var w=((WW/(isMOBILE?1.1:1.3))>>0);search.css({width:w,left:((WW-w)/2)});scroller.css({width:w+50,'max-height':(WH/1.3)>>0});setTimeout(function(){self.aclass(cls+'-visible')},100);setTimeout(function(){input.focus()},500);is=true;$('html,body').aclass(cls+'-noscroll')};self.hide=function(sleep){if(is){clearTimeout(timeout);timeout=setTimeout(function(){$(document).off('touchstart mousedown',onclick);self.aclass('hidden').rclass(cls+'-visible');is=false;$('html,body').rclass(cls+'-noscroll')},sleep?sleep:100)}}});</script>
+<script>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;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=PREF[key]||[],id=HASH(item)+'';item.spotlightid=id;if(arr.length&&arr.findItem('spotlightid',id))return;arr.unshift(item);if(arr.length>10)arr.pop();PREF.set(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="fa fa-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()});$(W).on('resize',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,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)AJAXCACHE(url,self.render,self.opt.cache);else AJAX(url,self.render)}};self.move=function(){var 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=(config.height*counter)-config.height;if((t+config.height*5)>h)scroller.scrollTop(t);else scroller.scrollTop(0)}counter++})};self.render=function(items,noremap){if(items){if(!(items instanceof Array)){self.render(items.items||items.response);return}if(!noremap&&self.opt.remap){var tmp=self.opt.remap(items);if(tmp)items=tmp}var newchecksum;if(self.items&&items){newchecksum=HASH(STRINGIFY(items,true));if(checksum===newchecksum)return}checksum=newchecksum;self.items=items}selectedindex=0;resultscount=self.items.length;var builder=[],indexer={};for(var i=0;i<self.items.length;i++){var item=items[i];indexer.index=i;if(item.icon&&item.icon.indexOf(' ')===-1)item.icon='fa fa-'+item.icon;builder.push(self.template(item,indexer))}container.html(builder);self.move()};self.show=function(opt){if(is){clearTimeout(timeout);self.hide(0);return}var key='spotlight'+(opt.id||'');var recent=PREF[key];$(document).on('touchstart mousedown',onclick);self.opt=opt;self.rclass('hidden');if(opt.recent==null)opt.recent='3 days';if(opt.clear)input.val('');if(!self.items||!self.items.length){selectedindex=0;if(recent&&recent.length)self.render(recent,true);else{self.render([]);opt.init&&self.search('')}}var w=((WW/(isMOBILE?1.1:1.3))>>0);search.css({width:w,left:((WW-w)/2)});scroller.css({width:w+50,'max-height':(WH/1.3)>>0});setTimeout(function(){self.aclass(cls+'-visible')},100);setTimeout(function(){input.focus()},500);is=true;$('html,body').aclass(cls+'-noscroll')};self.hide=function(sleep){if(is){clearTimeout(timeout);timeout=setTimeout(function(){$(document).off('touchstart mousedown',onclick);self.aclass('hidden').rclass(cls+'-visible');is=false;$('html,body').rclass(cls+'-noscroll')},sleep?sleep:100)}}});</script>