sideshow 0.4.1

data/src/mask/composite_mask_corner_part.js

@@ -0,0 +1,105 @@
+    /**
+    A corner part composing the mask
+
+    @class CornerPart
+    @@initializer 
+    @param {Object} position                              The positioning information 
+    @param {Object} dimension                             The dimension information 
+    **/
+    Mask.CompositeMask.CornerPart = jazz.Class().extending(VisualItem);
+
+    /**
+    @@alias CornerPart
+    @@to Mask.CompositeMask.CornerPart
+    **/
+    var CornerPart = Mask.CompositeMask.CornerPart;
+
+    /**
+    An object holding positioning information for the mask corner part
+
+    @@field position
+    @type Object
+    **/
+    CornerPart.field("position", {});
+
+    /**
+    An object holding dimension information for the mask corner part
+
+    @@field position
+    @type Object
+    **/
+    CornerPart.field("dimension", {});
+
+    /**
+    An object holding border radius information for the mask corner part
+
+    @@field borderRadius
+    @type Object
+    **/
+    CornerPart.field("borderRadius", 0);
+
+    /**
+    Formats the SVG path for the corner part
+
+    @method SVGPathPointsTemplate
+    @param {Number} borderRadius                          The corner part border radius
+    @static
+    **/
+    CornerPart.static.SVGPathPointsTemplate = function(borderRadius) {
+        return "m 0,0 0," + borderRadius + " C 0," + borderRadius * 0.46 + " " + borderRadius * 0.46 + ",0 " + borderRadius + ",0";
+    };
+
+    /**
+    Renders the SVG for the corner part
+
+    @method buildSVG
+    @param {Number} borderRadius                          The corner part border radius
+    @static
+    **/
+    CornerPart.static.buildSVG = function(borderRadius) {
+        function SVG(nodeName) {
+            return document.createElementNS("http://www.w3.org/2000/svg", nodeName);
+        }
+
+        var bezierPoints = this.SVGPathPointsTemplate(borderRadius);
+        var $svg = $(SVG("svg"));
+        var $path = $(SVG("path"));
+
+        $path.attr("d", bezierPoints);
+        $svg.append($path);
+
+        return $svg[0];
+    };
+
+    /**
+    Renders the mask corner part
+
+    @method render
+    @return {Object}                                      The corner part jQuery wrapped DOM element
+    **/
+    CornerPart.prototype.render = function() {
+        this.$el = $("<div>")
+            .addClass("sideshow-mask-corner-part")
+            .addClass("sideshow-hidden")
+            .addClass("sideshow-invisible");
+        this.$el.append(CornerPart.buildSVG(this.borderRadius));
+        $body.append(this.$el);
+        return this.$el;
+    };
+
+    /**
+    Updates the positioning and border radius of the mask corner part
+
+    @method update
+    @param {Object} position                              The positioning information 
+    @param {Object} borderRadius                          The border radius information 
+    **/
+    CornerPart.prototype.update = function(position, borderRadius) {
+        this.$el
+            .css("left", position.x)
+            .css("top", position.y)
+            .css("width", borderRadius)
+            .css("height", borderRadius);
+
+        $(this.$el).find("path").attr("d", CornerPart.SVGPathPointsTemplate(borderRadius));
+    };

data/src/mask/composite_mask_part.js

@@ -0,0 +1,51 @@
+    /**
+    @@alias Part
+    @@to Mask.CompositeMask.Part
+    **/
+    var Part = Mask.CompositeMask.Part;
+
+    /**
+    An object holding positioning information for the mask part
+
+    @@field position
+    @type Object
+    **/
+    Part.field("position", {});
+
+    /**
+    An object holding dimension information for the mask part
+
+    @@field position
+    @type Object
+    **/
+    Part.field("dimension", {});
+
+    /**
+    Renders the mask part
+
+    @method render
+    **/
+    Part.method("render", function() {
+        this.$el = $("<div>")
+            .addClass("sideshow-mask-part")
+            .addClass("sideshow-hidden")
+            .addClass("sideshow-invisible");
+        this.callSuper("render");
+    });
+
+    /**
+    Updates the dimension and positioning of the subject mask part
+
+    @method update
+    @param {Object} position                              The positioning information 
+    @param {Object} dimension                             The dimension information 
+    **/
+    Part.method("update", function(position, dimension) {
+        this.position = position;
+        this.dimension = dimension;
+        this.$el
+            .css("left", position.x)
+            .css("top", position.y)
+            .css("width", dimension.width)
+            .css("height", dimension.height);
+    });

data/src/mask/mask.js

@@ -0,0 +1,6 @@
+	/**
+	Namespace to hold classes for mask control
+
+	@namespace Mask
+	**/
+	var Mask = {};

