@awesomeness-js/server 1.0.1 → 1.1.0

package/ui/components/insertIntoList/insertIntoList.jquery.js

@@ -0,0 +1,150 @@
+(function(){
+
+	// IMPORTANT NOTE: with custom sortFn's use toLowerCase !!
+	$.fn.extend({
+
+		//Name the function
+		insertIntoList: function($ul, options) {
+
+			var defaults = {
+				'sortFn':function($elm){
+
+					return $elm.html().toLowerCase(); 
+
+				},
+				'insertBeforeLast':false,
+				'za':false,
+				'selector':null
+			};
+
+			var options =  $.extend(defaults, options); // jshint ignore:line
+
+			return this.each(function() {
+
+				if(!$ul){
+
+					return false; 
+
+				}
+
+				// From here on in, it's "normal" jQuery
+
+				var $li = $(this); // new item
+				var $lis;
+
+
+				if(options.selector){
+
+					$lis = $ul.children(options.selector); // existing items
+				
+				} else {
+
+					$lis = $ul.children(); // existing items
+				
+				}
+
+				var newHtml = options.sortFn($li);
+
+				if($lis.length === 0){
+
+					$li.appendTo($ul); 
+
+					return; 
+
+				}
+
+				$lis.each(function(k,e){
+
+					var $t = $(this);
+
+					// meta hack for skip
+					if($t.data('insertIntoListSkip') === true){
+
+						return true; 
+
+					}
+
+					var isLast = $t.is( ":last-child" );
+					var current = options.sortFn($t);
+
+					if(options.insertBeforeLast && isLast){
+
+						// insert before last child
+						$li.insertBefore($t);
+						
+						return false;
+
+					}
+
+					if(options.za){
+
+						if(current < newHtml){
+
+							$li.insertBefore($t);
+							
+							return false;
+
+						} else {
+
+							// continue if it is not the last item
+							if(!isLast){
+
+								return true; 
+
+							}
+
+							// it is the last item
+							if(options.insertBeforeLast){
+
+								$li.insertBefore($t);
+							
+							} else {
+
+								$li.insertAfter($t);
+							
+							}
+
+						}
+
+					} else {
+
+						if(current > newHtml){
+
+							$li.insertBefore($t);
+							
+							return false;
+
+						} else {
+
+							// continue if it is not the last item
+							if(!isLast){
+
+								return true; 
+
+							}
+
+							// it is the last item
+							if(options.insertBeforeLast){
+
+								$li.insertBefore($t);
+							
+							} else {
+
+								$li.insertAfter($t);
+							
+							}
+
+						}
+
+					}
+
+
+				});
+
+  			}); // each CORE
+
+		} // xoSelect Function
+
+	}); // extend
+
+})();

package/ui/components/tag/category.js

@@ -0,0 +1,8 @@
+export default function tagCategory(tag){
+
+	return tag
+		.toLowerCase()          // Convert to lowercase
+		.replace(/[^a-z\s]/g, '') // Remove non a-z characters
+		.replace(/\s+/g, '-');  // Replace spaces with hyphens
+
+}

package/ui/components/tag/index.js

@@ -0,0 +1,33 @@
+import ui from '#ui';
+
+export default (tags)=>{
+
+	if(typeof(tags) === 'string'){
+
+		tags = [ tags ]; 
+
+	}
+	
+	const $tags = $('<div class="tags"></div>');
+
+	tags.forEach((tag)=>{
+
+		const catClass = `category-${ui.tag.category(tag)}`;
+
+		const $tag = $(`<span class="tag ${catClass}">${tag}</span>`).appendTo($tags);
+
+		if(typeof tag.callback === 'function'){
+
+			$tag.click(()=>{
+
+				tag.callback(tag, catClass); 
+
+			});
+
+		}
+
+	});
+
+	return $tags;
+	
+};

package/ui/components/tag/list.js

