sideshow 0.4.1

data/examples/scripts/tutorials/introducing_sideshow.js

@@ -0,0 +1,259 @@
+//A Sideshow Tutorial Example
+//This tutorial introduces the Sideshow basics to the newcomer
+
+Sideshow.registerWizard({
+    name: "introducing_sideshow",
+    title: "Introducing Sideshow",
+    description: "Introducing the main features and concepts of Sideshow. ",
+    estimatedTime: "10 Minutes",
+    affects: [
+		function(){
+			//Here we could do any checking to infer if this tutorial is eligible the current screen/context. 
+			//After this checking, just return a boolean indicating if this tutorial will be available. 
+			//As a simple example we're returning a true, so this tutorial would be available in any context
+			return true;
+		}
+    ]
+}).storyLine({
+    showStepPosition: true,
+    steps: [
+    	{
+		    title: "More than a tour... we can do much more.",
+		    text: "Sideshow can much more than just walk users through your site/web application. Sideshow can mediate the interaction between users and your UI. Go ahead and let's see some powerful features."
+		},
+    {
+        title: "The Subject",
+        text: "In each step of a tutorial/wizard/tour/help (you can call it the way you want =D ) you're talking about something. Sometimes you're just explaining a concept, but at the most part of time, you're explaining some visual part of a screen or a page (e.g. a form, button, div, grid and so forth). We call these visual parts subjects. A subject of a step is just an element of your page you're aiming to stand out from the rest (when user is seeing that especific step) to comment/explain something about it."
+    },
+    {
+        title: "The Subject",
+        text: "In each step of a tutorial/wizard/tour/help (you can call it the way you want =D ) you're talking about something. Sometimes you're just explaining a concept, but at the most part of time, you're explaining some visual part of a screen or a page (e.g. a form, button, div, grid and so forth). We call these visual parts subjects. A subject of a step is just an element of your page you're aiming to stand out from the rest (when user is seeing that especific step) to comment/explain something about it.",
+        skipIf: function(){
+          return true;
+        }
+    },
+		{
+		    title: "Masking a Subject",
+		    text: "An example could be this text: in this step, this text is the subject. As you can see, we're surrounding it with a dark mask. This make you look at the subject with no doubt where it's located. If you're curious how we make it work: for the moment, you just need to know we're not using `z-index` to pull the subject above the mask. Some tour libraries do this, we see a plenty of drawbacks in this approach. \n\n When writing a tutorial, each subject is represented by a jQuery-like/querySelectorAll-like/CSS-like selector. For this step, for instance, the subject is a `div`, and its selector is `#introducing_sideshow`, but could be any other valid selector returning the same element.\n\nP.S: for now, Sideshow only supports single subjects per step. If you define a subject selector which returns more than one element, Sideshow will throw an exception. Multiple steps will (propably) be available in future versions of Sideshow.",
+		    subject: "#introducing_sideshow",
+		    format: "markdown"
+		},
+		{
+		    title: "You Won't lose your Rounded Corners",
+		    text: "We would never leave you without your rounded corners! =)\n\nJust see this button again, look at the corners, they're pretty masked pal!\n\nP.S: Don't blame me if the button click is not doing anything. This behavior is correct, you can't open two instances of Sideshow simultaneously. ;-)",
+		    subject: "#run_example",
+		    format: "markdown"
+		},
+		{
+		    title: "Preventing Undesirable Clicks",
+		    text: "In the previous step, probably you tried to click on that button. The user shouln't be able to click in the button in that moment. Sideshow can deal with this situation easily, there's a step option `lockSubject` which preserves the mask appearance but prevents the user to interact with the subject with the mouse.\n\n**Just try to click in the button.**",
+		    subject: "#run_example",
+		    lockSubject: true,
+		    format: "markdown"
+		},
+		{
+		    title: "Targets - Pointing to items in the subject area",
+		    text: "As we've seen previously, by masking a subject, we highlight a specific zone of a page which we want to explain.\n\nAlthough this is enough for a great deal of cases, sometimes we need to \"point\" to one or more itens inside the subject area. Sideshow can do this easily for you, as easy as you define subjects. Let's see an example in the next step.",
+		    format: "markdown"
+		},
+		{
+		    title: "Targets - A simple example",
+		    text: "To point to the last `em` tag of this description, just declare a step option called `targets` setting its value with a selector for this tag. >>> `targets: \"#introducing_sideshow em:last-of-type\"`.\n\nAs you can see, it's just a CSS selector, no complications here!",
+		    subject: "#introducing_sideshow",
+		    targets: "#introducing_sideshow em:last-of-type",
+		    format: "markdown"
+		},
+		{
+		    title: "Targets - Multiple targets",
+		    text: "Here you can see an example of multiple targets. The selector used for these targets is `#survey input`.",
+		    subject: "#survey",
+		    targets: "#survey input",
+		    format: "markdown"
+		},
+		{
+		    title: "Targets - Multiple targets",
+		    text: "Another example of multiple targets. The selector used for these targets is `#introducing_sideshow em:last-of-type, #header_content > img`.",
+		    subject: "header",
+		    targets: "#introducing_sideshow em:last-of-type, #header_content > img",
+		    format: "markdown"
+		},
+		{
+		    title: "We can scroll too!",
+		    text: "When a subject isn't fully visible, Sideshow automatically scrolls the page 'til the subject is squared.",
+		    subject: "#godfather1"
+		},
+		{
+		    title: "We're back to the top!",
+		    text: "Well, we're on top again. Now, let's learn an important concept of Sideshow, the step completing conditions.",
+		    subject: "#header_content > img"
+		},
+		{
+			title: "Step Completing Conditions",
+		    text: function(){/*
+There are some cases where you just don't want the user to be able to continue the tutorial by clicking in the next button. 
+
+*	You want the user to perform some action, or...
+*	You're waiting for a server response, or...
+*	You're expecting your application to be in some specific state before allowing user to continue.
+
+Sideshow provides a way for detecting if your tutorial is ready to proceed to the next step. This feature is called **completing conditions**, you just need to define a function (an evaluator), which will perform some checking and return a boolean. This function is evaluated continuously and shouldn't change the state of your application. When this function return a true value, the user will be allowed to continue. 
+			*/},//<<This block-comment-inside-function syntax is a trick to allow some sort of HEREDOC syntax, this can't be used in minified tutorial files, these comments are simply stripped out.
+		    format: "markdown"
+		},
+		{
+			title: "An Example of Completing Condition",
+			text: "Ok, look at the Next button, it's disabled, for now you're not allowed to continue. As an example, the **completing condition** for this step is that user (obviously you =D) has to drag the Dr. Brown photo and drop it over the red square. Please, perform this action in order to activate the next button.",
+		    format: "markdown",
+		    listeners: {
+		    	beforeStep: function(){
+		    		$("#red_square").fadeIn(function(){
+		    			$('#red_square').on('dragover', function (e) {
+						    var event = e.originalEvent;
+						    if (event.preventDefault) {
+						        event.preventDefault();
+						    }
+						    event.dataTransfer.dropEffect = 'copy';
+						    return false;
+						});
+						 
+						$('#red_square').on('drop', function (e) {
+						    var event = e.originalEvent;
+						    if (event.stopPropagation) {
+						        event.stopPropagation();
+						    }
+						   	$('#dr_brown').appendTo(this);
+
+						   	//Let's hide the target arrows (in future versions of Sideshow we'll have a more elegant way to do this inside a listener =D)
+						   	$(".sideshow-subject-arrow").fadeOut();
+						    
+						    return false;
+						});
+
+		    		});
+		    		
+		    	}
+		    },
+		    targets: "#dr_brown, #red_square",
+		    subject: "#bttf",
+		    autoContinue: false,
+		    completingConditions: [
+		    	function(){
+		    		return $("#red_square #dr_brown").length > 0; 
+		    	}
+		    ]
+		},
+		{
+			title: "Auto Continue",
+			text: "If you want Sideshow proceed automatically to the next step, you can use set **autoContinue** flag to true. This way, when your completing conditions are satisfied, Sideshow will continue to the next step.\n\nDrag the Dr. Brown photo again to its original place to continue.",
+		    format: "markdown",
+		    listeners: {
+		    	beforeStep: function(){
+	    			$('#bttf figure').on('dragover', function (e) {
+					    var event = e.originalEvent;
+					    if (event.preventDefault) {
+					        event.preventDefault();
+					    }
+					    event.dataTransfer.dropEffect = 'copy';
+					    return false;
+					});
+					 
+					$('#bttf figure').on('drop', function (e) {
+					    var event = e.originalEvent;
+					    if (event.stopPropagation) {
+					        event.stopPropagation();
+					    }
+					   	$('#dr_brown').appendTo(this);
+
+					   	//Let's hide the target arrows (in future versions of Sideshow we'll have a more elegant way to do this inside a listener =D)
+					   	$(".sideshow-subject-arrow").fadeOut();
+					    
+					    return false;
+					});
+		    	},
+		    	afterStep: function(){
+		    		$("#red_square").fadeOut();
+		    	}
+		    },
+		    targets: "#bttf figure, #dr_brown",
+		    subject: "#bttf",
+		    autoContinue: true,
+		    completingConditions: [
+		    	function(){
+		    		return $("#bttf figure #dr_brown").length > 0; 
+		    	}
+		    ]
+		},
+		{
+			title: "Rich Formatting with Markdown",
+			text: function(){/*
+Most of times you we'll need just plain text for your step descriptions, but you may also need to add some kind of formatting. For this purpose, Sideshow accepts Markdown text. You just need to set the `format` step property to `"markdown"`. 
+This way you could use:
+
+*	Unordered lists
+*	Like this one.
+*	Or maybe...
+
+----------------------
+
+1. 	This is
+2. 	An ordered list
+3. 	It's simple to use
+
+**A bold text**
+
+*An italic text*
+
+`Source code example`
+
+![Fortes Informática Logo](examples/images/fortes-logo.png)
+			*/},
+			format: "markdown"
+		},
+		{
+			title: "Events",
+			text: "You can listen to events like `beforeStep`, `afterStep`, `beforeWizardStarts`, `afterWizardEnds` and do whatever you want. Like preparing the environment for the next step.",
+			format: "markdown"
+		},
+		{
+			title: "Moving to other step",
+			text: "You can move to other step by its position (which is 1-based) or by its name property, which is an unique identifier. Simply call `Sideshow.gotoStep(3)` or `Sideshow.gotoStep(\"creating_users\")`. \n\n--------\nIt's also possible to skip a step if some condition is true: \n\nwith the step property `skiIf` you can set an evaluator which is called in the entrance of the step, and if this evaluator function return true, the step is automatically skipped.",
+			format: "markdown"
+		},
+		{
+			title: "Related Tutorials",
+			text: "You can also define relationships between tutorials, this way, after finishing a tutorial, the user sees a list of others related to this.",
+			format: "markdown"
+		},
+		{
+			title: "Tutorial Eligibility Conditions", 
+			text: function(){/*
+It's possible to define if a tutorial is eligible for a specific context (a screen, URL, some specific application state, or any other thing which can be tested programmatically). If your tutorials are registered and imported globally, for your whole application, you can create rules for each one (if it will be listed in the Sideshow menu).
+
+For example, you may want to do something like this:
+
+<pre>
+	<code>
+affects: [
+	{ hash: "#/messages" },
+	{ route: "/adm/orders", caseSensitive: true },
+	function(){
+		return $(".grid").length > 0;
+	}
+]
+	</code>
+</pre>
+
+In the code above, we're making some fictional tutorial available in three differente situations: 
+
+*	When the URL hash is "#/messages"
+*	When the route is "/adm/orders". Note we're setting a caseSensitive flag to true (this is useful, for instance, for *nix based web servers), so this tutorial will not be listed in a route "#/ADM/routes".
+*	We've added a custom evaluator which just checks if there's some grid (or any element with a `grid` class attribute) in the page, if so, the tutorial is eligible for the current page.
+			*/},
+			format: "markdown"
+		},
+		{
+			title:  "That's (NOT) all, folks!",
+			text: "There's a wide variety of interesting features in this version of Sideshow, some of which we didn't mention in this introductory tutorial. Take this sample, the documentation, open your favorite editor for Javascript and play at will!"
+		}
+    ]
+});

