framous 0.3.2 → 0.3.3

data/CHANGELOG.mkdn

@@ -1,6 +1,12 @@
 Framous Changelog
 =================
 
+v0.3.3 [Jul 25, 2013]
+---------------------
+* manifest.rb : major updates
+* custom config.rb
+* new javascripts & stylesheets files
+
 v0.3.2 [Jul 23, 2013]
 ---------------------
 * typo & some changes here and there

data/stylesheets/framous/base/_base.scss

@@ -1,10 +1,12 @@
 /* ---------------------------------------------------------------------------
-	Base
+	Base Layout Style : Body, Header, Main, Footer
 */
 
 body {
 	@include pie-clearfix;
+	position: relative;
 	width: 100%;
+	background: $background-body-color;
 }
 
 .out-container {

data/stylesheets/framous/base/_typography.scss

@@ -1,5 +1,6 @@
-// ---------------------------------------------------------------------------
-// Typography
+/* ---------------------------------------------------------------------------
+	Typography
+*/
 
 body,div,dl,dt,dd,ul,ol,li,
 h1,h2,h3,h4,h5,h6,
@@ -12,8 +13,6 @@ pre,form,p,blockquote,th,td {
 
 body {
 	@include establish-baseline;
-	position: relative;
-	background: $background-body-color;
 	color: $body-font-color;
 	font-family: $body-font-family;
 	font-weight: $font-weight-normal;

data/templates/project/config.rb

@@ -0,0 +1,28 @@
+require 'framous'
+# Require any additional compass plugins here.
+
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false
+
+Sass::Script::Number.precision = 4
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

data/templates/project/index.html

@@ -38,6 +38,8 @@
 	</footer><!-- /footer -->
 
 	<!-- JS -->
+	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+	<script>window.jQuery || document.write('<script src="javascripts/vendor/jquery-1.10.1.min.js"><\/script>')</script>
 
 </body>
 </html>

data/templates/project/javascripts/plugins/framous.collapse.js

@@ -0,0 +1,336 @@
+/*
+ * Collapse plugin for jQuery
+ * --
+ * source: http://github.com/borderlab/framous
+ * site: 
+ *
+ * @author Thomas Hermant (http://hanami.be)
+ * Copyright 2013, Thomas Hermant
+ * Released under the MIT, BSD, and GPL Licenses.
+ */
+
+(function ( $ ) {
+
+    var is_touch = !!('ontouchstart' in window) || !!('onmsgesturechange' in window),
+        currentIndex = {},
+        btns=  {},
+        contents = {},
+        // add event depending of touch device or not
+        add_event = function(el, action)
+        {
+            if(is_touch)
+            {
+                var init_x, int_y, delta_x, delta_y;
+
+                el.on("touchstart.framous.collapse", function(e){
+                    init_x = (e && e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0].pageX) ? e.originalEvent.touches[0].pageX : 0;
+                    init_y = (e && e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0].pageX) ? e.originalEvent.touches[0].pageY : 0;
+                    delta_x = 0;
+                    delta_y = 0;
+                }); 
+
+                el.on("touchmove.framous.collapse", function(e){
+                    delta_x = e.originalEvent.touches[0].pageX - init_x;
+                    delta_y = e.originalEvent.touches[0].pageY - init_y;
+                });
+
+                el.on("touchend.framous.collapse", function(e){
+                    e.preventDefault();
+
+                    // tap event -> no scroll
+                    if(Math.abs(delta_x) < 2 && Math.abs(delta_y) < 2)
+                    {
+                        action(e);
+                    }
+                });
+            }
+            else
+            {
+                el.on("click.framous.collapse",function(e){
+                    action(e);  
+                });
+            }
+        };
+
+    var methods = {
+        init : function( options ) 
+        {
+            // default options
+            var settings = $.extend({
+                content: 'js-content',
+                active_btn_class: "is-active",
+                active_content_class: "is-visible",
+                accordeon: true,
+                circular: true,
+                open_indexes: [],
+                show_time : 400,
+                hide_time: 400,
+
+                // effect: slide, fade, show, custom
+                effect: "slide", 
+
+                // Custom Effect show - hide
+                custom_show : function(index, currentIndex, contents, onEnd, time){},
+                custom_hide : function(index, currentIndex, contents, onEnd, time){},
+
+                // event handler
+                before_show: null,
+                show: null,
+                before_hide: null,
+                hide: null,
+
+            }, options );
+
+            var selector = this.selector;         
+
+            // boutons
+            btns[selector] = this;
+
+            // contents
+            contents[selector] = $("." + settings.content);
+
+            // currentIndex : used when only one open
+            currentIndex[selector] = (settings.open_indexes.length == 1) ? settings.open_indexes[0] : null;
+
+            // disable accordeon mode if more than one index open
+            if(settings.open_indexes.length > 1)
+            {
+                settings.accordeon = false
+            }
+
+            // set default 
+            if(settings.allClose && settings.open_indexes.length == 0)
+            {
+                currentIndex[selector] = -1;
+            }
+
+            // Default effects functions
+            switch(settings.effect)
+            {
+                case "slide":
+                    settings.custom_show = function(index, currentIndex,contents, time , onEnd){
+                        contents.eq(index).slideDown(time, onEnd);
+                    }
+
+                    settings.custom_hide = function(index, currentIndex,contents, time, onEnd){
+                        contents.eq(index).slideUp(time, onEnd);
+                    }
+                break;
+
+                case "show":
+                    settings.custom_show = function(index, currentIndex,contents ,time, onEnd){
+                        contents.eq(index).show();
+                        onEnd();
+                    }
+
+                    settings.custom_hide = function(index, currentIndex,contents ,time, onEnd){
+                        contents.eq(index).hide();
+                        onEnd();
+                    }
+                break;
+                case "fade":
+                    settings.custom_show = function(index, currentIndex,contents ,time, onEnd){
+                        contents.eq(index).fadeIn(time, onEnd);
+                    }
+
+                    settings.custom_hide = function(index, currentIndex,contents ,time, onEnd){
+                        contents.eq(index).fadeOut(time, onEnd);
+                    }
+                break;
+            }
+
+            // show only indexes
+            if (settings.open_indexes.length > 0)
+            {
+                // hide all
+                if(settings.effect != "custom")
+                {
+                    contents[selector].hide();    
+                }
+
+                // open when in indexes
+                var l = settings.open_indexes.length;
+                for(var i = 0; i < l ; i++)
+                {
+                    var index = settings.open_indexes[i];
+                    btns[selector].eq(index).addClass(settings.active_btn_class)
+                    contents[selector].eq(index).addClass(settings.active_content_class).show();
+                }
+            }
+            // show all content
+            else
+            {
+                btns[selector].addClass(settings.active_btn_class)
+                contents[selector].addClass(settings.active_content_class)
+            }
+
+            // open content
+            var openContent = function(i)
+            {
+                if (i < 0) return;
+
+                if(settings.before_show != null)
+                {
+                    settings.before_show(i, currentIndex[selector], contents[selector]);
+                }
+
+                var onFinished = null;
+                if(settings.show != null)
+                {
+                    onFinished = function()
+                    {
+                        settings.show(i, currentIndex[selector], contents[selector]);
+                    }
+                }
+
+                var c = contents[selector].eq(i).addClass(settings.active_content_class);
+                settings.custom_show(i, currentIndex[selector], contents[selector],settings.show_time,onFinished);
+            };
+
+            // close content
+            var closeContent = function(i)
+            {
+                if (i < 0) return;
+
+                if(settings.before_hide != null)
+                {
+                    settings.before_hide(i, contents[selector]);
+                }
+
+                var onFinished = null;
+                if(settings.hide != null)
+                {
+                    onFinished = function()
+                    {
+                        settings.hide(i, contents[selector]);
+                    }
+                }
+
+                var c = contents[selector].eq(i).removeClass(settings.active_content_class)
+                settings.custom_hide(i, currentIndex[selector],contents[selector],settings.show_time,onFinished);
+
+                btns[selector].eq(i).removeClass(settings.active_btn_class);
+            };
+
+            // chaining
+            return this.each(function(index) {
+
+                // get the btn
+                var btn = $(this);
+
+                var event_btn_action = function(e)
+                {
+                    e.preventDefault();
+
+                    // toggle class is-open
+                    btn.toggleClass(settings.active_btn_class);
+
+                    // open content
+                    if(btn.hasClass(settings.active_btn_class))
+                    {
+                        openContent(index);
+
+                        // if accordeon, on open -> close the current content
+                        if(settings.accordeon && currentIndex[selector] != null)
+                        {
+                            // avoid open and directly close content
+                            if(currentIndex[selector] != index)
+                            {
+                                closeContent(currentIndex[selector]);
+                            }
+                            currentIndex[selector] = index;
+                        }
+                    }
+                    // close content
+                    else
+                    {
+                        closeContent(index);
+                    }
+                };
+
+                add_event(btn,event_btn_action);
+            });
+        },
+        next : function(circular)
+        {
+            if(circular == undefined)
+            {
+                circular = true
+            }
+            methods.nextSlide(this.selector, circular);
+        },
+        // Show next content
+        nextSlide : function(selector,circular) 
+        {
+            var nextIndex = currentIndex[selector];
+            if(++nextIndex >= contents[selector].length)
+            {
+                nextIndex = contents[selector].length - 1;
+                if(circular)
+                {
+                    nextIndex = 0;
+                }
+            }
+
+            if(nextIndex != currentIndex[selector])
+            {
+                var btn = btns[selector].eq(nextIndex);
+                btn.trigger((is_touch ? "touchstart.framous.collapse" : "click.framous.collapse"));
+                if (is_touch)
+                {
+                    btn.trigger("touchend.framous.collapse");
+                }
+            }
+        },
+        prev : function(circular)
+        {
+            if(circular == undefined)
+            {
+                circular = true
+            }
+            methods.prevSlide(this.selector, circular)
+        },
+        // Show previous content
+        prevSlide : function(selector,circular) 
+        {
+            var prevIndex = currentIndex[selector];
+            if(--prevIndex < 0)
+            {
+                prevIndex = 0;
+
+                if(circular)
+                {
+                    prevIndex = contents[selector].length - 1;
+                }
+            }
+            
+            if(prevIndex != currentIndex[selector])
+            {
+                var btn = btns[selector].eq(prevIndex);
+                btn.trigger((is_touch ? "touchstart.framous.collapse" : "click.framous.collapse"));
+                if (is_touch)
+                {
+                    btn.trigger("touchend.framous.collapse");
+                }
+            }
+        }
+    }
+
+    $.fn.collapse = function(methodOrOptions) 
+    {
+        if ( methods[methodOrOptions] ) 
+        {
+            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
+        }
+        else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) 
+        {
+            // Default to "init"
+            return methods.init.apply( this, arguments );
+        }
+        else 
+        {
+            $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
+        }    
+    };
+
+}( jQuery ));

