feature: add any external js/css lib. fixes #19

src/analytics.js

@@ -1,11 +1,15 @@
 window.trackEvent = function (category, action, label, value) {
+	if (window.DEBUG) {
+		utils.log('trackevent', category, action, label, value)
+		return;
+	}
 	if (window.ga) {
 		ga('send', 'event', category, action, label, value);
 	}
 }
 
 // if online, load after 2 seconds
-if (navigator.onLine) {
+if (navigator.onLine && !window.DEBUG) {
 	setTimeout(function() {
 		(function(i,s,o,g,r,a,m){
 			i['GoogleAnalyticsObject']=r;

src/index.html

@@ -38,6 +38,10 @@
 		.fr {
 			float: right;
 		}
+		.relative {
+			position: relative;
+		}
+		.full-width { width: 100%; }
 		.caret {
 			display: inline-block;
 			width: 0;
@@ -51,7 +55,7 @@
 		a > svg {
 			fill: rgba(255, 255, 255, 0.2)
 		}
-		input[type="text"] {
+		select, input[type="text"], textarea {
 			padding: 3px 5px;
 			font-size: inherit;
 		}
@@ -294,15 +298,16 @@
 			margin: 0 auto;
 			opacity: 0;
 			padding: 2em;
-			font-size: 1.5em;
+			font-size: 1.3em;
-			transition: all 0.3s;
+			transition: all 0.19s;
-			transform: scale(0.7);
+			transform: translateY(-50px) scale(0.7);
 		}
 		.is-modal-visible {
 			visibility: visible;
 		}
 		.is-modal-visible .modal__content {
-			transform: scale(1);
+			transition-duration: 0.3s;
+			transform: translateY(0px) scale(1);
 			opacity: 1;
 		}
 		.modal-overlay {
@@ -523,6 +528,12 @@
 			visibility: visible;
 			transform: translateX(0);
 		}
+		.count-label {
+			color: #ddd;
+			background: rgba(255,255,255,0.3);
+			border-radius: 5px;
+			padding: 1px 6px;
+		}
 		</style>
 	</head>
 
@@ -530,8 +541,12 @@
 		<div class="main-container">
 			<div class="main-header">
 				<div class="fr">
+					<a id="js-add-library-btn" class="">
+						Add library <span id="js-external-lib-count" style="visibility:hidden;" class="count-label"></span>
+					</a>
 
 					<a id="js-new-btn"><svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
+		}
     <path fill="crimson" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
 </svg>New</a>
 					<a id="js-save-btn" style="margin-left:10px"><svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
@@ -667,6 +682,30 @@
 			</div>
 		</div>
 
+		<div class="modal" id="js-add-library-modal">
+			<div class="modal__content" id="app">
+				<h1>Add Library</h1>
+				<h3>JavaScript</h3>
+				<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Put each library in new line"></textarea>
+
+				<h3>CSS</h3>
+				<textarea id="js-external-css" class="full-width" id="" cols="30" rows="5"></textarea>
+
+				<div style="margin-top:20px;">
+					Choose from popular libraries:
+					<select name="" id="js-add-library-select">
+						<option value="">-------</option>
+						<optgroup label="JavaScript Libraries">
+
+						</optgroup>
+						<optgroup label="CSS Libraries">
+
+						</optgroup>
+					</select>
+				</div>
+			</div>
+		</div>
+
 		<div class="modal" id="js-help-modal">
 			<div class="modal__content">
 				<h1>Web Maker<small style="font-size:14px;"> v1.7.1</small></h1>
@@ -781,6 +820,7 @@
 		<script src="deferred.js"></script>
 		<script src="loader.js"></script>
 		<script src="notifications.js"></script>
+		<script src="library-list.js"></script>
 		<script src="script.js"></script>
 		<script src="dropdown.js"></script>
 	</body>

src/script.js

@@ -5,8 +5,6 @@
 	var editur = window.editur || {};
 	var version = '1.7.1';
 
-	window.DEBUG = 1;
-
 	var HtmlModes = {
 		HTML: 'html',
 		MARKDOWN: 'markdown',
@@ -74,6 +72,11 @@
 		, cssModelLabel = $('#js-css-mode-label')
 		, jsModelLabel = $('#js-js-mode-label')
 		, titleInput = $('#js-title-input')
+		, addLibrarySelect = $('#js-add-library-select')
+		, addLibraryBtn = $('#js-add-library-btn')
+		, addLibraryModal = $('#js-add-library-modal')
+		, externalJsTextarea = $('#js-external-js')
+		, externalCssTextarea = $('#js-external-css')
 		;
 
 	editur.cm = {};
@@ -144,6 +147,25 @@
 		trackEvent('ui', 'toggleLayout', mode);
 	}
 
+	function onExternalLibChange() {
+		utils.log('onExternalLibChange');
+		updateExternalLibUi();
+		editur.setPreviewContent();
+	}
+
+	function updateExternalLibUi() {
+		// Calculate no. of external libs
+		var noOfExternalLibs = 0;
+		noOfExternalLibs += externalJsTextarea.value.split('\n').filter(lib => !!lib).length;
+		noOfExternalLibs += externalCssTextarea.value.split('\n').filter(lib => !!lib).length;
+		if (noOfExternalLibs) {
+			$('#js-external-lib-count').textContent = noOfExternalLibs;
+			$('#js-external-lib-count').style.visibility = 'visible';
+		} else {
+			$('#js-external-lib-count').style.visibility = 'hidden';
+		}
+	}
+
 	function saveSetting(setting, value, cb) {
 		var obj = {};
 		obj[setting] = value;
@@ -179,6 +201,7 @@
 		currentItem.jsMode = jsMode;
 		currentItem.updatedOn = Date.now();
 		currentItem.layoutMode = currentLayoutMode;
+		currentItem.externalLibs = { js: externalJsTextarea.value, css: externalCssTextarea.value };
 
 		// debugger;
 		var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
@@ -262,6 +285,7 @@
 			html: '',
 			css: '',
 			js: '',
+			externalLibs: { js: '', css: '' },
 			layoutMode: currentLayoutMode
 		};
 		alertsService.add('New item created');
@@ -298,10 +322,13 @@
 
 	function refreshEditor() {
 		titleInput.value = currentItem.title || 'Untitled';
+		externalJsTextarea.value = currentItem.externalLibs && (currentItem.externalLibs.js || '');
+		externalCssTextarea.value = currentItem.externalLibs && (currentItem.externalLibs.css || '');
+		externalJsTextarea.dispatchEvent(new Event('change'));
+
 		editur.cm.html.setValue(currentItem.html);
 		editur.cm.css.setValue(currentItem.css);
 		editur.cm.js.setValue(currentItem.js);
-
 		editur.cm.html.refresh();
 		editur.cm.css.refresh();
 		editur.cm.js.refresh();
@@ -481,12 +508,25 @@
 			});
 		});
 	}
-	function createPreviewFile(html, css, js) {
+
+	function getCompleteHtml(html, css, js) {
+		var externalJs = externalJsTextarea.value.split('\n').reduce(function (html, url) {
+			return html + (url ? '\n<script src="' + url + '"></script>' : '');
+		}, '');
+		var externalCss = externalCssTextarea.value.split('\n').reduce(function (html, url) {
+			return html + (url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '');
+		}, '');
 		var contents = '<html>\n<head>\n'
+			+ externalCss + '\n'
 			+ '<style>\n' + css + '\n</style>\n'
 			+ '</head>\n'
-			+ '<body>\n' + html + '\n<script>\n' + js + '\n//# sourceURL=userscript.js</script></body>\n</html>';
+			+ '<body>\n' + html + '\n'
+			+ externalJs + '\n<script>\n' + js + '\n//# sourceURL=userscript.js</script></body>\n</html>';
 
+		return contents;
+	}
+	function createPreviewFile(html, css, js) {
+		var contents = getCompleteHtml(html, css, js)
 		var fileWritten = false;
 
 		var blob = new Blob([ contents ], { type: "text/plain;charset=UTF-8" });
@@ -534,9 +574,7 @@
 				css = result[1],
 				js = result[2];
 
-			var fileContent = '<html><head>\n<style>\n'
+			var fileContent = getCompleteHtml(html, css, js);
-				+ css + '\n</style>\n</head>\n<body>\n'
-				+ html + '\n<script>\n' + js + '\n</script>\n\n</body>\n</html>';
 
 			var d = new Date();
 			var fileName = [ 'web-maker', d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds() ].join('-');
@@ -608,6 +646,10 @@
 			helpModal.classList.toggle('is-modal-visible');
 			trackEvent('ui', 'helpButtonClick');
 		});
+		utils.onButtonClick(addLibraryBtn, function () {
+			addLibraryModal.classList.toggle('is-modal-visible');
+			trackEvent('ui', 'addLibraryButtonClick');
+		});
 
 		notificationsBtn.addEventListener('click', function () {
 			notificationsModal.classList.toggle('is-modal-visible');
@@ -729,6 +771,7 @@
 			if (typeof e.target.className === 'string' && e.target.className.indexOf('modal-overlay') !== -1) {
 				helpModal.classList.remove('is-modal-visible');
 				notificationsModal.classList.remove('is-modal-visible');
+				addLibraryModal.classList.remove('is-modal-visible');
 				toggleSavedItemsPane(false);
 			}
 		});
@@ -749,6 +792,24 @@
 			trackEvent('ui', 'settingsBtnClick');
 		});
 