@@ -0,0 +1,42 @@
+import ui from '#ui';
+// awesomeness import 'insertIntoList';
+
+export default ({
+	tags,
+	title = 'Categories',
+	onClick = (tag)=>{}
+})=>{
+
+	const $area = $('<div class="tag-map"></div>').appendTo('body');
+
+	let $categoriesH = $(`<h1 class="">${title}</h1>`).appendTo($area);
+	let $categories = $(`<div class="tag-list"></div>`).appendTo($area);
+
+
+	let allLength = tags.length;
+
+	tags.forEach((tag) => {
+
+		const tagCat = ui.tag.category(tag.name);
+			
+		let $tag = $(`<div class="tag category-${tagCat}">${tag.name} <span>${tag.count}</span></div>`)
+			.data('tagCount', tag.count)
+			.data('tag', tag.name)  
+			.insertIntoList($categories,{
+				za: true,
+				sortFn: ($elm)=>{
+
+					return $elm.data('tagCount') * 1;
+				
+				}
+			}).click(()=>{
+
+				onClick(tag); 
+
+			});
+
+	});
+
+	return $area;
+
+};

package/ui/components/tag/map.js

@@ -0,0 +1,64 @@
+// awesomeness import 'insertIntoList';
+
+export default ({
+	datas,
+	title = 'Categories',
+	onClick = (category)=>{}
+})=>{
+
+	let categories = {};
+
+	datas.forEach(function(thing){
+
+		thing.tags.forEach(function(tag){
+
+			if(!categories[tag]) categories[tag] = [];
+			categories[tag].push(thing);
+		
+		});
+	
+	});
+
+	const $area = $('<div class="tag-map"></div>').appendTo('body');
+
+	$(`<h1>${title}</h1>`).appendTo($area);
+	let $tagMap = $('<div class="tag-map"></div>').appendTo($area);
+
+	function tagCategory(tag){
+
+		return tag
+			.toLowerCase()          // Convert to lowercase
+			.replace(/[^a-z\s]/g, '') // Remove non a-z characters
+			.replace(/\s+/g, '-');  // Replace spaces with hyphens
+	
+	}
+
+	let allLength = datas.length;
+
+	categories['all'] = datas;
+
+	$.each(categories, function(category, things){
+
+		const tagCat = tagCategory(category);
+			
+		let $category = $(`<div class="category tag category-${tagCat}">${category} <span>${things.length}</span></div>`)
+			.data('categoryCount', things.length)
+			.data('category', category)  
+			.insertIntoList($tagMap,{
+				za: true,
+				sortFn: ($elm)=>{
+
+					return $elm.data('categoryCount') * 1;
+				
+				}
+			}).click(()=>{
+
+				onClick(category); 
+
+			});
+
+	});
+
+	return $area;
+
+};

package/ui/components/tag/tagMap.css