data/templates/project/javascripts/plugins/framous.dropdown.js

@@ -0,0 +1,212 @@
+/*
+ * Dropdown plugin for jQuery
+ * --
+ * source: http://github.com/borderlab/framous
+ * site: 
+ *
+ * @author Thomas Hermant (http://hanami.be)
+ * Copyright 2013, Thomas Hermant
+ * Released under the MIT, BSD, and GPL Licenses.
+ */
+
+(function ( $ ) {
+
+	// global vars
+	var is_touch = !!('ontouchstart' in window) || !!('onmsgesturechange' in window),
+		dropdown_containers,
+		dropdowns,
+		all_dropdown_items,
+		body,
+		div_open = $('<div/>'),
+		current_dropdown_link,
+		add_event = function(el, action)
+		{
+			if(is_touch)
+			{
+				var init_x, int_y, delta_x, delta_y;
+
+				el.on("touchstart.framous.dropdown", function(e){
+					init_x = (e && e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0].pageX) ? e.originalEvent.touches[0].pageX : 0;
+                	init_y = (e && e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0].pageX) ? e.originalEvent.touches[0].pageY : 0;
+					delta_x = 0;
+					delta_y = 0;
+				});	
+
+				el.on("touchmove.framous.dropdown", function(e){
+					delta_x = e.originalEvent.touches[0].pageX - init_x;
+					delta_y = e.originalEvent.touches[0].pageY - init_y;
+				});
+
+				el.on("touchend.framous.dropdown", function(e){
+					e.preventDefault();
+
+					// tap event -> no scroll
+					if(Math.abs(delta_x) < 2 && Math.abs(delta_y) < 2)
+					{
+						action(e);
+					}
+				});
+			}
+			else
+			{
+				el.on("click.framous.dropdown",function(e){
+					action(e);	
+				});
+			}
+		};
+
+
+	var methods = {
+
+		init : function( options ) {
+			
+			// default options
+			var settings = $.extend({
+				z_index: 1,
+				open_class: "is-open",
+				active_class: "is-active",
+				dropdown_class: "js-menu-dropdown",
+				dropdown_link: "js-dropdown-link",
+				active_dropdown_class: "is-visible",
+				dropdown_item_class: "js-menu-dropdown-item",
+				active_dropdown_item_class: "is-active",
+
+			}, options );
+
+			dropdown_containers = this;
+			dropdowns = dropdown_containers.find("." + settings.dropdown_class);
+			all_dropdown_items = dropdowns.find("." + settings.dropdown_item_class);
+			body = $("body");
+			div_open.css({position:"fixed",zIndex:settings.z_index - 1,left:0,right:0,top:0,bottom:0,background:"rgba(0,0,0,0)"});
+
+			var close_dropdowns = function()
+			{
+				// close all dropdown
+				dropdown_containers.removeClass(settings.open_class);
+				dropdowns.removeClass(settings.active_dropdown_class);
+			};
+
+			var active_dropdown_container = function()
+			{
+				dropdown_containers.removeClass(settings.active_class);
+				if(dropdown_containers.find("." + settings.active_dropdown_item_class).length != 0)
+				{
+					dropdown_containers.each(function(i){
+						var dd_c = $(this);
+
+						if(dd_c.find("." + settings.active_dropdown_item_class).length > 0)
+						{
+							dd_c.addClass(settings.active_class);
+						}
+					});
+				}
+			};
+
+			// chaining 
+			return this.each(function(index){
+				var dropdown_container = $(this);
+				var dropdown_link = dropdown_container.find("." + settings.dropdown_link);
+				var dropdown = dropdowns.eq(index);
+				var dropdown_items = dropdown.find("." + settings.dropdown_item_class);
+				
+				var dropdown_container_action_event = function(e)
+				{
+					current_dropdown_link = dropdown_link;
+
+					// check if already displayed
+					var is_open= dropdown_container.hasClass(settings.open_class);
+					div_open.remove();
+
+					close_dropdowns();
+
+					// deactive all container
+					dropdown_containers.removeClass(settings.active_class);
+					dropdown_container.addClass(settings.active_class);
+
+					// if not already displayed -> display
+					if(!is_open)
+					{
+						// div open
+						if (is_touch)
+						{
+							body.append(div_open);
+							var div_open_action_event = function(e){
+								close_dropdowns();
+								div_open.remove();
+								active_dropdown_container();
+							};
+							add_event(div_open,div_open_action_event);	
+						}
+						else
+						{
+							// create blur event (call after mousedown and before click)
+							dropdown_link.on("blur.framous.dropdown", function(e){
+
+								if (current_dropdown_link == dropdown_link)
+								{
+									close_dropdowns();	
+									active_dropdown_container();
+								}
+								// kill blur event
+								dropdown_link.off("blur.framous.dropdown");
+							});
+
+						}
+
+						dropdown_container.addClass(settings.open_class);
+						setInterval(function(){dropdown.addClass(settings.active_dropdown_class)},0);	
+					}
+					else
+					{
+						active_dropdown_container();
+					}
+				};
+				add_event(dropdown_container,dropdown_container_action_event);
+
+				// add action on dropdown_item
+				dropdown_items.each(function(i){
+					var dropdown_item = $(this);
+					var dropdown_item_action_event = function(e)
+					{
+						// active the item
+						all_dropdown_items.removeClass(settings.active_dropdown_item_class);
+						dropdown_item.addClass(settings.active_dropdown_item_class);
+					};
+					add_event(dropdown_item, dropdown_item_action_event);
+				});
+
+				// no link in url for dropdown_link
+				add_event(dropdown_link,function(e){
+					e.preventDefault();
+					dropdown_link.focus();
+				});
+
+				if (! is_touch)
+				{
+					// avoid the blur action -> mousedown is called before the blur event and before the click
+					dropdown_container.on("mousedown.framous.dropdown",function(){
+						current_dropdown_link = undefined;
+					});
+				}
+			});
+		}
+	}
+
+	$.fn.dropdown = function(methodOrOptions) 
+	{
+		if ( methods[methodOrOptions] ) 
+		{
+			return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
+		}
+		else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) 
+		{
+			// Default to "init"
+			return methods.init.apply( this, arguments );
+		}
+		else 
+		{
+			$.error('Method ' +  method + ' does not exist on jQuery.scrollspy');
+		}    
+	};
+
+}( jQuery ));