+		// Initialize add library select box
+		var libOptions = window.jsLibs.reduce(
+			(html, lib) => html + `<option data-type="${lib.type}" value="${lib.url}">${lib.label}</option>`,
+			'');
+		addLibrarySelect.children[1].innerHTML = libOptions;
+		libOptions = window.cssLibs.reduce(
+			(html, lib) => html + `<option data-type="${lib.type}" value="${lib.url}">${lib.label}</option>`,
+			'');
+		addLibrarySelect.children[2].innerHTML = libOptions;
+		addLibrarySelect.addEventListener('change', function onSelectChange(e) {
+			var target = e.target;
+			$('#js-external-' + target.selectedOptions[0].dataset.type).value += target.value + '\n';
+			onExternalLibChange();
+		});
+		externalJsTextarea.addEventListener('change', onExternalLibChange);
+		externalCssTextarea.addEventListener('change', onExternalLibChange);
+
+		// TODO: move to split.js ondrag listeners
 		window.addEventListener('mousedown', function() {
 			document.body.classList.add('is-dragging');
 		});

src/utils.js

@@ -1,4 +1,6 @@
 (function () {
+	window.DEBUG = document.cookie.indexOf('wmdebug') > -1;
+
 	window.$ = document.querySelector.bind(document);
 	window.$all = document.querySelectorAll.bind(document);
 	var alphaNum = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';