data/src/mask/subject_mask.js

@@ -0,0 +1,34 @@
+	/**
+	Controls the mask that covers the subject during a step transition
+
+	@class SubjectMask
+	@@singleton
+	**/
+	Mask.SubjectMask = jazz.Class().extending(FadableItem).singleton;
+
+	/**
+	Renders the subject mask
+
+	@method render
+	**/
+	Mask.SubjectMask.method("render", function() {
+	    this.$el = $("<div>").addClass("sideshow-subject-mask");
+	    this.callSuper("render");
+	});
+
+	/**
+	Updates the dimension, positioning and border radius of the subject mask
+
+	@method update
+	@param {Object} position                              The positioning information 
+	@param {Object} dimension                             The dimension information 
+	@param {Object} borderRadius                          The border radius information 
+	**/
+	Mask.SubjectMask.method("update", function(position, dimension, borderRadius) {
+	    this.$el
+	        .css("left", position.x)
+	        .css("top", position.y)
+	        .css("width", dimension.width)
+	        .css("height", dimension.height)
+	        .css("border-radius", borderRadius.leftTop + "px " + borderRadius.rightTop + "px " + borderRadius.leftBottom + "px " + borderRadius.rightBottom + "px ");
+	});

data/src/step/arrow.js

@@ -0,0 +1,88 @@
+    /**
+    A single arrow for pointing individual items in current subject 
+
+    @class Arrow
+    **/
+    var Arrow = jazz.Class().extending(FadableItem);
+
+    /**
+    The jQuery wrapped object which will be pointed by this arrow
+
+    @@field target
+    @type Object
+    **/
+    Arrow.field("target", {});
+
+    /**
+    Flag created to set if the arrow was visible once, this is used for recreating references to the targets DOM objects
+
+    @@field onceVisible
+    @type Object
+    **/
+    Arrow.field("onceVisible", false);
+
+    /**
+    Renders the Arrow
+
+    @method render
+    **/
+    Arrow.method("render", function() {
+        this.$el = $("<div>")
+            .addClass("sideshow-subject-arrow")
+            .addClass("sideshow-hidden")
+            .addClass("sideshow-invisible");
+        this.callSuper("render");
+    });
+
+    /**
+    Positionates the Arrow according to its target
+
+    @method positionate
+    **/
+    Arrow.method("positionate", function() {
+        var target = this.target;
+        target.position = {
+            x: target.$el.offset().left - $window.scrollLeft(),
+            y: target.$el.offset().top - $window.scrollTop()
+        };
+        target.dimension = {
+            width: target.$el.outerWidth(),
+            height: target.$el.outerHeight()
+        };
+
+        this.$el.css("top", target.position.y - 30 + "px")
+            .css("left", target.position.x + (parsePxValue(target.dimension.width) / 2) - 12 + "px");
+    });
+
+    /**
+    Shows the Arrow 
+
+    @method show
+    **/
+    Arrow.method("show", function() {
+        this.callSuper("show");
+        this.positionate();
+    });
+
+    /**
+    Does a fade in transition in the Arrow 
+
+    @method fadeIn
+    **/
+    Arrow.method("fadeIn", function() {
+        this.callSuper("fadeIn");
+        this.positionate();
+    });
+
+    /**
+    Checks if the arrow's target position or dimension has changed
+
+    @method hasChanged
+    @return boolean                                     
+    **/
+    Arrow.method("hasChanged", function() {
+        return (this.target.dimension.width !== this.target.$el.outerWidth() ||
+            this.target.dimension.height !== this.target.$el.outerHeight() ||
+            this.target.position.y !== (this.target.$el.offset().top - $window.scrollTop())||
+            this.target.position.x !== (this.target.$el.offset().left - $window.scrollLeft()));
+    });

data/src/step/arrows.js

