add an alert system.

src/index.html

@@ -279,7 +279,7 @@
 			bottom: 0;
 			width: 400px;
 			padding: 20px;
-			z-index: 3;
+			z-index: 4;
 			background-color: #111;
 			transition: 0.3s ease;
 			will-change: transform;
@@ -404,6 +404,20 @@
 			visibility: visible;
 			transform: translateY(0);
 		}
+		.alerts-container {
+			position: fixed;
+			will-change: transform;
+			left: 50%;
+			top: 0;
+			padding: 10px;
+			background: #9f3b4e;
+			border-radius: 3px;
+			transform: translateY(-100%);
+			transition: 0.3s ease;
+		}
+		.alerts-container.is-active {
+			transform: translateY(0);
+		}
 		</style>
 	</head>
 
@@ -607,6 +621,7 @@
 			</defs>
 		</svg>
 
+		<div class="alerts-container" id="js-alerts-container"></div>
 		<form style="display:none;" action="http://codepen.io/pen/define" method="POST" target="_blank" id="js-codepen-form">
 		  <input type="hidden" name="data" value='{"title": "New Pen!", "html": "<div>Hello, World!</div>"}'>
 		</form>
@@ -631,6 +646,7 @@
 		<script src="utils.js"></script>
 		<script src="deferred.js"></script>
 		<script src="loader.js"></script>
+		<script src="notifications.js"></script>
 		<script src="script.js"></script>
 		<script src="dropdown.js"></script>
 

src/script.js

@@ -5,8 +5,6 @@
 	var editur = window.editur || {};
 	var version = '1.7.1';
 
-	window.$ = document.querySelector.bind(document);
-	window.$all = document.querySelectorAll.bind(document);
 	window.DEBUG = 1;
 
 	var HtmlModes = {
@@ -113,11 +111,10 @@
 		resetSplitting();
 	}
 
-	function saveSetting(setting, value) {
+	function saveSetting(setting, value, cb) {
 		var obj = {};
 		obj[setting] = value;
-		chrome.storage.local.set(obj, function() {
-		});
+		chrome.storage.local.set(obj, cb || function(){});
 	}
 
 	// Save current item to storage
@@ -146,7 +143,9 @@
 		currentItem.js = editur.cm.js.getValue();
 		currentItem.updatedOn = Date.now();
 		utils.log('saving key', key || currentItem.id, currentItem)
-		saveSetting(key || currentItem.id, currentItem);
+		saveSetting(key || currentItem.id, currentItem, function () {
+			alertsService.add('Item saved.');
+		});
 	}
 
 	function populateItem(items) {
@@ -201,11 +200,13 @@
 			js: '',
 			layoutMode: currentLayoutMode
 		};
+		alertsService.add('New item created');
 		refreshEditor();
 	}
 	function openItem(itemId) {
 		currentItem = savedItems[itemId];
 		refreshEditor();
+		alertsService.add('Saved item loaded');
 	}
 
 	function refreshEditor() {

src/utils.js

@@ -1,4 +1,7 @@
 (function () {
+	window.$ = document.querySelector.bind(document);
+	window.$all = document.querySelectorAll.bind(document);
+
 	// https://github.com/substack/semver-compare/blob/master/index.js
 	function semverCompare(a, b) {
 		var pa = a.split('.');