@@ -0,0 +1,60 @@
+.tag-map {
+	display: block;
+	position: relative;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.tag-map .tag-list {
+	margin-top: 20px;
+
+}
+
+.tag-map .tag-list .tag {
+	width: 100%;
+}
+
+.app-size-p .tag-list .category {
+	font-size: 1em;
+}
+
+.app-size-t .tag-list .category {
+	font-size: 1.2em;
+}
+
+.tag-map .tag {
+	background-color: #ffffff;
+	color: #2b2b2b;
+	padding: 12px 20px;
+	margin-right: 10px;
+	margin-bottom: 10px;
+	border-radius: 3px;
+	border: solid 1px #dddddd;
+	font-size: 1.5em;
+	font-weight: 300;
+	font-family: Raleway;
+	letter-spacing: 3px;
+	transition: all 200ms ease-in-out;
+	position: relative;
+	padding-right: 50px;
+	display: inline-block;
+}
+
+.tag-map .tag:hover {
+	cursor: pointer;
+}
+
+.tag-map .tag span {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	font-size: 0.6em;
+	background-color: #ffffff;
+	color: #777;
+	width: 32px;
+	height: 32px;
+	text-align: center;
+	border-radius: 33px;
+	padding-top: 7px;
+	padding-left: 3px;
+}

package/ui/components/tag/tags.css

@@ -0,0 +1,20 @@
+.tags{
+  margin-top: 10px;
+  display: inline-block;
+}
+
+.tags span {
+  font-family: 'Raleway';
+  font-size: 0.8em;
+  padding: 5px 8px;
+  border-radius: 3px;
+  margin-right: 6px;
+  border: solid 1px #e4e4e4;
+  margin-bottom: 6px;
+  display: inline-block;
+  color: #777;
+}
+
+.tags span:hover {
+  cursor: pointer;
+}

package/ui/core/css/_normalize.css

@@ -0,0 +1,57 @@
+#app {
+    margin: 0;
+    padding: 0;
+    background-color: #fdfdfd
+}
+
+* {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-webkit-tap-highlight-color: transparent;
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+}
+
+html {
+	width:100%;
+	height:100%;
+	margin:0;
+	padding:0;
+	font-family: 'Montserrat', 'Work Sans', sans-serif;
+}
+
+body {
+	width:100%; 
+	height:100%; 
+	overflow-x:hidden; 
+	margin:0; 
+	padding:0;
+	/* stupid iphone notches */
+	padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
+	padding-top: env(safe-area-inset-top); /* iOS 11.2 */
+}
+
+h1, h2, h3, h4, h5, h6 { 
+	font-weight:normal;
+	margin:0;
+	padding:0;
+	width:100%;
+}
+
+[class^="ico"] { line-height: 0px; }
+
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
+.no-select, .no-select * {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}

package/ui/core/css/dynamic/flex.js

@@ -0,0 +1,36 @@
+export default function(sizes = [
+	'xl',
+	'd',
+	't',
+	'p'
+], max = 12) {
+
+	let data = ` `;
+
+	// dynamic display
+	data += ".flex { display: flex; } ";
+	data += ".flex-wrap { flex-wrap: wrap; } ";
+	
+	for (let i = 1; i <= max; i++) {
+
+		// float
+		data += `.flex-${i} { flex:${i} ; } `;
+	
+	}
+
+	sizes.forEach((s) => {
+
+		for (let i = 1; i <= max; i++) {
+
+			// float
+			data += `.app-size-${s} .flex-${i}-${s} { flex:${i} ; } `;
+			data += `.app-size-${s} .flex-wrap-${s} { flex-wrap: wrap; } `;
+
+		}
+
+	});
+	
+
+	return data;
+
+}

package/ui/core/css/dynamic/grid.js

