sideshow 0.4.1

data/src/wizard/wizard_menu.js

@@ -0,0 +1,101 @@
+    /**
+    The main menu, where the available wizards are listed
+
+    @class WizardMenu
+    @static
+    **/
+    var WizardMenu = {};
+
+    /**
+    Renders the wizard menu
+
+    @method render
+    @param {Array} wizards                                The wizards list
+    @static
+    **/
+    WizardMenu.render = function(wizards) {
+        var $menu = $("<div>").addClass("sideshow-wizard-menu");
+        this.$el = $menu;
+        var $title = $("<h1>").addClass("sideshow-wizard-menu-title");
+        $menu.append($title);
+
+        if (wizards.length > 0) {
+            var $wizardsList = $("<ul>");
+
+            //Extracting this function to avoid the JSHint warning W083
+            function setClick($wiz, wizard) {
+                $wiz.click(function() {
+                    WizardMenu.hide(function() {
+                        wizard.prepareAndPlay();
+                    });
+                });
+            }
+
+            for (var w = 0; w < wizards.length; w++) {
+                var wiz = wizards[w];
+                var $wiz = $("<li>");
+                var $wizTitle = $("<h2>").text(wiz.title);
+                
+                var description = wiz.description;
+                description.length > 100 && (description = description.substr(0, 100) + "...");
+
+                var $wizDescription = $("<span>").addClass("sideshow-wizard-menu-item-description").text(description);
+                var $wizEstimatedTime = $("<span>").addClass("sideshow-wizard-menu-item-estimated-time").text(wiz.estimatedTime);
+                $wiz.append($wizEstimatedTime, $wizTitle, $wizDescription);
+                $wizardsList.append($wiz);
+
+                setClick($wiz, wiz);
+            }
+            $menu.append($wizardsList);
+        } else {
+            $("<div>").addClass("sideshow-no-wizards-available").text(getString(strings.noAvailableWizards)).appendTo($menu);
+        }
+
+        $body.append($menu);
+    };
+
+    /**
+    Shows the wizard menu
+
+    @method show
+    @param {Array} wizards                                The wizards list
+    @static
+    **/
+    WizardMenu.show = function(wizards, title) {
+        if(wizards.length == 1 && SS.config.autoSkipIntro)
+            wizards[0].prepareAndPlay();
+        else{
+            SS.setEmptySubject();
+            Mask.CompositeMask.singleInstance.update(Subject.position, Subject.dimension, Subject.borderRadius);
+            Mask.CompositeMask.singleInstance.fadeIn();
+
+            WizardMenu.render(wizards);
+
+            if (title)
+                this.setTitle(title);
+            else
+                this.setTitle(getString(strings.availableWizards));
+        }
+    };
+
+    /**
+    Hides the wizard menu
+
+    @method hide
+    @param {Function} callback                            The callback to be called after hiding the menu
+    @static
+    **/
+    WizardMenu.hide = function(callback) {
+        var menu = this, 
+            $el = menu.$el;
+
+        $el && $el.addClass("sideshow-menu-closed");
+        setTimeout(function() {
+            $el && $el.hide();
+            if (callback) callback();
+        }, longAnimationDuration);
+    };
+
+    WizardMenu.setTitle = function(title) {
+        this.$el.find(".sideshow-wizard-menu-title").text(title);
+    };

data/stylesheets/_animations.styl

@@ -0,0 +1,87 @@
++keyframes(sideshow-wizard-menu-title-slideright){
+  0% {
+    opacity: 0;
+    left: -30px;
+  }
+
+  30% {
+  	opacity: 0;
+    left: -30px;
+  }
+
+  100% {
+  	opacity: 1;
+  	left: 0;
+  } 
+}
+
++keyframes(sideshow-wizard-menu-title-fadeout){
+  0% {
+    opacity: 1;
+    text-shadow: none;
+  }
+
+  30% {
+  	opacity: 1;
+    text-shadow: none;
+  }
+
+  100% {
+  	opacity: 0;
+  	text-shadow: 0 0 7px sideshow-wizard-menu-item-foreground-color, 0 0 3px sideshow-wizard-menu-item-foreground-color;
+  } 
+}
+
+aaaa{
+    color: blue;
+}
+
++keyframes(sideshow-wizard-menu-item-slidedown){
+  0% {
+    opacity: 0;
+    top: -100px;
+  }
+
+  30% {
+  	opacity: 0;
+    top: -100px;
+  }
+
+  100% {
+  	opacity: 1;
+  	top: 0;
+  } 
+}
+
++keyframes(sideshow-wizard-menu-item-slideleft){
+  0% {
+    opacity: 1;
+    left: -90px;
+  }
+
+  0% {
+    opacity: 1;
+    left: -90px;
+  }
+
+  100% {
+  	opacity: 0;
+  	left: -190px;
+  } 
+}
+
+
++keyframes(sideshow-subject-arrow-animation){
+  0% {
+  	margin-top: 0;
+  }
+
+  50% {
+  	transform: scale(1, 0.7);
+  	margin-top: 10px;
+  }
+
+  100% {
+  	margin-top: 0;
+  } 
+}