data/examples/stylesheets/example.min.css

@@ -0,0 +1 @@
+*{font-family:OpenSans Light}header{width:100%;height:350px;padding-top:20px;background-color:#e4e4e4}body{padding-bottom:40px}#header_content{height:100%}#introducing_sideshow{position:absolute;z-index:10;right:0;top:80px;width:330px;text-align:right;color:#802000}#introducing_sideshow em{color:#fff;font-style:normal;background-color:#c30;line-height:25px}header img{position:absolute;top:20px}.main-content{position:relative;width:920px;margin:auto}#run_example{border-radius:4px;-webkit-transition:background-color 300ms ease,border-bottom-width 100ms ease;transition:background-color 300ms ease,border-bottom-width 100ms ease;border:1px solid #181818;border-bottom-width:5px;font-size:26px;padding:10px 15px 10px 20px;background-color:#802000;color:#fff;position:absolute;left:0;bottom:50px}#run_example:before{font-family:sideshow-icons;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;content:'\e800';margin-right:10px;font-size:26px}#run_example:after{content:'';display:inline-block;width:5px}#run_example:hover{background-color:#c30}#run_example:hover:after{content:"!"}#run_example:active{background-color:#777;border-bottom-width:1px;outline-width:0}.forkme{position:absolute;top:0;right:0;border:0;z-index:9}.browsehappy{background-color:#700;color:#fff;display:block;margin:0;line-height:50px;padding-left:30px;height:50px}.browsehappy a{color:#fff}.browsehappy:before{margin-right:5px}#wrapper{padding-top:20px}#wrapper h1,#wrapper h2,#wrapper h3{font-family:OpenSans Semibold;font-weight:400}#wrapper h1{font-size:22px;text-transform:uppercase}footer{position:fixed;bottom:0;left:0;right:0;padding-right:10px;height:30px;background-color:rgba(255,255,255,.8);font-size:12px;text-align:right}footer a{font-family:OpenSans Semibold;color:#333;text-decoration:none}#bttf{width:500px;display:inline-block}#bttf figure{height:195px;width:195px;float:left;margin:0 10px 0 0}#dr_brown{width:195px}#red_square{border-radius:4px;position:absolute;left:230px;top:50px;background-color:rgba(119,0,0,.7);width:195px;height:195px;padding:25px;display:none}#survey{display:inline-block;vertical-align:top;margin-left:50px}#survey #first_name,#survey #last_name{width:220px}#survey #email{width:280px}#godfather1 img{float:left;width:280px;margin-right:10px;margin-bottom:10px}#godfather1 .columns-text{display:block;-webkit-columns:3;-moz-columns:3;columns:3;-webkit-column-width:120px;-moz-column-width:120px;column-width:120px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-webkit-column-count:3;-moz-column-count:3;column-count:3}#godfather1 .columns-text p:first-of-type{margin-top:0}#godfather1 .columns-text p:first-of-type:first-letter{font-size:65px;font-family:georgia;float:left;line-height:60px}#wrapper input[type=text]{border-radius:3px;border:1px solid #b1b1b1;padding:5px}#wrapper button{border-radius:3px;font-family:OpenSans Semibold;border:1px solid #802000;padding:5px;margin:0;background-color:#ff4000;color:#fff}#wrapper hr{border-width:0;border-top:double 4px #b1b1b1;width:60%;margin-top:30px;margin-bottom:30px}fieldset{padding:0;border:0}fieldset label{display:block;margin-bottom:5px}fieldset ul{padding:0}fieldset>ul>li{list-style-type:none;margin-bottom:15px}

data/examples/stylesheets/styl/example.styl

@@ -0,0 +1,272 @@
+@import '../../../stylesheets/_icons';
+
+//Variables
+sideshow-example-base-color = #E4E4E4;
+sideshow-example-base-color-dark = darken(sideshow-example-base-color, 20); 
+sideshow-example-base-color-darkest = darken(sideshow-example-base-color, 40); 
+sideshow-example-secondary-color = #C30; 
+sideshow-example-secondary-color-dark = darken(sideshow-example-secondary-color, 15); 
+sideshow-example-secondary-color-lighter = lighten(sideshow-example-secondary-color, 10);
+
+//Layout rules
+*{
+	font-family: OpenSans Light;
+}
+
+header{
+	width: 100%;
+	height: 350px;
+	padding-top: 20px;
+	background-color: sideshow-example-base-color;
+}
+
+body{
+	padding-bottom: 40px;
+}
+
+#header_content{
+	height: 100%;
+}
+
+#introducing_sideshow{
+	position: absolute;
+	z-index: 10;
+	right: 0;
+	top: 80px;
+	width: 330px;
+	text-align: right;
+	color: sideshow-example-secondary-color-dark;
+}
+
+#introducing_sideshow em{
+	color: #FFF;
+	font-style: normal;
+	background-color: sideshow-example-secondary-color;
+	line-height: 25px;
+}
+
+header img{
+	position: absolute;
+	top: 20px;
+}
+
+.main-content{
+	position: relative;
+	width: 920px;
+	margin: auto;
+}
+
+#run_example{
+	border-radius: 4px;
+	transition: background-color 300ms ease, border-bottom-width 100ms ease;
+	icon-play();
+
+	border: solid 1px darken(sideshow-example-base-color, 80);
+	border-bottom-width: 5px;
+	font-size: 26px;
+	padding: 10px;
+	padding-right: 15px;
+	padding-left: 20px;
+	background-color: sideshow-example-secondary-color-dark;
+	color: #FFF;
+	position: absolute;
+	left: 0;
+	bottom: 50px;
+
+	&:before{
+		margin-right: 10px;
+		font-size: 26px;
+	}
+
+	&:after{
+		content: '';
+		display: inline-block;
+		width: 5px;
+	}
+
+	&:hover{
+		background-color: sideshow-example-secondary-color;
+		&:after{
+			content: "!";
+		}
+	}
+
+	&:active{
+		background-color: #777;
+		border-bottom-width: 1px;
+		outline-width: 0;
+	}
+}
+
+.forkme{
+	position: absolute;
+	top: 0; 
+	right: 0; 
+	border: 0;
+	z-index: 9;
+}
+
+.browsehappy{
+	icon-exclamation-triangle();
+	background-color: #700;
+	color: #FFF;
+	display: block;
+	margin: 0;
+	line-height: 50px;
+	padding-left: 30px;
+	height: 50px;
+	a{
+		color: #FFF;
+	}
+	&:before{
+		margin-right: 5px;
+	}
+}
+
+#wrapper{
+	padding-top: 20px;
+	h1, h2, h3{
+		font-family: OpenSans Semibold;
+		font-weight: normal;
+	}
+
+	h1{
+		font-size: 22px;
+		text-transform: uppercase;
+	}
+}
+
+footer{
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding-right: 10px;
+	height: 30px;
+	background-color: rgba(#FFF, 0.8); 
+	font-size: 12px;
+	text-align: right;
+	a{
+		font-family: OpenSans Semibold;
+		color: #333;
+		text-decoration: none;
+	}
+}
+
+/*Fake content*/
+
+#bttf{
+	width: 500px;
+	display: inline-block;
+	figure{
+		height: 195px;
+		width: 195px;
+		float: left;
+		margin: 0;
+		margin-right: 10px;
+	}
+}
+
+#dr_brown{
+	width: 195px;
+}
+
+#red_square{
+	border-radius: 4px;
+	position: absolute;
+	left: 230px;
+	top: 50px;
+	background-color: rgba(#700, 0.7);
+	width: 195px;
+	height: 195px;
+	padding: 25px;
+	display: none;
+}
+
+#survey{
+	display: inline-block;
+	vertical-align: top;
+	margin-left: 50px;
+	#first_name{
+		width: 220px; 
+	}
+
+	#last_name{
+		width: 220px; 
+	}
+
+	#email{
+		width: 280px; 
+	}
+}
+
+#godfather1{
+	img{
+		float: left;
+		width: 280px;
+		margin-right: 10px;
+		margin-bottom: 10px;
+	}
+
+	.columns-text{
+		display: block;
+		columns: 3;
+		column-width: 120px; 
+		column-gap: 15px;
+		column-count: 3;
+		p:first-of-type{
+			&:first-letter{
+				font-size: 65px;
+				font-family: georgia;
+				float: left;
+				line-height: 60px;
+			}
+			margin-top: 0;
+		}
+	}
+}
+
+#wrapper{
+	input[type=text]{
+		border-radius: 3px;
+		border: solid 1px sideshow-example-base-color-dark;
+		padding: 5px;
+	}
+
+	button{
+		border-radius: 3px;
+		font-family: OpenSans Semibold;
+		border: solid 1px sideshow-example-secondary-color-dark;
+		padding: 5px;
+		margin: 0;
+		background-color: sideshow-example-secondary-color-lighter;
+		color: #FFF;
+	}
+
+	hr{
+		border-width: 0;
+		border-top: double 4px sideshow-example-base-color-dark;
+		width: 60%;
+		margin-top: 30px;
+		margin-bottom: 30px;
+	}
+}
+
+fieldset {
+	padding: 0; 
+	border: 0;
+	
+	label{
+		display: block;
+		margin-bottom: 5px;
+	}
+
+	ul{
+		padding: 0;
+	}
+
+	> ul > li{
+		list-style-type: none;
+		margin-bottom: 15px;
+	}
+}