@@ -0,0 +1,185 @@
+export default function({
+	sizes = [
+		'xl',
+		'd',
+		't',
+		'p'
+	],
+	pixels = 126
+} = {}) {
+
+	let data = ` `;
+
+	const grids = 12;
+
+	data += `.grid { display: grid; grid-template-columns: auto auto; } `;
+	
+	// justify
+	data += `.justify-center { justify-content: center; } `;
+	data += `.justify-start { justify-content: start; } `;
+	data += `.justify-end { justify-content: end; } `;
+	data += `.justify-between { justify-content: space-between; } `;
+	data += `.justify-around { justify-content: space-around; } `;
+	data += `.justify-evenly { justify-content: space-evenly; } `;
+
+	// align
+	data += `.align-center { align-items: center; } `;
+	data += `.align-start { align-items: start; } `;
+	data += `.align-end { align-items: end; } `;
+	data += `.align-baseline { align-items: baseline; } `;
+	data += `.align-stretch { align-items: stretch; } `;
+
+	// justify-items
+	data += `.justify-items-start { justify-items: start; } `;
+	data += `.justify-items-center { justify-items: center; } `;
+	data += `.justify-items-end { justify-items: end; } `;
+	data += `.justify-items-stretch { justify-items: stretch; } `;
+
+	// justify
+	data += `.grid.center { justify-self: center; } `;
+	data += `.grid.left { justify-self: start; } `;
+	data += `.grid.right { justify-self: end; } `;
+
+	data += `.justify-self-center { justify-self: center; } `;
+	data += `.justify-self-left { justify-self: start; } `;
+	data += `.justify-self-right { justify-self: end; } `;
+
+
+	data += `.span-full { grid-column: 1 / -1; } `;
+	data += `.row-span-full { grid-row: 1 / -1; } `;
+
+	sizes.forEach((s) => {
+
+		data += `.app-size-${s} .grid.center-${s} { justify-self: center; } `;
+		data += `.app-size-${s} .grid.left-${s} { justify-self: start; } `;
+		data += `.app-size-${s} .grid.right-${s} { justify-self: end; } `;
+
+		data += `.app-size-${s} .justify-self-center-${s} { justify-self: center; } `;
+		data += `.app-size-${s} .justify-self-start-${s} { justify-self: start; } `;
+		data += `.app-size-${s} .justify-self-end-${s} { justify-self: end; } `;
+
+		data += `.app-size-${s} .span-full-${s} { grid-column: 1 / -1; } `;
+		data += `.app-size-${s} .row-span-full-${s} { grid-row: 1 / -1; } `;
+
+		// justify
+		data += `.app-size-${s} .justify-center-${s} { justify-content: center; } `;
+		data += `.app-size-${s} .justify-start-${s} { justify-content: start; } `;
+		data += `.app-size-${s} .justify-end-${s} { justify-content: end; } `;
+		data += `.app-size-${s} .justify-between-${s} { justify-content: space-between; } `;
+		data += `.app-size-${s} .justify-around-${s} { justify-content: space-around; } `;
+		data += `.app-size-${s} .justify-evenly-${s} { justify-content: space-evenly; } `;
+
+		// justify-items
+		data += `.app-size-${s} .justify-items-start-${s} { justify-items: start; } `;
+		data += `.app-size-${s} .justify-items-center-${s} { justify-items: center; } `;
+		data += `.app-size-${s} .justify-items-end-${s} { justify-items: end; } `;
+		data += `.app-size-${s} .justify-items-stretch-${s} { justify-items: stretch; } `;
+
+		// align
+		data += `.app-size-${s} .align-center-${s} { align-items: center; } `;
+		data += `.app-size-${s} .align-start-${s} { align-items: start; } `;
+		data += `.app-size-${s} .align-end-${s} { align-items: end; } `;
+		data += `.app-size-${s} .align-baseline-${s} { align-items: baseline; } `;
+		data += `.app-size-${s} .align-stretch-${s} { align-items: stretch; } `;
+
+	});
+	
+	
+	for (let i = 1; i <= grids; i++) {
+		
+		// cols
+		data += `.grid-${i} { display: grid; grid-template-columns: repeat(${i}, 1fr); } `;
+
+		// spans 
+		data += `.span-${i} { grid-column: span ${i} / span ${i}; } `;
+
+		// start
+		data += `.start-${i} { grid-column-start: ${i}; } `;
+
+		// end
+		data += `.end-${i} { grid-column-end: ${i}; } `;
+
+		// rows
+		data += `.grid-rows-${i} { grid-template-rows: repeat(${i}, 1fr); } `;
+
+		// spans
+		data += `.row-span-${i} { grid-row: span ${i} / span ${i}; } `;
+
+		// start
+		data += `.row-start-${i} { grid-row-start: ${i}; } `;
+
+		// end
+		data += `.row-end-${i} { grid-row-end: ${i}; } `;
+		
+		// order
+		data += `.order-${i} { order: ${i}; } `;
+
+		
+		sizes.forEach((s) => {
+
+			// cols
+			data += `.app-size-${s} .grid-${i}-${s} { display: grid; grid-template-columns: repeat(${i}, 1fr); } `;
+			
+			// spans 
+			data += `.app-size-${s} .span-${i}-${s} { grid-column: span ${i} / span ${i}; } `;
+
+			// start
+			data += `.app-size-${s} .start-${i}-${s} { grid-column-start: ${i}; } `;
+
+			// end
+			data += `.app-size-${s} .end-${i}-${s} { grid-column-end: ${i}; } `;
+
+			// rows
+			data += `.app-size-${s} .grid-rows-${i}-${s} { grid-template-rows: repeat(${i}, 1fr); } `;
+
+			// spans
+			data += `.app-size-${s} .row-span-${i}-${s} { grid-row: span ${i} / span ${i}; } `;
+
+			// start
+			data += `.app-size-${s} .row-start-${i}-${s} { grid-row-start: ${i}; } `;
+
+			// end
+			data += `.app-size-${s} .row-end-${i}-${s} { grid-row-end: ${i}; } `;
+
+			// order
+			data += `.app-size-${s} .order-${i}-${s} { order: ${i}; } `;
+
+		});
+	
+	}
+
+	// add and extra for start and end for both col and row
+	data += `.start-${grids +1} { grid-column-start: ${grids +1}; } `;
+	data += `.end-${grids +1} { grid-column-end: ${grids +1}; } `;
+
+	sizes.forEach((s) => {
+
+		data += `.app-size-${s} .start-${grids +1}-${s} { grid-column-start: ${grids +1}; } `;
+		data += `.app-size-${s} .end-${grids +1}-${s} { grid-column-end: ${grids +1}; } `;
+	
+	});
+
+
+	// gap
+	for(let i = 1; i <= pixels; i++) {
+
+		data += `.gap-${i} { gap: ${i}px; } `;
+		data += `.gap-x-${i} { column-gap: ${i}px; } `;
+		data += `.gap-y-${i} { row-gap: ${i}px; } `;
+
+		sizes.forEach((s) => {
+
+			data += `.app-size-${s} .gap-${i}-${s} { gap: ${i}px; } `;
+			data += `.app-size-${s} .gap-x-${i}-${s} { column-gap: ${i}px; } `;
+			data += `.app-size-${s} .gap-y-${i}-${s} { row-gap: ${i}px; } `;
+		
+		});
+
+	}
+
+
+	data += ` `;
+
+	return data;
+
+}