@@ -0,0 +1,155 @@
+    /**
+    Class representing all the current shown arrows
+
+    @class Arrows
+    @static
+    **/
+    var Arrows = {};
+
+    Arrows.arrows = [];
+
+    /**
+    Clear the currently defined arrows
+
+    @method clear
+    @static
+    **/
+    Arrows.clear = function() {
+        this.arrows = [];
+    };
+
+    /**
+    Sets the targets for arrows to point
+
+    @method setTargets
+    @static
+    **/
+    Arrows.setTargets = function(targets, targetsChanged) {
+        if (targets.constructor === String) targets = $(targets);
+
+        if (targets instanceof $ && targets.length > 0) {
+            targets.each(function() {
+                var arrow = Arrow.build();
+                arrow.target.$el = $(this);
+                if (arrow.target.$el.is(":visible")) {
+                    Arrows.arrows.push(arrow);
+                    arrow.onceVisible = true;
+                }
+            });
+        } 
+        else if(!targetsChanged) 
+            throw new SSException("150", "Invalid targets.");
+    };
+
+    Arrows.recreateDOMReferences = function() {
+        for (var a = 0; a < this.arrows.length; a++) {
+            var arrow = this.arrows[a];
+            arrow.$el.remove();
+        }
+
+        Arrows.clear();
+        Arrows.setTargets(currentWizard.currentStep.targets, true);
+        Arrows.render();
+        Arrows.positionate();
+        Arrows.show();
+    };
+
+    /**
+    Iterates over the arrows collection showing each arrow
+
+    @method show
+    @static
+    **/
+    Arrows.show = function() {
+        for (var a = 0; a < this.arrows.length; a++) {
+            var arrow = this.arrows[a];
+            arrow.show();
+        }
+    };
+
+    /**
+    Iterates over the arrows collection hiding each arrow
+
+    @method hide
+    @static
+    **/
+    Arrows.hide = function() {
+        for (var a = 0; a < this.arrows.length; a++) {
+            var arrow = this.arrows[a];
+            arrow.hide();
+        }
+    };
+
+    /**
+    Iterates over the arrows collection fading in each arrow
+
+    @method fadeIn
+    @static
+    **/
+    Arrows.fadeIn = function() {
+        for (var a = 0; a < this.arrows.length; a++) {
+            var arrow = this.arrows[a];
+            arrow.fadeIn();
+        }
+    };
+
+    /**
+    Iterates over the arrows collection fading out each arrow
+
+    @method fadeOut
+    @static
+    **/
+    Arrows.fadeOut = function() {
+        for (var a = 0; a < this.arrows.length; a++) {
+            var arrow = this.arrows[a];
+            registerFadeOut(arrow);
+        }
+
+        function registerFadeOut(arrow) {
+            arrow.fadeOut(function() {
+                arrow.destroy();
+            });
+        }
+    };
+
+    /**
+    Iterates over the arrows collection repositionating each arrow
+
+    @method positionate
+    @static
+    **/
+    Arrows.positionate = function() {
+        for (var a = 0; a < this.arrows.length; a++) {
+            var arrow = this.arrows[a];
+            arrow.positionate();
+        }
+    };
+
+    /**
+    Iterates over the arrows collection rendering each arrow
+
+    @method render
+    @static
+    **/
+    Arrows.render = function() {
+        for (var a = 0; a < this.arrows.length; a++) {
+            var arrow = this.arrows[a];
+            arrow.render();
+        }
+    };
+
+    /**
+    A Polling function to check if arrows coordinates has changed
+
+    @method pollForArrowsChanges
+    **/
+    Arrows.pollForArrowsChanges = function() {
+        var brokenReference = false;
+        for (var a = 0; a < this.arrows.length; a++) {
+            var arrow = this.arrows[a];
+            if (arrow.hasChanged()) arrow.positionate();
+            if (arrow.onceVisible && !arrow.target.$el.is(":visible")) brokenReference = true;
+        }
+
+        if (brokenReference) this.recreateDOMReferences();
+    };

data/src/step/step_description.js