data/stylesheets/_font-face.styl

@@ -0,0 +1,135 @@
+@font-face {
+  font-family: 'sideshow-icons';
+  src: url(sideshow-fonts-path + 'sideshow-icons/sideshow-icons.eot');
+  src: url(sideshow-fonts-path + 'sideshow-icons/sideshow-icons.eot?#iefix') format('embedded-opentype'), 
+       url(sideshow-fonts-path + 'sideshow-icons/sideshow-icons.woff') format('woff'), 
+       url(sideshow-fonts-path + 'sideshow-icons/sideshow-icons.ttf') format('truetype'), 
+       url(sideshow-fonts-path + 'sideshow-icons/sideshow-icons.svg#sideshow-icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+    font-family: 'OpenSans Light';
+    src: url(sideshow-fonts-path + 'open-sans-family/opensans-light.eot');
+    src: local('☺'), 
+         url(sideshow-fonts-path + 'open-sans-family/opensans-light.eot?#iefix') format('embedded-opentype'),
+         url(sideshow-fonts-path + 'open-sans-family/opensans-light.woff') format('woff'),
+         url(sideshow-fonts-path + 'open-sans-family/opensans-light.ttf') format('truetype'),
+         url(sideshow-fonts-path + 'open-sans-family/opensans-light.svg#open_sanslight') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'OpenSans Semibold';
+    src: url(sideshow-fonts-path + 'open-sans-family/opensans-semibold.eot');
+    src: local('☺'), 
+         url(sideshow-fonts-path + 'open-sans-family/opensans-semibold.eot?#iefix') format('embedded-opentype'),
+         url(sideshow-fonts-path + 'open-sans-family/opensans-semibold.woff') format('woff'),
+         url(sideshow-fonts-path + 'open-sans-family/opensans-semibold.ttf') format('truetype'),
+         url(sideshow-fonts-path + 'open-sans-family/opensans-semibold.svg#open_sanssemibold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+
+if sideshow-enable-whole-opensans-family {
+    @font-face {
+        font-family: 'OpenSans Bold Italic';
+        src: url(sideshow-fonts-path + 'open-sans-family/opensans-bolditalic.eot');
+        src: local('☺'), 
+             url(sideshow-fonts-path + 'open-sans-family/opensans-bolditalic.eot?#iefix') format('embedded-opentype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-bolditalic.woff') format('woff'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-bolditalic.ttf') format('truetype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-bolditalic.svg#open_sansbold_italic') format('svg');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'OpenSans Bold';
+        src: url(sideshow-fonts-path + 'open-sans-family/opensans-bold.eot');
+        src: local('☺'), 
+             url(sideshow-fonts-path + 'open-sans-family/opensans-bold.eot?#iefix') format('embedded-opentype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-bold.woff') format('woff'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-bold.ttf') format('truetype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-bold.svg#open_sansbold') format('svg');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'OpenSans Extra Bold';
+        src: url(sideshow-fonts-path + 'open-sans-family/opensans-extrabold.eot');
+        src: local('☺'), 
+             url(sideshow-fonts-path + 'open-sans-family/opensans-extrabold.eot?#iefix') format('embedded-opentype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-extrabold.woff') format('woff'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-extrabold.ttf') format('truetype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-extrabold.svg#open_sansextrabold') format('svg');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'OpenSans Extra Bold Italic';
+        src: url(sideshow-fonts-path + 'open-sans-family/opensans-extrabolditalic.eot');
+        src: local('☺'), 
+             url(sideshow-fonts-path + 'open-sans-family/opensans-extrabolditalic.eot?#iefix') format('embedded-opentype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-extrabolditalic.woff') format('woff'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-extrabolditalic.ttf') format('truetype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-extrabolditalic.svg#open_sansextrabold_italic') format('svg');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'OpenSans Bold Italic';
+        src: url(sideshow-fonts-path + 'open-sans-family/opensans-italic.eot');
+        src: local('☺'), 
+             url(sideshow-fonts-path + 'open-sans-family/opensans-italic.eot?#iefix') format('embedded-opentype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-italic.woff') format('woff'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-italic.ttf') format('truetype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-italic.svg#open_sansitalic') format('svg');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    
+    @font-face {
+        font-family: 'OpenSans Light Italic';
+        src: url(sideshow-fonts-path + 'open-sans-family/opensans-lightitalic.eot');
+        src: local('☺'), 
+             url(sideshow-fonts-path + 'open-sans-family/opensans-lightitalic.eot?#iefix') format('embedded-opentype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-lightitalic.woff') format('woff'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-lightitalic.ttf') format('truetype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-lightitalic.svg#open_sanslight_italic') format('svg');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'OpenSans Regular';
+        src: url(sideshow-fonts-path + 'open-sans-family/opensans-regular.eot');
+        src: local('☺'), 
+             url(sideshow-fonts-path + 'open-sans-family/opensans-regular.eot?#iefix') format('embedded-opentype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-regular.woff') format('woff'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-regular.ttf') format('truetype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-regular.svg#open_sansregular') format('svg');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'OpenSans SemiBold Italic';
+        src: url(sideshow-fonts-path + 'open-sans-family/opensans-semibolditalic.eot');
+        src: local('☺'), 
+             url(sideshow-fonts-path + 'open-sans-family/opensans-semibolditalic.eot?#iefix') format('embedded-opentype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-semibolditalic.woff') format('woff'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-semibolditalic.ttf') format('truetype'),
+             url(sideshow-fonts-path + 'open-sans-family/opensans-semibolditalic.svg#open_sanssemibold_italic') format('svg');
+        font-weight: normal;
+        font-style: normal;
+    }
+}

data/stylesheets/_icons.styl

@@ -0,0 +1,27 @@
+sideshow-icon(unicode, pseudo-element)
+    &:{pseudo-element}
+        font-family: "sideshow-icons";
+        font-style: normal;
+        font-weight: normal;
+        speak: none;
+       
+        display: inline-block;
+        text-decoration: inherit;
+        width: 1em;
+        text-align: center;
+        if(pseudo-element == before){
+            margin-right: .4em;
+        } else {
+            margin-left: .4em;
+        }
+       
+        font-variant: normal;
+        text-transform: none;
+        content: unicode;
+
+
+icon-play(pseudo-element = before) { sideshow-icon('\e800', pseudo-element); }
+icon-warning(pseudo-element = before) { sideshow-icon('\e801', pseudo-element); }
+icon-caret-down(pseudo-element = before) { sideshow-icon('\e802', pseudo-element); }
+icon-clock(pseudo-element = before) { sideshow-icon('\e803', pseudo-element); }
+icon-close(pseudo-element = before) { sideshow-icon('\e804', pseudo-element); }

data/stylesheets/_layout.styl

@@ -0,0 +1,362 @@
+//Elements which can fade
+//@abstract
+$sideshow-fadable-element{
+	transition: opacity sideshow-long-transition-duration ease;
+}
+
+//A Sideshow mask
+//@abstract
+$sideshow-mask{
+	@extends $sideshow-fadable-element;
+	position: fixed;
+	opacity: sideshow-mask-opacity;
+	background-color: sideshow-mask-background-color;
+}
+
+$sideshow-button{
+	border-radius: 3px;
+	transition: background-color sideshow-fast-transition-duration ease;
+	background-color: sideshow-button-background-color;
+	border: solid 1px darken(sideshow-button-background-color, 10);
+	padding: 5px;
+	text-transform: uppercase;
+	color: sideshow-button-foreground-color;
+	&:hover{
+		background-color: darken(sideshow-button-background-color, 10);
+	}
+	&:disabled{
+		background-color: #BBB !important; //No fade effects here
+		border-color: #999;
+	}
+}
+
+//Masks a subject
+//@extends $sideshow-mask
+.sideshow-subject-mask{
+	@extends $sideshow-mask;
+	absolute-full-size();
+	position: fixed;
+	z-index: 14999;
+	width: 0;
+	height: 0;
+}
+
+//A part of the composite mask (the mask used by Sideshow to surround a subject)
+//@extend $sideshow-mask
+.sideshow-mask-part{
+	@extends $sideshow-mask;
+	z-index: 15000;
+}
+
+//A part of the composite mask to be positionated at the corners of a subject (if the subject has rounded corners)
+//It uses a dynamically generated SVG to cover the white hole which remains when masking rounded corner subjects
+//@extends $sideshow-mask
+.sideshow-mask-corner-part{
+	@extends $sideshow-mask;
+	background-color: transparent;
+	z-index: 15001;
+	overflow: hidden;
+	svg{
+		position: absolute;
+		left: 0;
+		top: 0;
+		path {
+			fill: sideshow-mask-background-color;
+		}
+	}
+
+	&.leftTop{
+		transform: rotate(0deg);
+	}
+
+	&.rightTop{
+		transform: rotate(90deg);
+	}
+
+	&.leftBottom{
+		transform: rotate(270deg);
+	}
+
+	&.rightBottom{
+		transform: rotate(180deg);
+	}
+}
+
+//CSS way to make something invisible but holding space 
+.sideshow-invisible{
+	opacity: 0 !important;
+}
+
+//CSS way to avoid rendering something
+.sideshow-hidden{
+	display: none !important;
+}
+
+//Occupying the biggest of the four parts of the composite mask
+.sideshow-details-panel{
+	position: fixed;
+	z-index: 15001;
+}
+
+//An area positionaed over the .sideshow-details-panel where the step description text is shown
+//@extends $sideshow-fadable-element
+.sideshow-step-description{
+	@extends $sideshow-fadable-element;
+	position: absolute;
+	display: inline-block;
+	background-color: rgba(sideshow-step-description-background-color, 0.7);
+	padding: 21px;
+	font-size: 14px;
+
+	//The step title
+	h2{
+		display: inline-block;
+		font-size: sideshow-big-font-size;
+		text-transform: uppercase;
+		color: sideshow-step-description-title-color;
+		margin-bottom: 10px;
+	}
+
+	//The step position indicator (e.g. 3/11 -> The step 3 of 11)
+	.sideshow-step-position{
+		display: inline-block;
+		font-family: sideshow-default-semibold-font-family;
+		font-size: sideshow-big-font-size;
+		color: sideshow-step-position-color;
+		margin-right: 10px;
+	}
+
+	//The description itself
+	.sideshow-step-text{
+		clear: both;
+		display: block;
+		color: sideshow-step-text-color;
+		line-height: sideshow-default-font-size + 10px;
+
+		code{
+			font-family: monospace, courier;
+		}
+	}
+
+	//The "next/finish" button
+	.sideshow-next-step-button{
+		@extends $sideshow-button;
+		icon-play();
+		float: right;
+		margin-top: 10px;
+	}
+
+	//Lists (when using Markdown Syntax you can use lists in the step description)
+	ul, ol{
+		padding-left: 40px;
+	}
+
+	//An unordered list (when using Markdown Syntax you can use lists in the step description)
+	ul{
+		list-style-type: disc;
+	}
+
+	//An ordered list (when using Markdown Syntax you can use lists in the step description)
+	ol{
+		list-style-type: decimal;
+	}
+}
+
+//An arrow used for pointing to an item inside the highlighted subject which deserves attention at the moment
+//@extends $sideshow-fadable-element;
+.sideshow-subject-arrow{
+	@extends $sideshow-fadable-element;
+	icon-caret-down();
+	icon-font-size(40px);
+	only-icon-button();
+	color: sideshow-subject-arrow-color;
+	position: fixed;
+	z-index: 15003;
+	opacity: 0.8;
+	animation(  name: sideshow-subject-arrow-animation, 
+				duration: sideshow-long-transition-duration, 
+				timing-function: ease, 
+				iteration-count: infinite);
+
+	&:before{
+		line-height: 0.5;
+	}
+}
+
+//The initial sideshow menu where user chooses a tutorial
+.sideshow-wizard-menu{
+	absolute-full-size();
+	position: fixed;
+	margin: auto;
+	width: 750px;
+	height: 400px;
+	z-index: 15002;
+
+	//The initial menu title
+	.sideshow-wizard-menu-title{
+		animation(  name: sideshow-wizard-menu-title-slideright, 
+					duration: 2s, 
+					timing-function: ease, 
+					iteration-count: 1, 
+					fill-mode: forwards);
+
+		text-transform: uppercase;
+		color: sideshow-wizard-menu-title-color;
+		font-size: 32px;
+		font-family: sideshow-default-light-font-family;
+		position: relative;
+		font-weight: normal;
+	}
+
+	//The initial menu tutorial list
+	ul{
+		padding: 0;
+		margin: 0;
+		li{
+			clearfix();
+			list-style-type: none;
+			cursor: pointer;
+			opacity: 0;
+			position: relative;
+			left: -90px;
+			animation(  name: sideshow-wizard-menu-item-slidedown, 
+						duration: 2s, 
+						timing-function: ease, 
+						iteration-count: 1, 
+						fill-mode: forwards);
+
+	    	height: 50px;
+	    	overflow: hidden;
+			margin-top: 20px;
+
+			for i in (1..15){
+		    	&:nth-child({i}){
+		    		animation-delay: 300ms + (i * 300ms);
+		    		-webkit-animation-delay: 300ms + (i * 300ms);
+		    	}
+		    } 
+				
+			h2{
+				transition: color sideshow-default-transition-duration ease;
+				font-family: sideshow-default-light-font-family;
+				font-size: 12px;
+				font-weight: normal;
+				text-transform: uppercase;
+				color: sideshow-wizard-menu-item-foreground-color;
+				margin: 0;
+			}
+
+			.sideshow-wizard-menu-item-description{
+				color: sideshow-wizard-menu-item-foreground-color;
+				font-size: 12px;
+			}
+
+			.sideshow-wizard-menu-item-estimated-time{
+				icon-clock();
+				transition: border-right sideshow-default-transition-duration ease;
+				border-right: solid 0 sideshow-wizard-menu-item-foreground-color;
+				opacity: 0.5;
+				font-size: 10px;
+				color: sideshow-wizard-menu-item-foreground-color;
+				float: left;
+				height: 50px;
+				width: 80px;
+				margin-right: 10px;
+				position: relative;
+				&:before{
+					margin-right: 5px;
+				}
+			}
+
+			&:hover{
+				h2{
+					color: sideshow-wizard-menu-item-hover-foreground-color;
+				}
+				.sideshow-wizard-menu-item-estimated-time{
+					border-right: solid 20px sideshow-wizard-menu-item-foreground-color;
+				}
+			}
+		}
+	}
+
+	//This class rule defines the closing animation for Sideshow menu
+	&.sideshow-menu-closed{
+		h1{
+			animation(  name: sideshow-wizard-menu-title-fadeout, 
+						duration: sideshow-long-transition-duration, 
+						timing-function: ease, 
+						iteration-count: 1, 
+						fill-mode: forwards);
+		}
+		
+		ul{
+			li{
+				opacity: 1;
+				animation(  name: sideshow-wizard-menu-item-slideleft, 
+							duration: sideshow-long-transition-duration, 
+							timing-function: ease, 
+							iteration-count: 1, 
+							fill-mode: forwards);
+		    
+			    for i in (1..15){
+			    	&:nth-child({i}){
+			    		animation-delay: 150ms + (i * 100ms);
+			    		-webkit-animation-delay: 150ms + (i * 100ms);
+			    	}
+			    } 
+			}
+		}
+	}
+}
+
+//The Sideshow close button
+.sideshow-close-button{
+	icon-close();
+	icon-font-size(sideshow-medium-font-size);
+	text-shadow: 0 0 5px #030, 0 0 3px #000, 0 2px 3px #000;
+	transition: text-shadow sideshow-default-transition-duration ease;
+	border-width: 0;
+	background-color: transparent !important;
+	z-index: 15005;
+	position: fixed;
+	color: sideshow-close-button-foreground-color;
+	font-size: sideshow-medium-font-size;
+	bottom: 25px;
+	right: 25px;
+	cursor: pointer;
+	text-transform: uppercase;
+	
+	&:hover{
+		text-shadow: 0 0 10px #030, 0 0 6px #000, 0 2px 5px #000, 0 0 7px #000;
+		background-color: transparent !important;
+		left: auto;
+		top: auto;
+	}
+	
+	&:active{
+		outline-width: 0 !important;
+	}
+	
+	&:before{
+		margin-right: 5px;
+	}
+}
+
+//The Sideshow initial menu style when no tutorials are available
+.sideshow-no-wizards-available{
+	animation(  name: sideshow-wizard-menu-item-slidedown, 
+				duration: 2s, 
+				timing-function: ease, 
+				iteration-count: 1, 
+				fill-mode: forwards);
+	color: sideshow-wizard-menu-item-foreground-color;
+	opacity: 0;
+	position: relative;
+	height: 50px;
+	margin-top: 20px;
+}
+
+body{
+	margin: 0;
+	height: 100%;
+}