package/ui/core/css/dynamic/shortcuts.js

@@ -0,0 +1,48 @@
+export default function(sizes = [
+	'xl',
+	'd',
+	't',
+	'p'
+]) {
+
+	let data = ` `;
+
+	// dynamic display
+	data += ".hidden {display: none !important;} ";
+	data += ".fl{float:left !important;} ";
+	data += ".fr{float:right !important;} ";
+	data += ".m0a{margin: 0 auto;} ";
+
+	// cursor pointer
+	data += ".cursor-pointer {cursor: pointer !important;} ";
+	data += ".cursor-default {cursor: default !important;} ";
+
+	// position
+	data += ".absolute {position:absolute !important;} ";
+	data += ".relative {position:relative !important;} ";
+	data += ".fixed {position:fixed !important;} ";
+	data += ".sticky {position:sticky !important;} ";
+
+	
+	sizes.forEach((s) => {
+
+		data += `.app-size-${s} .hidden-${s} {display: none !important;} `;
+
+		data += `.app-size-${s} .cursor-pointer-${s} {cursor: pointer !important;} `;
+		data += `.app-size-${s} .cursor-default${s} {cursor: default !important;} `;
+
+		data += `.app-size-${s} .fl {float:left !important;} `;
+		data += `.app-size-${s} .fr {float:right !important;} `;
+
+		data += `.app-size-${s} .absolute {position:absolute !important;} `;
+		data += `.app-size-${s} .relative {position:relative !important;} `;
+		data += `.app-size-${s} .fixed {position:fixed !important;} `;
+		data += `.app-size-${s} .sticky {position:sticky !important;} `;
+
+
+	});
+	
+
+	return data;
+
+}