data/gulp/extensions/gulp-html-extend.js

@@ -0,0 +1,151 @@
+/* Created by FrankFang on 14-7-24. */
+/* jshint -W040:true */
+'use strict';
+
+var fs = require('fs')
+var path = require('path')
+var through2 = require('through2')
+var gUtil = require('gulp-util')
+var PluginError = gUtil.PluginError
+
+module.exports = function (options) {
+
+    options = options || {}
+
+    return through2.obj(function (file, enc, cb) {
+
+        if (file.isNull()) {
+            return cb(null, file)
+        }
+
+        if (file.isStream()) {
+            return cb(new PluginError('gulp-html-extend', 'Streaming is not supported'))
+        }
+
+        if (file.isBuffer()) {
+
+            extendFile(file, function (noMaster) {
+                return cb(null, file)
+            })
+        }
+
+
+    })
+
+}
+
+function makeFile(absolutePath, cb) {
+    fs.readFile(absolutePath, function (error, data) {
+        if (error) { throw error }
+        var file = new gUtil.File({
+            base: path.dirname(absolutePath),
+            path: absolutePath,
+            contents: new Buffer(data),
+        })
+        cb(file)
+    })
+}
+
+function extendFile(file, afterExtend) {
+
+    var fileContent = file.contents.toString()
+    var fileLines = splitByLine(fileContent)
+
+    var includedLines = fileLines.map(function (line) {
+        var includeRelativePath = findInclude(line)
+        if (includeRelativePath) {
+            var includeAbsolutePath = path.join(path.dirname(file.path), includeRelativePath)
+            return fs.readFileSync(includeAbsolutePath);
+        } else {
+            return line
+        }
+    })
+
+    file.contents = new Buffer(includedLines.join('\n'))
+
+
+    var masterRelativePath = findMaster(file.contents.toString('utf-8'))
+    if (!masterRelativePath) {
+        afterExtend()
+        return
+    }
+
+    var masterAbsolute = path.join(path.dirname(file.path), masterRelativePath)
+
+    makeFile(masterAbsolute, function (masterFile) {
+
+        extendFile(masterFile, function () {
+
+            var masterContent = masterFile.contents.toString()
+            var lines = masterContent.split(/\n|\r|\r\n/)
+
+            var newLines = lines.map(function (line, index, array) {
+                var blockName = findPlaceholder(line)
+                if (blockName) {
+                    var blockContent = getBlockContent(file.contents.toString(), blockName)
+                    return blockContent || line
+                } else {
+                    return line
+                }
+            })
+
+            var newContent = newLines.join('\n')
+
+            file.contents = new Buffer(newContent)
+
+            return afterExtend()
+
+        })
+
+    })
+
+}
+
+function findMaster(string) {
+    var regex = /<!--\s*@@master\s*=\s*(\S+)\s*-->/
+    var match = string.match(regex)
+    return match ? match[1] : null
+
+}
+
+function findInclude(string) {
+    var regex = /<!--\s*@@include\s*=\s*(\S+)\s*-->/
+    var match = string.match(regex)
+    return match ? match[1] : null
+
+}
+
+function findPlaceholder(string) {
+    var regex = /<!--\s*@@placeholder\s*=\s*(\S+)\s*-->/
+    var match = string.match(regex)
+    return match ? match[1] : null
+}
+
+function getBlockContent(string, blockName) {
+    var result = ''
+    var lines = splitByLine(string)
+    var inBlock = false
+    var regex = new RegExp('<!--\\s*@@block\\s*=\\s*' + blockName + '\\s*-->')
+
+    return lines.reduce(function (prev, current) {
+            if (inBlock) {
+                var matchEnd = /<!--\s*@@close\s*-->/.test(current)
+                if (matchEnd) {
+                    inBlock = false
+                    return prev
+                }
+                return prev + (prev === '' ? '' : '\n') + current
+            }
+            var matchBegin = regex.test(current)
+            if (matchBegin) {
+                inBlock = true
+                return prev
+            } else {
+                return prev
+            }
+        }, '');
+}
+
+function splitByLine(string) {
+    return string.split(/\n|\r|\r\n/)
+}