Add tutorial system to infoMessage

lib/icecoder.js

@@ -2789,7 +2789,7 @@ var ICEcoder = {
 				newBlock.style.zIndex = "1000";
 				newBlock.style.background = match ? match[0] : '';
 				newBlock.style.cursor = "pointer";
-				newBlock.onclick = function() {this.showColorPicker(match[0])};
+				newBlock.onclick = function() {ICEcoder.showColorPicker(match[0])};
 				if (newBlock.style.backgroundColor=="") {newBlock.style.display = "none"};
 				get('header').appendChild(newBlock);
 				thisCM.addWidget(thisCM.getCursor(), get('cssColor'), true);
@@ -4526,6 +4526,176 @@ var ICEcoder = {
 		}
 	},
 
+	viewTutorial: function(step, delay) {
+		var winW, winH;
+
+		winW = window.innerWidth;
+		winH = window.innerHeight;
+
+		var steps = {
+			0: {
+				"width": 250,
+				"height": 55,
+				"top": -55,
+				"left": 0,
+				"title": "<img src=\"images/icecoder.png\" style=\"position: absolute; margin: -105px 0 0 -55px\"><br><br>Code editor awesomeness ...in your browser",
+				"message": "View the quick start tutorial? (Well worthwhile!) or <a onclick=\"ICEcoder.viewTutorial(12, 0)\" style=\"font-size: 14px; text-decoration: underline; cursor: pointer\">skip it</a>",
+				"button": "view tutorial"
+			},
+			1: {
+				"width": 250,
+				"height": 55,
+				"top": 0,
+				"left": 0,
+				"title": "Options and settings",
+				"message": "Here you can perform file and editor content actions, plus also customise ICEcoders' settings, switch to other file manager sources, view help, search for info and more.",
+				"button": "next &gt;"
+			},
+			2: {
+				"width": 250,
+				"height": winH - 85,
+				"top": 50,
+				"left": 0,
+				"title": "File manager",
+				"message": "This is the file manager. Click a dir to open/close, double click a file to open it and right click on dirs/files to get relevant options. You can drag and drop too.",
+				"button": "next &gt;"
+			},
+			3: {
+				"width": 45,
+				"height": 85,
+				"top": 50,
+				"left": 205,
+				"title": "File manager options and plugins",
+				"message": "Here you can unlock/lock the file manager to collapse/expand it, refresh the file manager plus view and install plugins. (Also, move your mouse to left edge of file manager for quick access to the plugins).",
+				"button": "next &gt;"
+			},
+			4: {
+				"width": 250,
+				"height": 35,
+				"top": winH - 35,
+				"left": 0,
+				"title": "Extra tools",
+				"message": "Get access to the terminal, output, database and Git interfaces here, displayed as an overlay to get the largest display, click option again to slide overlay out.",
+				"button": "next &gt;"
+			},
+			5: {
+				"width": winW - 250,
+				"height": 42,
+				"top": 0,
+				"left": 250,
+				"title": "Editor tabs",
+				"message": "Your opened tabs will appear here. Icons displayed are to close all, alphabetize tabs and add new tab. You can drag your open tabs left/right to sort them too.",
+				"button": "next &gt;"
+			},
+			6: {
+				"width": 440,
+				"height": 28,
+				"top": 42,
+				"left": 250,
+				"title": "Find and replace builder",
+				"message": "This is the find and replace builder. Here you can use the text fields and dropdown menus to build up sentences of what you'd like to do, such as find and replace in editor content, files and filenames.",
+				"button": "next &gt;"
+			},
+			7: {
+				"width": 200,
+				"height": 28,
+				"top": 42,
+				"left": winW - 200,
+				"title": "Editor options and bug reporting",
+				"message": "Here you can specify the line to jump to (editor jumps as you type, hit Enter to focus on editor), plus options to view the current tab as a webpage in new browser window and view bugs as you code (once targeted at error logs).",
+				"button": "next &gt;"
+			},
+			8: {
+				"width": 520,
+				"height": 380,
+				"top": 70,
+				"left": 250,
+				"title": "System info",
+				"message": "This is general info about your server, paths, browser and more. Worth noting to ensure settings seem correct.",
+				"button": "next &gt;"
+			},
+			9: {
+				"width": 32,
+				"height": 30,
+				"top": winH - 30,
+				"left": 250,
+				"title": "Editor content error indicator and version control",
+				"message": "Error indicator for syntax or structural issues in the editor content. Also, when you have a tab open, on every save, it makes a copy - click the number of backups it indicates, to view differences and options to restore old versions.",
+				"button": "next &gt;"
+			},
+			10: {
+				"width": 100,
+				"height": 30,
+				"top": winH - 30,
+				"left": (((winW + 250) / 2) - 50),
+				"title": "Editor pane mode",
+				"message": "Switch between single pane and diff pane modes. The diff pane automatically sets a copy on each save, so you can undo/redo to cycle through those. The gutters indicate additions, changes and deletions on each line.",
+				"button": "next &gt;"
+			},
+			11: {
+				"width": 100,
+				"height": 30,
+				"top": winH,
+				"left": (((winW + 250) / 2) - 50),
+				"title": "Let's get started!",
+				"message": "This really only scratches the surface of what ICEcoder can do. Have a look around, test out the features and don't forget to checkout the website for more advanced tips & tricks. You can get to this tutorial again under Help > Tutorial.",
+				"button": "start!"
+			},
+		};
+
+		// Make both the info black mask and message display
+		get("infoBlackMask").style.display = "block";
+		get("infoMessageContainer").style.display = "block";
+
+		// No step specified means starting from beginning
+		if (false === step) {
+			// Set margin-top to be above screen
+			get("infoMessageContainer").style.marginTop = -300 + "px";
+			// After 100ms show border and message text (still above screen)
+			setTimeout(function() {
+				get("infoBlackMask").style.border = "solid 10000px rgba(0,0,0,0.8)";
+				get("infoMessageContainer").style.opacity = "1";
+			}, 100);
+			// After requested delay, slide in message but account for logo
+			setTimeout(function() {
+				get("infoMessageContainer").style.marginTop = (winH / 2) + 70 + "px";
+			}, delay);
+			// Set message text and return to go no further
+			ICEcoder.viewTutorial(0);
+			return;
+		}
+
+		// If we're going beyond the last step, we're finishing
+		if (11 < step) {
+			// Reset styles ready for next time
+			get("infoBlackMask").style.border = "solid 10000px rgba(0,0,0,0)";
+			get("infoMessageContainer").style.opacity = "0";
+			setTimeout(function() {
+				get("infoBlackMask").style.display = "none";
+				get("infoMessageContainer").style.display = "none";
+			}, 500);
+			// Mark tutorial as done in users settings and return
+			xhr = this.xhrObj();
+			xhr.open("POST",iceLoc+"/lib/settings.php?action=turnOffTutorialOnLogin&csrf="+this.csrf,true);
+			xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+			xhr.send();
+			return;
+		}
+
+		// Steps 1 onwards have no logo, normal margin-top needed
+		if (1 <= step) {
+			get("infoMessageContainer").style.marginTop = (winH / 2) + "px";
+		}
+
+		// We have something do display, so set info black mask to highlight item
+		get("infoBlackMask").style.height = steps[step].height;
+		get("infoBlackMask").style.width = steps[step].width;
+		get("infoBlackMask").style.top = -10000 + steps[step].top + "px";
+		get("infoBlackMask").style.left = -10000 + steps[step].left + "px";
+		// Set info title, message and button
+		get("infoMessage").innerHTML = '<div class="title">' + steps[step].title + '</div>' + steps[step].message + '<br><br><div class="button" onclick="ICEcoder.viewTutorial(' + (step + 1) + ')">' + steps[step].button + '</div>';
+	},
+
 	// Snart snake
 	startSnake: function() {
 		this.snakePlaying = true;