Merge: resolve conflict n merge master

.travis.yml

@@ -5,4 +5,4 @@ install:
   - npm install -g eslint
   - npm install -g babel-eslint
 script:
-  - eslint src/*.js
+  - npm run lint

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "web-maker",
-	"version": "2.9.6",
+	"version": "2.9.7",
 	"description": "A blazing fast & offline web playground",
 	"main": "index.html",
 	"devDependencies": {
@@ -16,7 +16,8 @@
 		"sw-precache": "^5.2.0"
 	},
 	"scripts": {
-		"install": "ln -sf ../../git-hooks/pre-commit .git/hooks/pre-commit"
+		"install": "ln -sf ../../git-hooks/pre-commit .git/hooks/pre-commit",
+		"lint": "eslint src/*.js"
 	},
 	"repository": {
 		"type": "git",

src/library-list.js

@@ -11,8 +11,8 @@ window.jsLibs = [
 	},
 	{
 		url:
-			'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js',
-		label: 'Bootstrap 4β',
+			'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js',
+		label: 'Bootstrap 4',
 		type: 'js'
 	},
 	{
@@ -27,33 +27,33 @@ window.jsLibs = [
 		type: 'js'
 	},
 	{
-		url: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js',
+		url: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js',
 		label: 'Angular',
 		type: 'js'
 	},
 	{
 		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/cjs/react.production.min.js',
+			'https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js',
 		label: 'React',
 		type: 'js'
 	},
 	{
-		url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js',
 		label: 'React DOM',
 		type: 'js'
 	},
 	{
-		url: 'https://unpkg.com/vue@2.5.0/dist/vue.min.js',
+		url: 'https://unpkg.com/vue',
 		label: 'Vue.js',
 		type: 'js'
 	},
 	{
-		url: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js',
 		label: 'Three.js',
 		type: 'js'
 	},
 	{
-		url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js',
 		label: 'D3',
 		type: 'js'
 	},
@@ -75,7 +75,7 @@ window.jsLibs = [
 	},
 	{
 		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.31/js/uikit.min.js',
+			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.39/js/uikit.min.js',
 		label: 'UIkit 3',
 		type: 'js'
 	}
@@ -89,8 +89,8 @@ window.cssLibs = [
 	},
 	{
 		url:
-			'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css',
-		label: 'Bootstrap 4β',
+			'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
+		label: 'Bootstrap 4',
 		type: 'css'
 	},
 	{
@@ -105,7 +105,7 @@ window.cssLibs = [
 		type: 'css'
 	},
 	{
-		url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css',
 		label: 'Bulma',
 		type: 'css'
 	},
@@ -115,6 +115,11 @@ window.cssLibs = [
 		label: 'Hint.css',
 		type: 'css'
 	},
+	{
+		url: 'https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css',
+		label: 'Tailwind.css',
+		type: 'css'
+	},
 	{
 		url:
 			'https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/css/uikit.min.css',
@@ -123,7 +128,7 @@ window.cssLibs = [
 	},
 	{
 		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.31/css/uikit.min.css',
+			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.39/css/uikit.min.css',
 		label: 'UIkit 3',
 		type: 'css'
 	},
@@ -136,7 +141,13 @@ window.cssLibs = [
 	{
 		url:
 			'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
-		label: 'FontAwesome',
+		label: 'FontAwesome 4',
+		type: 'css'
+	},
+		{
+		url:
+			'https://use.fontawesome.com/releases/v5.0.6/css/all.css',
+		label: 'FontAwesome 5',
 		type: 'css'
 	}
 ];

src/manifest.json

@@ -1,12 +1,13 @@
 {
 	"name": "Web Maker",
-	"version": "2.9.6",
+	"version": "2.9.7",
 	"manifest_version": 2,
 	"description": "Blazing fast & offline playground for your web experiments",
 	"homepage_url": "https://webmakerapp.com",
 	"permissions": ["storage", "tabs", "<all_urls>"],
 	"optional_permissions": ["downloads"],
-	"content_security_policy": "script-src 'self' filesystem: http://localhost:* https://localhost:* https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://www.gstatic.com https://semantic-ui.com https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
+	"content_security_policy":
+		"script-src 'self' filesystem: http://localhost:* https://localhost:* https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://www.gstatic.com https://semantic-ui.com https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
 	"options_ui": {
 		"page": "options.html",
 		"chrome_style": true

src/options.html

@@ -29,7 +29,7 @@
 </head>
 <body>
 	<h3>Settings <span style="opacity: 0.6;font-size:0.7em;">
-			v2.9.6</span></h3>
+			v2.9.7</span></h3>
 	<form name="optionsForm">
 		<label>
 			<input type="checkbox" name="preserveLastCode">

src/partials/changelog.html

@@ -6,18 +6,27 @@
 
 <h1>Whats new?</h1>
 
+<div class="notification">
+	<span class="notification__version">2.9.7</span>
+	<ul>
+		<li><a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a> added to popular CSS libraries list. Thanks <a href="https://github.com/diomed" target="_blank">diomed</a>.</li>
+		<li>Popular libraries list updated. Thanks <a href="https://github.com/diomed" target="_blank">diomed</a>.</li>
+		<li><strong>Dev</strong>: Bug fixes and code refactoring to make things simple. Thanks <a href="https://github.com/iamandrewluca" target="_blank">iamandrewluca</a>.</li>
+
+		<br>
+		<li><strong>🚀 Announcement</strong>: Web Maker 3.0 is coming! Tweet out to <a href="https://twitter.com/webmakerapp/">@webmakerApp</a> or message in <a href="https://gitter.im/web-maker-app/Lobby" target="_blank">chat lobby</a> to get a sneak peek.</li>
+		<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
+		<li>Web Maker now has more than 50K weekly active users! Thank you for being a part of this community of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a>			&nbsp; <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a>&nbsp; <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li>
+	</ul>
+</div>
+
 <div class="notification">
 	<span class="notification__version">2.9.6</span>
 	<ul>
 		<li><strong>Bugfix</strong>: Fix close buttons not working in notifications and keyboard shortcuts modal.</li>
 		<li><strong>Bugfix</strong>: Fix keyboard shortcut to see keyboard shortcuts :) Thanks <a href="https://github.com/ClassicOldSong" target="_blank">ClassicOldSong</a>.</li>
-
-			<br>
-			<li><strong>🚀 Announcement</strong>: Web Maker has a <a href="https://gitter.im/web-maker-app/Lobby" target="_blank">chat lobby on Gitter</a> now - incase you need any help or just want to say Hi!</li>
-			<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
-			<li>Web Maker now has more than 50K weekly active users! Thank you for being a part of this community of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a>			&nbsp; <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a>&nbsp; <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li>
 	</ul>
-	</div>
+</div>
 
 <div class="notification">
 	<span class="notification__version">2.9.5</span>

src/script.js

@@ -2245,7 +2245,6 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
 
 		// Editor keyboard shortucuts
 		window.addEventListener('keydown', function(event) {
-			var selectedItemElement;
 			// TODO: refactor common listener code
 			// Ctrl/⌘ + S
 			if ((event.ctrlKey || event.metaKey) && event.keyCode === 83) {
@@ -2279,40 +2278,37 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
 			} else if (event.keyCode === 27) {
 				closeAllOverlays();
 			}
-			if (event.keyCode === 40 && isSavedItemsPaneOpen) {
-				// Return if no items present.
-				if (!$all('.js-saved-item-tile').length) {
+		});
+
+		savedItemsPane.addEventListener('keydown', function(event) {
+			if (!isSavedItemsPaneOpen) {
 				return;
 			}
-				selectedItemElement = $('.js-saved-item-tile.selected');
+
+			const isCtrlOrMetaPressed = event.ctrlKey || event.metaKey;
+			const isForkKeyPressed = isCtrlOrMetaPressed && event.keyCode === 70;
+			const isDownKeyPressed = event.keyCode === 40;
+			const isUpKeyPressed = event.keyCode === 38;
+			const isEnterKeyPressed = event.keyCode === 13;
+
+			const selectedItemElement = $('.js-saved-item-tile.selected');
+			const havePaneItems = $all('.js-saved-item-tile').length !== 0;
+
+			if ((isDownKeyPressed || isUpKeyPressed) && havePaneItems) {
+				const method = isDownKeyPressed ? 'nextUntil' : 'previousUntil';
+
 				if (selectedItemElement) {
 					selectedItemElement.classList.remove('selected');
-					selectedItemElement
-						.nextUntil('.js-saved-item-tile:not(.hide)')
-						.classList.add('selected');
+					selectedItemElement[method](
+						'.js-saved-item-tile:not(.hide)'
+					).classList.add('selected');
 				} else {
 					$('.js-saved-item-tile:not(.hide)').classList.add('selected');
 				}
 				$('.js-saved-item-tile.selected').scrollIntoView(false);
-			} else if (event.keyCode === 38 && isSavedItemsPaneOpen) {
-				if (!$all('.js-saved-item-tile').length) {
-					return;
-				}
-				selectedItemElement = $('.js-saved-item-tile.selected');
-				if (selectedItemElement) {
-					selectedItemElement.classList.remove('selected');
-					selectedItemElement
-						.previousUntil('.js-saved-item-tile:not(.hide)')
-						.classList.add('selected');
-				} else {
-					$('.js-saved-item-tile:not(.hide)').classList.add('selected');
-				}
-				$('.js-saved-item-tile.selected').scrollIntoView(false);
-			} else if (event.keyCode === 13 && isSavedItemsPaneOpen) {
-				selectedItemElement = $('.js-saved-item-tile.selected');
-				if (!selectedItemElement) {
-					return;
 			}
+
+			if (isEnterKeyPressed && selectedItemElement) {
 				setTimeout(function() {
 					openItem(selectedItemElement.dataset.itemId);
 				}, 350);
@@ -2320,13 +2316,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
 			}
 
 			// Fork shortcut inside saved creations panel with Ctrl/⌘ + F
-			if (
-				isSavedItemsPaneOpen &&
-				(event.ctrlKey || event.metaKey) &&
-				event.keyCode === 70
-			) {
+			if (isForkKeyPressed) {
 				event.preventDefault();
-				selectedItemElement = $('.js-saved-item-tile.selected');
 				setTimeout(function() {
 					forkItem(savedItems[selectedItemElement.dataset.itemId]);
 				}, 350);