@@ -0,0 +1,165 @@
+    /**
+    Represents a panel holding the step description
+
+    @class StepDescription
+    @extends FadableItem
+    @@initializer
+    **/
+    var StepDescription = jazz.Class(function() {
+        this.nextButton = StepDescriptionNextButton.build();
+    }).extending(FadableItem).singleton;
+
+    /**
+    The step description text content
+
+    @@field text
+    @type String
+    **/
+    StepDescription.field("text", "");
+
+    /**
+    The title text for the step description panel
+
+    @@field title
+    @type String
+    **/
+    StepDescription.field("title", "");
+
+    /**
+    An object holding dimension information for the Step Description panel
+
+    @@field dimension
+    @type Object
+    **/
+    StepDescription.field("dimension", {});
+
+    /**
+    An object holding positioning information for the Step Description panel
+
+    @@field position
+    @type Object
+    **/
+    StepDescription.field("position", {});
+
+    /**
+    An object representing the next button for a step description panel 
+
+    @@field nextButton
+    @type Object
+    **/
+    StepDescription.field("nextButton");
+
+    /**
+    Sets the text for the step description panel
+
+    @method setText
+    @param {String} text                                  The text for the step description panel
+    **/
+    StepDescription.method("setText", function(text) {
+        this.text = text;
+        this.$el.find(".sideshow-step-text").text(text);
+    });
+
+    /**
+    Sets the HTML content for the step description panel
+
+    @method setHTML
+    @param {String} text                                  The HTML content for step description panel
+    **/
+    StepDescription.method("setHTML", function(text) {
+        this.text = text;
+        this.$el.find(".sideshow-step-text").html(text);
+    });
+
+    /**
+    Sets the title for the step description panel
+
+    @method setTitle
+    @param {String} title                                 The text for the step description panel
+    **/
+    StepDescription.method("setTitle", function(title) {
+        this.title = title;
+        this.$el.find("h2:first").text(title);
+    });
+
+    /**
+    Sets the title for the step description panel
+
+    @method setStepPosition
+    @param {String} title                                 The text for the step description panel
+    **/
+    StepDescription.method("setStepPosition", function(stepPosition) {
+        this.stepPosition = stepPosition;
+        this.$el.find(".sideshow-step-position").text(stepPosition);
+    });
+
+    /**
+    Renders the step description panel
+
+    @method render
+    **/
+    StepDescription.method("render", function() {
+        this.$el = $("<div>")
+            .addClass("sideshow-step-description")
+            .addClass("sideshow-hidden")
+            .addClass("sideshow-invisible");
+
+        var stepPosition = $("<span>").addClass("sideshow-step-position");
+        this.$el.append(stepPosition);
+        if (currentWizard.showStepPosition === false) stepPosition.hide();
+
+        this.$el.append($("<h2>"));
+        this.$el.append($("<div>").addClass("sideshow-step-text"));
+        this.nextButton.render(this.$el);
+        this.nextButton.$el.click(function() {
+            currentWizard.next();
+        });
+        DetailsPanel.singleInstance.$el.append(this.$el);
+    });
+
+    /**
+    Shows the step description panel
+
+    @method show
+    **/
+    StepDescription.method("show", function(displayButKeepTransparent) {
+        this.callSuper("show", displayButKeepTransparent);
+        //this.positionate();
+    });
+
+    /**
+    Positionates the step description panel
+
+    @method positionate
+    **/
+    StepDescription.method("positionate", function() {
+        var dp = DetailsPanel.singleInstance;
+
+        if (dp.dimension.width >= 900)
+            this.dimension.width = 900;
+        else
+            this.dimension.width = dp.dimension.width * 0.9;
+
+        this.$el.css("width", this.dimension.width);
+
+        var paddingLeftRight = (parsePxValue(this.$el.css("padding-left")) + parsePxValue(this.$el.css("padding-right"))) / 2;
+        var paddingTopBottom = (parsePxValue(this.$el.css("padding-top")) + parsePxValue(this.$el.css("padding-bottom"))) / 2;
+
+        this.dimension.height = parsePxValue(this.$el.outerHeight());
+
+        //Checks if the description dimension overflow the available space in the details panel
+        if (this.dimension.height > dp.dimension.height || this.dimension.width < 400) {
+            this.dimension.width = $window.width() * 0.9;
+            this.$el.css("width", this.dimension.width);
+            this.dimension.height = parsePxValue(this.$el.outerHeight());
+
+            this.position.x = ($window.width() - this.dimension.width) / 2;
+            this.position.y = ($window.height() - this.dimension.height) / 2;
+        } else {
+            this.position.x = (dp.dimension.width - this.dimension.width) / 2;
+            this.position.y = (dp.dimension.height - this.dimension.height) / 2;
+        }
+
+        this.$el.css("left", this.position.x - paddingLeftRight);
+        this.$el.css("top", this.position.y - paddingTopBottom);
+    });

data/src/step/step_description_next_button.js

@@ -0,0 +1,55 @@
+	/**
+	Step next button 
+
+	@class StepDescriptionNextButton
+	@extends HidableItem
+	**/
+	var StepDescriptionNextButton = jazz.Class().extending(HidableItem);
+
+	/**
+	The text for the next button
+
+	@@field _text
+	@private
+	**/
+	StepDescriptionNextButton.field("_text");
+
+	/**
+	Disables the next button
+
+	@method disable
+	**/
+	StepDescriptionNextButton.method("disable", function() {
+	    this.$el.attr("disabled", "disabled");
+	});
+
+	/**
+	Enables the next button
+
+	@method enable
+	**/
+	StepDescriptionNextButton.method("enable", function() {
+	    this.$el.attr("disabled", null);
+	});
+
+	/**
+	Sets the text for the next button
+
+	@method setText
+	@param {String} text                                  The text for the next button
+	**/
+	StepDescriptionNextButton.method("setText", function(text) {
+	    this._text = text;
+	    this.$el.text(text);
+	});
+
+	/**
+	Renders the Next Button
+
+	@method render
+	@param {Object} $stepDescriptionEl                    The jQuery wrapped DOM element for the Step Description panel
+	**/
+	StepDescriptionNextButton.method("render", function($stepDescriptionEl) {
+	    this.$el = $("<button>").addClass("sideshow-next-step-button");
+	    this.callSuper("render", $stepDescriptionEl);
+	});