From f23d19923061d23a1cf7ca75de67f3441c6da4dc Mon Sep 17 00:00:00 2001
From: danielvincent <danielgrippi@gmail.com>
Date: Fri, 15 Oct 2010 16:40:16 -0700
Subject: [PATCH] added slider to getting started flow
---
app/views/layouts/application.html.haml | 1 +
app/views/users/getting_started.html.haml | 162 ++++++++--------
public/javascripts/easySlider1.7.js | 226 ++++++++++++++++++++++
public/javascripts/view.js | 10 +
public/stylesheets/sass/application.sass | 9 +
5 files changed, 327 insertions(+), 81 deletions(-)
create mode 100644 public/javascripts/easySlider1.7.js
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 0e21eb7de3..22a5a4f8a0 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -30,6 +30,7 @@
= javascript_include_tag 'fileuploader'
= javascript_include_tag 'view', 'image_picker', 'stream'
+ = javascript_include_tag 'easySlider1.7'
= render 'js/websocket_js'
diff --git a/app/views/users/getting_started.html.haml b/app/views/users/getting_started.html.haml
index 530c4038e5..b0ea13a361 100644
--- a/app/views/users/getting_started.html.haml
+++ b/app/views/users/getting_started.html.haml
@@ -10,84 +10,84 @@
.description
Do the stuff below to further complete some things.
-%h2
- %u
- Edit your profile
- âž”
- Define your aspects âž”
- Find your friends
-
-
-%h3
- Your Profile
- .description
- This info will be available to whomever you connect with on Diaspora.
-
-%h4
- Your name
- = text_field_tag :first_name, nil, :placeholder => "First name"
- = text_field_tag :last_name, nil, :placeholder => "Last name"
-
-%h4
- Your birthday
- %br
- = select_date
-
-%h4
- Your bio
- = text_area_tag :bio, nil, :placeholder => "Fill me out"
-
-%h4
- Your photo
- %br
- = file_field_tag :photo
-
-
-%br
-%br
-%br
-%h2
- Edit your profile âž”
- %u
- Define your aspects
- âž”
- Find your friends
-
-%h3
- Your aspects
- .description
- These will be blah blah blah blah and some stuff.
-
-%h4
- Aspect name
- = text_field_tag :aspect_name, nil, :placeholder => "New aspect"
-
-%br
-%br
-%br
-%h2
- Edit your profile âž”
- Define your aspects âž”
- %u
- Find your friends
-
-
-%h3
- Your friends
- .description
- Find your friends on Diaspora, Facebook, or send them an invite via email.
-
-.span-5
- %h4
- On Diaspora
- = text_field_tag :diaspora_handle, nil, :placeholder => "Diaspora handle"
-
-.span-5
- %h4
- On Facebook
- = text_field_tag :facebook_handle, nil, :placeholder => "Name"
-
-.span-5
- %h4
- Invite
- = text_field_tag :email, nil, :placeholder => "Email", :type => "email"
+#slider
+ %ul
+ %li
+ %h2
+ %u
+ Edit your profile
+ âž”
+ Define your aspects âž”
+ Find your friends
+
+
+ %h3
+ Your Profile
+ .description
+ This info will be available to whomever you connect with on Diaspora.
+
+ %h4
+ Your name
+ = text_field_tag :first_name, nil, :placeholder => "First name"
+ = text_field_tag :last_name, nil, :placeholder => "Last name"
+
+ %h4
+ Your birthday
+ %br
+ = select_date
+
+ %h4
+ Your bio
+ = text_area_tag :bio, nil, :placeholder => "Fill me out"
+
+ %h4
+ Your photo
+ %br
+ = file_field_tag :photo
+
+
+ %li
+ %h2
+ Edit your profile âž”
+ %u
+ Define your aspects
+ âž”
+ Find your friends
+
+ %h3
+ Your aspects
+ .description
+ These will be blah blah blah blah and some stuff.
+
+ %h4
+ Aspect name
+ = text_field_tag :aspect_name, nil, :placeholder => "New aspect"
+
+
+ %li
+ %h2
+ Edit your profile âž”
+ Define your aspects âž”
+ %u
+ Find your friends
+
+
+ %h3
+ Your friends
+ .description
+ Find your friends on Diaspora, Facebook, or send them an invite via email.
+
+ .span-5
+ %h4
+ On Diaspora
+ = text_field_tag :diaspora_handle, nil, :placeholder => "Diaspora handle"
+
+ .span-5
+ %h4
+ On Facebook
+ = text_field_tag :facebook_handle, nil, :placeholder => "Name"
+
+ .span-5
+ %h4
+ Invite
+ = text_field_tag :email, nil, :placeholder => "Email", :type => "email"
diff --git a/public/javascripts/easySlider1.7.js b/public/javascripts/easySlider1.7.js
new file mode 100644
index 0000000000..beaa2376e4
--- /dev/null
+++ b/public/javascripts/easySlider1.7.js
@@ -0,0 +1,226 @@
+/*
+ * Easy Slider 1.7 - jQuery plugin
+ * written by Alen Grakalic
+ * http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
+ *
+ * Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * Built for jQuery library
+ * http://jquery.com
+ *
+ */
+
+/*
+ * markup example for $("#slider").easySlider();
+ *
+ * <div id="slider">
+ * <ul>
+ * <li><img src="images/01.jpg" alt="" /></li>
+ * <li><img src="images/02.jpg" alt="" /></li>
+ * <li><img src="images/03.jpg" alt="" /></li>
+ * <li><img src="images/04.jpg" alt="" /></li>
+ * <li><img src="images/05.jpg" alt="" /></li>
+ * </ul>
+ * </div>
+ *
+ */
+
+(function($) {
+
+ $.fn.easySlider = function(options){
+
+ // default configuration properties
+ var defaults = {
+ prevId: 'prevBtn',
+ prevText: 'Previous',
+ nextId: 'nextBtn',
+ nextText: 'Next',
+ controlsShow: true,
+ controlsBefore: '',
+ controlsAfter: '',
+ controlsFade: true,
+ firstId: 'firstBtn',
+ firstText: 'First',
+ firstShow: false,
+ lastId: 'lastBtn',
+ lastText: 'Last',
+ lastShow: false,
+ vertical: false,
+ speed: 800,
+ auto: false,
+ pause: 2000,
+ continuous: false,
+ numeric: false,
+ numericId: 'controls'
+ };
+
+ var options = $.extend(defaults, options);
+
+ this.each(function() {
+ var obj = $(this);
+ var s = $("li", obj).length;
+ var w = $("li", obj).width();
+ var h = $("li", obj).height();
+ var clickable = true;
+ obj.width(w);
+ obj.height(h);
+ obj.css("overflow","hidden");
+ var ts = s-1;
+ var t = 0;
+ $("ul", obj).css('width',s*w);
+
+ if(options.continuous){
+ $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
+ $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
+ $("ul", obj).css('width',(s+1)*w);
+ };
+
+ if(!options.vertical) $("li", obj).css('float','left');
+
+ if(options.controlsShow){
+ var html = options.controlsBefore;
+ if(options.numeric){
+ html += '<ol id="'+ options.numericId +'"></ol>';
+ } else {
+ if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
+ html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
+ html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
+ if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
+ };
+
+ html += options.controlsAfter;
+ $(obj).after(html);
+ };
+
+ if(options.numeric){
+ for(var i=0;i<s;i++){
+ $(document.createElement("li"))
+ .attr('id',options.numericId + (i+1))
+ .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
+ .appendTo($("#"+ options.numericId))
+ .click(function(){
+ animate($("a",$(this)).attr('rel'),true);
+ });
+ };
+ } else {
+ $("a","#"+options.nextId).click(function(){
+ animate("next",true);
+ });
+ $("a","#"+options.prevId).click(function(){
+ animate("prev",true);
+ });
+ $("a","#"+options.firstId).click(function(){
+ animate("first",true);
+ });
+ $("a","#"+options.lastId).click(function(){
+ animate("last",true);
+ });
+ };
+
+ function setCurrent(i){
+ i = parseInt(i)+1;
+ $("li", "#" + options.numericId).removeClass("current");
+ $("li#" + options.numericId + i).addClass("current");
+ };
+
+ function adjust(){
+ if(t>ts) t=0;
+ if(t<0) t=ts;
+ if(!options.vertical) {
+ $("ul",obj).css("margin-left",(t*w*-1));
+ } else {
+ $("ul",obj).css("margin-left",(t*h*-1));
+ }
+ clickable = true;
+ if(options.numeric) setCurrent(t);
+ };
+
+ function animate(dir,clicked){
+ if (clickable){
+ clickable = false;
+ var ot = t;
+ switch(dir){
+ case "next":
+ t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
+ break;
+ case "prev":
+ t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
+ break;
+ case "first":
+ t = 0;
+ break;
+ case "last":
+ t = ts;
+ break;
+ default:
+ t = dir;
+ break;
+ };
+ var diff = Math.abs(ot-t);
+ var speed = diff*options.speed;
+ if(!options.vertical) {
+ p = (t*w*-1);
+ $("ul",obj).animate(
+ { marginLeft: p },
+ { queue:false, duration:speed, complete:adjust }
+ );
+ } else {
+ p = (t*h*-1);
+ $("ul",obj).animate(
+ { marginTop: p },
+ { queue:false, duration:speed, complete:adjust }
+ );
+ };
+
+ if(!options.continuous && options.controlsFade){
+ if(t==ts){
+ $("a","#"+options.nextId).hide();
+ $("a","#"+options.lastId).hide();
+ } else {
+ $("a","#"+options.nextId).show();
+ $("a","#"+options.lastId).show();
+ };
+ if(t==0){
+ $("a","#"+options.prevId).hide();
+ $("a","#"+options.firstId).hide();
+ } else {
+ $("a","#"+options.prevId).show();
+ $("a","#"+options.firstId).show();
+ };
+ };
+
+ if(clicked) clearTimeout(timeout);
+ if(options.auto && dir=="next" && !clicked){;
+ timeout = setTimeout(function(){
+ animate("next",false);
+ },diff*options.speed+options.pause);
+ };
+
+ };
+
+ };
+ // init
+ var timeout;
+ if(options.auto){;
+ timeout = setTimeout(function(){
+ animate("next",false);
+ },options.pause);
+ };
+
+ if(options.numeric) setCurrent(0);
+
+ if(!options.continuous && options.controlsFade){
+ $("a","#"+options.prevId).hide();
+ $("a","#"+options.firstId).hide();
+ };
+
+ });
+
+ };
+
+})(jQuery);
+
+
+
diff --git a/public/javascripts/view.js b/public/javascripts/view.js
index 26b3fea551..f8b2fb8b25 100644
--- a/public/javascripts/view.js
+++ b/public/javascripts/view.js
@@ -73,6 +73,9 @@ $(document).ready(function(){
$(".reshare_box").hide();
};
});
+
+ $("#slider").easySlider({speed:400, numeric:true});
+
$("img", "#left_pane").tipsy({live:true});
$(".add_aspect_button", "#aspect_nav").tipsy({gravity:'w'});
@@ -133,3 +136,10 @@ $(".make_profile_photo").live("click", function(){
});
});
+$(".getting_started_box").live("click",function(evt){
+ $(this).animate({
+ left: parseInt($(this).css('left'),30) == 0 ?
+ -$(this).outerWidth() :
+ 0
+ },function(evt){ $(this).css('left', '1000px')});
+});
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 1414e73ece..9ba66b8df8 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -1243,3 +1243,12 @@ ul#breadcrumb
&:last-child
&:after
:content ''
+
+#slider ul, #slider li
+ :margin 0
+ :padding 0
+ :list-style none
+
+#slider, #slider li
+ :width 1000px
+ :overflow hidden
--
GitLab