239 lines
		
	
	
		
			6.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
		
			Executable File
		
	
	
		
			Vendored
		
	
	
	
			
		
		
	
	
			239 lines
		
	
	
		
			6.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
		
			Executable File
		
	
	
		
			Vendored
		
	
	
	
| // jQuery? We don't need no stinkin' jQuery
 | |
| 
 | |
| if (!String.prototype.trim) {
 | |
|   String.prototype.trim = function () {
 | |
|     return this.replace(/^\s+|\s+$/g, '');
 | |
|   };
 | |
| }
 | |
| 
 | |
| (function(){
 | |
| 
 | |
|   // load up the icon object from whats in the DOM
 | |
|   var
 | |
|   x, l, y, t,
 | |
|   iconElement,
 | |
|   tags,
 | |
|   pack,
 | |
|   isResult,
 | |
|   totalResults,
 | |
|   clipboardTimer,
 | |
|   icons = {},
 | |
|   iconElements = document.getElementsByTagName("li"),
 | |
|   searchInput = document.getElementById("search"),
 | |
|   iconsUL = document.getElementById("icons");
 | |
| 
 | |
|   for(x = 0, l = iconElements.length; x < l; x++) {
 | |
|     iconElement = iconElements[x];
 | |
| 
 | |
|     if(iconElement.className.length < 6) {
 | |
|       continue;
 | |
|     }
 | |
| 
 | |
|     if(icons[ iconElement.className ]) {
 | |
|       alert(iconElement.className + " already exists");
 | |
|       continue;
 | |
|     }
 | |
| 
 | |
|     tags = iconElement.getAttribute("data-tags");
 | |
|     pack = iconElement.getAttribute("data-pack");
 | |
| 
 | |
|     iconElement.icon = icons[ iconElement.className ] = {
 | |
|       name: iconElement.className,
 | |
|       tags: (tags ? tags.split(',') : []),
 | |
|       pack: (pack ? pack : 'default'),
 | |
|       el: iconElement,
 | |
|       show: true,
 | |
|       code: getContentForIcon(iconElement.className),
 | |
|       animation: (iconElement.getAttribute("data-animation") === "true")
 | |
|     };
 | |
| 
 | |
|     tags = iconElement.className.split('-');
 | |
|     for(y = 0; y < tags.length; y++) {
 | |
|       tags[y] = tags[y].trim().toLowerCase();
 | |
|       if(tags[y].length > 0 && tags[y] !== "icon") {
 | |
|         iconElement.icon.tags.push(tags[y]);
 | |
|       }
 | |
|     }
 | |
|     addEvent(iconElement, 'click', panelClick);
 | |
|     addEvent(iconElement, 'mouseover', iconMouseOver);
 | |
|   }
 | |
|   totalResults = icons.length;
 | |
| 
 | |
|   // search
 | |
|   function onSearchFocus(){
 | |
|     iconsUL.className = "search-init";
 | |
|     searchInput.className = "has-text"
 | |
|     this.placeholder = "";
 | |
|     hideIconPanel();
 | |
|   }
 | |
|   addEvent(searchInput, "focus", onSearchFocus);
 | |
|   function onSearchBlur(){
 | |
|     iconsUL.className = "";
 | |
|     this.placeholder = "Search";
 | |
|     if(totalResults < 1 || this.value.trim() === "") {
 | |
|       this.value = "";
 | |
|       this.className = "";
 | |
|       showAll();
 | |
|     }
 | |
|     hideIconPanel();
 | |
|   }
 | |
|   addEvent(searchInput, "blur", onSearchBlur);
 | |
|   function onSearchKeyUp(e) {
 | |
|     var keyCode = e.which || e.keyCode;
 | |
|     if(keyCode === 27) {
 | |
|       this.value = "";
 | |
|       searchInput.className = "";
 | |
|       this.blur();
 | |
|     } else if(this.value.trim() === "") {
 | |
|       showAll();
 | |
|       this.value = "";
 | |
|       iconsUL.className = "search-init";
 | |
|       hideIconPanel();
 | |
|     } else {
 | |
|       hideIconPanel();
 | |
|       iconsUL.className = "search-results";
 | |
|       searchQuery(this.value);
 | |
|     }
 | |
|   }
 | |
|   addEvent(searchInput, "keyup", onSearchKeyUp);
 | |
| 
 | |
|   function searchQuery(query) {
 | |
|     if(!query) return;
 | |
| 
 | |
|     totalResults = 0;
 | |
| 
 | |
|     query = query.trim().toLowerCase();
 | |
| 
 | |
|     var terms = query.split(' ');
 | |
| 
 | |
|     if(terms.length < 1) {
 | |
|       showAll();
 | |
|       iconsUL.className = "search-init";
 | |
|       return;
 | |
|     }
 | |
| 
 | |
|     iconsUL.className = "search-results";
 | |
|     searchInput.className = "has-text";
 | |
| 
 | |
|     // set all to show
 | |
|     for(x in icons) {
 | |
|       icons[x].show = true;
 | |
|     }
 | |
| 
 | |
|     // filter down for each term in the query
 | |
|     for(t = 0; t < terms.length; t++) {
 | |
|       for(x in icons) {
 | |
|         if(!icons[x].show) continue;
 | |
|         isResult = false;
 | |
|         for(y = 0; y < icons[x].tags.length; y++) {
 | |
|           if( icons[x].tags[y].indexOf(terms[t]) > -1 ) {
 | |
|             isResult = true;
 | |
|             break;
 | |
|           }
 | |
|         }
 | |
|         if(!isResult) {
 | |
|           icons[x].show = false;
 | |
|         }
 | |
|       }
 | |
|     }
 | |
| 
 | |
|     // show or hide
 | |
|     for(x in icons) {
 | |
|       if(icons[x].show) {
 | |
|         totalResults++;
 | |
|         if(icons[x].el.style.display !== "inline-block") {
 | |
|           icons[x].el.style.display = "inline-block";
 | |
|         }
 | |
|       } else {
 | |
|         if(icons[x].el.style.display !== "none") {
 | |
|           icons[x].el.style.display = "none";
 | |
|         }
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   function showAll() {
 | |
|     totalResults = icons.length;
 | |
|     for(x in icons) {
 | |
|       icons[x].show = true;
 | |
|       if(icons[x].el.style.display !== "inline-block") {
 | |
|         icons[x].el.style.display = "inline-block";
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   function addEvent(el, ev, fn) {
 | |
|     if (el.addEventListener) {
 | |
|         el.addEventListener(ev, fn, false);
 | |
|     } else if (el.attachEvent) {
 | |
|         el.attachEvent('on' + ev, fn);
 | |
|     } else {
 | |
|         el['on' + ev] = fn;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   var iconPanel = document.getElementById("icon-panel");
 | |
|   var iconName = document.getElementById("icon-name");
 | |
| 
 | |
|   var mouseOverTimeout;
 | |
|   function iconMouseOver(e) {
 | |
|     var target = (e.currentTarget) ? e.currentTarget : e.srcElement;
 | |
|     if(target.className.indexOf("active") === -1) {
 | |
|       clearTimeout(mouseOverTimeout);
 | |
|       mouseOverTimeout = setTimeout(hideIconPanel, 20);
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   function panelClick(e) {
 | |
|     var target = (e.currentTarget) ? e.currentTarget : e.srcElement;
 | |
|     if(target && target.icon) {
 | |
|       if(target.className.indexOf("active") > -1) {
 | |
|         hideIconPanel();
 | |
|         return;
 | |
|       }
 | |
|       for(x in icons) {
 | |
|         if(icons[x].el.className.indexOf("active") > -1) {
 | |
|           icons[x].el.className = icons[x].el.className.replace(" active", "");
 | |
|         }
 | |
|       }
 | |
|       iconPanel.style.top = (target.offsetTop + 60) + "px";
 | |
|       iconPanel.style.left = (target.offsetLeft - 85) + "px";
 | |
|       target.className += " active";
 | |
|       iconName.value = target.icon.name;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   function hideIconPanel() {
 | |
|     if(iconPanel.style.top !== "-9999px") {
 | |
|       iconPanel.style.top = "-9999px";
 | |
|     }
 | |
|     for(x in icons) {
 | |
|       if(icons[x].el.className.indexOf("active") > -1) {
 | |
|         icons[x].el.className = icons[x].el.className.replace(" active", "");
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   function getContentForIcon(className) {
 | |
|     try {
 | |
|       var rules = document.styleSheets[0].cssRules;
 | |
|       for(var j=0; j<rules.length; j++) {
 | |
|         if(rules[j].selectorText === "." + className + "::before") {
 | |
|           var content = rules[j].style["content"];
 | |
|           if(content) {
 | |
|             var decimalValue = content.charCodeAt().toString(10).replace(/\D/g, ''); //clean the value
 | |
|             return "\\" + Number(decimalValue).toString(16);
 | |
|           }
 | |
|         }
 | |
|       }
 | |
|     } catch(e) {}
 | |
|   }
 | |
| 
 | |
|   if(location.hash && location.hash.length > 1 && location.hash !== '#cdn') {
 | |
|     searchInput.value = location.hash.replace('#', '').replace(/%20/g, ' ');
 | |
|     iconsUL.className = "search-results";
 | |
|     searchQuery(searchInput.value);
 | |
|   }
 | |
| 
 | |
| })();
 | 
