From 1bc637d83f6f2cf547df9a47cba856516c559691 Mon Sep 17 00:00:00 2001 From: danielgrippi Date: Fri, 21 Oct 2011 17:07:58 -0700 Subject: [PATCH] new getting started works, needs more love --- app/controllers/tag_followings_controller.rb | 2 +- app/views/aspects/_aspect_stream.haml | 2 + app/views/aspects/index.html.haml | 13 + app/views/contacts/index.html.haml | 1 - app/views/invitations/new.html.haml | 6 - app/views/layouts/application.html.haml | 2 - app/views/shared/_publisher.html.haml | 48 +-- app/views/users/getting_started.haml | 29 -- config/assets.yml | 7 +- config/locales/diaspora/en.yml | 4 +- lib/stream/aspect.rb | 27 -- lib/stream/multi.rb | 27 ++ public/javascripts/pages/contacts-index.js | 2 + public/javascripts/pages/invitations-edit.js | 3 +- public/javascripts/pages/invitations-new.js | 12 + public/javascripts/pages/multis-index.js | 3 +- .../pages/users-getting-started.js | 29 +- .../vendor/bootstrap/bootstrap-popover.js | 77 +++++ .../vendor/bootstrap/bootstrap-twipsy.js | 303 ++++++++++++++++++ public/javascripts/view.js | 10 +- public/javascripts/widgets/comment.js | 2 +- public/javascripts/widgets/stream-element.js | 6 +- public/stylesheets/sass/application.sass | 16 + 23 files changed, 523 insertions(+), 108 deletions(-) create mode 100644 public/javascripts/pages/invitations-new.js create mode 100644 public/javascripts/vendor/bootstrap/bootstrap-popover.js create mode 100644 public/javascripts/vendor/bootstrap/bootstrap-twipsy.js diff --git a/app/controllers/tag_followings_controller.rb b/app/controllers/tag_followings_controller.rb index ec9c761b8..589b68079 100644 --- a/app/controllers/tag_followings_controller.rb +++ b/app/controllers/tag_followings_controller.rb @@ -61,6 +61,6 @@ class TagFollowingsController < ApplicationController @tag_following = current_user.tag_followings.create(:tag_id => @tag.id) end - redirect_to aspects_path + redirect_to multi_path end end diff --git a/app/views/aspects/_aspect_stream.haml b/app/views/aspects/_aspect_stream.haml index 0931b5bdc..58a284934 100644 --- a/app/views/aspects/_aspect_stream.haml +++ b/app/views/aspects/_aspect_stream.haml @@ -16,6 +16,8 @@ = render 'shared/publisher', :selected_aspects => stream.aspects, :aspect_ids => stream.aspect_ids, :for_all_aspects => stream.for_all_aspects?, :aspect => stream.aspect = render 'aspects/no_posts_message' +#gs-shim{:title => "3. Stay Updated", 'data-content' => "Your main stream is populated with all of your contacts, tags you follow, and curated members from the community."} + #main_stream.stream{:data => {:guids => stream.aspect_ids.join(','), :time_for_scroll => time_for_scroll(stream.ajax_stream?, stream)}} - if !stream.ajax_stream? && stream.posts.length > 0 = render 'shared/stream', :posts => stream.posts diff --git a/app/views/aspects/index.html.haml b/app/views/aspects/index.html.haml index 70f65e198..58f5761e0 100644 --- a/app/views/aspects/index.html.haml +++ b/app/views/aspects/index.html.haml @@ -6,6 +6,19 @@ - content_for :head do = include_javascripts :home +#welcome-to-diaspora + .container + %h1 + Welcome to Diaspora, #{current_user.first_name}! + + %h3 + This is your stream, with some explainer text +%br +%br +%br +%br +%br + .span-5.leftNavBar #home_user_badge = owner_image_link diff --git a/app/views/contacts/index.html.haml b/app/views/contacts/index.html.haml index 4f67435e0..765b13fe2 100644 --- a/app/views/contacts/index.html.haml +++ b/app/views/contacts/index.html.haml @@ -24,7 +24,6 @@ = link_to t('.start_a_conversation'), new_conversation_path(:aspect_id => @aspect.id, :name => @aspect.name), conv_opts - if @contacts.size > suggested_limit - = javascript_tag "$('.conversation_button').tipsy({trigger: 'hover', gravity: 'n'});" = link_to t('.add_to_aspect', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox" - if @contacts.size > 0 diff --git a/app/views/invitations/new.html.haml b/app/views/invitations/new.html.haml index e1dc190c8..82abcf855 100644 --- a/app/views/invitations/new.html.haml +++ b/app/views/invitations/new.html.haml @@ -1,9 +1,3 @@ -:javascript - $(function() { - $('#new_user [title]').tipsy({trigger: 'focus', gravity: ($('html').attr('dir') == 'rtl') ? 'e' : 'w'}); - $("#user_email").focus(); - }); - .span-15.last .span-3 = image_tag 'icons/monotone_email_letter_round.png', :height => "128px", :width => "128px" diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 1f2ee2f35..a5414a608 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -52,7 +52,6 @@ = javascript_include_tag 'web-socket-receiver' = render 'js/websocket_js' - = yield(:head) -unless Rails.env == "production" @@ -84,7 +83,6 @@ piwikTracker.enableLinkTracking(); } catch( err ) {} - - if @person %link{:rel => "alternate", :href => "#{@person.public_url}.atom", :type => "application/atom+xml", :title => "#{t('.public_feed', :name => @person.name)}"} diff --git a/app/views/shared/_publisher.html.haml b/app/views/shared/_publisher.html.haml index 900a7b1e8..c362aaba7 100644 --- a/app/views/shared/_publisher.html.haml +++ b/app/views/shared/_publisher.html.haml @@ -4,35 +4,47 @@ :javascript $(function() { - $(".question_mark").tipsy({trigger: 'hover', gravity: 'n'}); - $(".service_icon").tipsy({trigger: 'hover', gravity: 'n'}); - $(".public_icon").tipsy({trigger: 'hover', gravity: 'n'}); + $(".question_mark").twipsy({trigger: 'hover', placement: 'bottom'}); + $(".service_icon").twipsy({trigger: 'hover', placement: 'bottom'}); + $(".public_icon").twipsy({trigger: 'hover', placement: 'bottom'}); }); - if publisher_open :javascript - $(document).ready(function() - { + $(document).ready(function() { Publisher.open(); - }); + }); -if publisher_explain :javascript $(document).ready(function() { - $("#publisher .dropdown").tipsy({trigger: 'manual', gravity: 'n'}); - $("#publisher .dropdown").tipsy("show"); - $("#publisher .dropdown").bind("click", function(){$(this).tipsy("hide")}); + $("#publisher .dropdown").popover({trigger: 'manual', offset: 10, placement:'below'}); + $("#publisher .dropdown").bind("click", function(){$(this).popover("hide")}); - $("#publisher #status_message_fake_text").tipsy({trigger: 'manual', gravity: 'e', id: "first_message_explain"}); - $("#publisher #status_message_fake_text").tipsy("show"); - $("#publisher #status_message_fake_text").bind("click", function(){$(this).tipsy("hide")}); + $("#publisher #status_message_fake_text").popover({trigger: 'manual', placement: 'right', offset: 30, id: "first_message_explain"}); + $("#publisher #status_message_fake_text").bind("click", function(){$(this).popover("hide")}); + + $("#gs-shim").popover({trigger: 'manual', placement: 'left', offset: -5}); + $("#gs-shim").bind("click", function(){$(this).popover("hide")}); + + setTimeout(function(){ + $("#publisher #status_message_fake_text").popover("show"); + }, 600); + + setTimeout(function(){ + $("#publisher .dropdown").popover("show"); + }, 1000); + + setTimeout(function(){ + $("#gs-shim").popover("show"); + }, 1400); $("#publisher .button.creation").bind("click", function(){ - $("#publisher .dropdown").tipsy("hide"); - $("#publisher #status_message_fake_text").tipsy("hide"); - }); + $("#publisher .dropdown").popover("hide"); + $("#publisher #status_message_fake_text").popover("hide"); }); + }); #publisher.closed{:class => ((aspect == :profile)? 'mention_popup' : nil )} .content_creation @@ -43,7 +55,8 @@ #publisher_textarea_wrapper = link_to( image_tag('deletelabel.png'), "#", :id => "hide_publisher", :title => t('.discard_post')) %ul#photodropzone - = status.text_area :fake_text, :rows => 2, :value => h(publisher_prefill_text), :tabindex => 1, :placeholder => t('.whats_on_your_mind'), :title => t('shared.public_explain.new_user_welcome_message') + = status.text_area :fake_text, :rows => 2, :value => h(publisher_prefill_text), :tabindex => 1, :placeholder => t('.whats_on_your_mind'), + :title => "1. Share", 'data-content' => t('shared.public_explain.new_user_welcome_message') = status.hidden_field :text, :value => '', :class => 'clear_on_submit' #file-upload{:title => t('.upload_photos')} @@ -66,9 +79,8 @@ = image_tag "social_media_logos/#{service.provider}-16x16.png", :title => service.provider.titleize, :class => "service_icon dim", :id =>"#{service.provider}", :maxchar => "#{service.class::MAX_CHARACTERS}" = link_to (image_tag "icons/monotone_wrench_settings.png"), "#question_mark_pane", :class => 'question_mark', :rel => 'facebox', :title => t('shared.public_explain.manage') - // NOTE(dropdown special casing to DRY up -- taken from the aspect_dropdown partial) - .dropdown{:class => "hang_right", :title => t('shared.public_explain.visibility_dropdown')} + .dropdown{:class => "hang_right", :title => '2. Control your Audience', 'data-content'=> t('shared.public_explain.visibility_dropdown')} .button.toggle.publisher - if publisher_public = t('public') diff --git a/app/views/users/getting_started.haml b/app/views/users/getting_started.haml index 8a7d66639..15ea3b96b 100644 --- a/app/views/users/getting_started.haml +++ b/app/views/users/getting_started.haml @@ -5,35 +5,6 @@ - content_for :head do = include_javascripts :profile - :javascript - $(document).ready(function () { - var data = $.parseJSON( '#{@tags_array.to_json.gsub("'", "\\\\'")}' ), - autocompleteInput = $("#follow_tags"); - - autocompleteInput.autoSuggest("#{tags_path}", { - selectedItemProp: "name", - searchObjProps: "name", - asHtmlID: "tags", - neverSubmit: true, - retriveLimit: 10, - selectionLimit: false, - minChars: 2, - keyDelay: 200, - startText: "", - emptyText: "#{t('no_results')}", - preFill: data - }); - - autocompleteInput.bind('keydown', function(evt){ - if(evt.keyCode == 13 || evt.keyCode == 9 || evt.keyCode == 32){ - evt.preventDefault(); - if( $('li.as-result-item.active').length == 0 ){ - $('li.as-result-item').first().click(); - } - } - }); - }); - %br %section#hello-there diff --git a/config/assets.yml b/config/assets.yml index 7c6481331..7c3a66341 100644 --- a/config/assets.yml +++ b/config/assets.yml @@ -12,7 +12,6 @@ javascripts: main: - public/javascripts/rails.validations.js - public/javascripts/rails.js - - public/javascripts/vendor/jquery.tipsy.js - public/javascripts/vendor/jquery.hotkeys.js - public/javascripts/vendor/jquery.autoresize.min.js - public/javascripts/vendor/jquery-ui-1.8.9.custom.min.js @@ -40,6 +39,10 @@ javascripts: - public/javascripts/contact-edit.js - public/javascripts/contact-list.js - public/javascripts/aspect-sorting.js + + - public/javascripts/vendor/bootstrap/bootstrap-twipsy.js + - public/javascripts/vendor/bootstrap/bootstrap-popover.js + login: - public/javascripts/login.js mobile: @@ -79,8 +82,8 @@ stylesheets: - public/stylesheets/hovercard.css - public/stylesheets/vendor/facebox.css - public/stylesheets/vendor/fileuploader.css - - public/stylesheets/vendor/tipsy.css - public/stylesheets/vendor/autoSuggest.css + - public/stylesheets/interim-bootstrap.css rtl: - public/stylesheets/rtl.css diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml index 0847eae08..75c25ecfb 100644 --- a/config/locales/diaspora/en.yml +++ b/config/locales/diaspora/en.yml @@ -753,8 +753,8 @@ en: reshare: reshare: "Reshare" public_explain: - new_user_welcome_message: "Welcome aboard! If you want, this can be your first message." - visibility_dropdown: "Use this dropdown to change visibility of your post" + new_user_welcome_message: "Use #hashtags to classify you posts and find people who share your interests. Call out awesome people with @Mentions" + visibility_dropdown: "Use this dropdown to change visibility of your post. (We suggest you make this one public)" title: "Set up connected services" outside: "Public messages will be available for others outside of Diaspora to see." logged_in: "logged in to %{service}" diff --git a/lib/stream/aspect.rb b/lib/stream/aspect.rb index b5f647c7e..0cf4ce668 100644 --- a/lib/stream/aspect.rb +++ b/lib/stream/aspect.rb @@ -126,31 +126,4 @@ class Stream::Aspect < Stream::Base def can_comment?(post) true end - - def publisher - if welcome? - @publisher ||= Publisher.new(self.user, :open => true, :prefill => publisher_prefill, - :public => true) - else - super - end - end - - private - # Generates the prefill for the publisher - # - # @return [String] - def publisher_prefill - prefill = I18n.t("shared.publisher.new_user_prefill.hello", :new_user_tag => "newhere") - if self.user.followed_tags.size > 0 - tag_string = self.user.followed_tags.map{|t| "##{t.name}"}.to_sentence - prefill << I18n.t("shared.publisher.new_user_prefill.i_like", :tags => tag_string) - end - - prefill - end - - def welcome? - self.user.getting_started - end end diff --git a/lib/stream/multi.rb b/lib/stream/multi.rb index a74b57fec..176a27109 100644 --- a/lib/stream/multi.rb +++ b/lib/stream/multi.rb @@ -36,7 +36,34 @@ class Stream::Multi < Stream::Base end.compact end + # @return [Publisher] + def publisher + if welcome? + @publisher ||= Publisher.new(self.user, :open => true, :prefill => publisher_prefill, + :public => true) + else + super + end + end + private + # Generates the prefill for the publisher + # + # @return [String] + def publisher_prefill + prefill = I18n.t("shared.publisher.new_user_prefill.hello", :new_user_tag => "newhere") + if self.user.followed_tags.size > 0 + tag_string = self.user.followed_tags.map{|t| "##{t.name}"}.to_sentence + prefill << I18n.t("shared.publisher.new_user_prefill.i_like", :tags => tag_string) + end + + prefill + end + + # @return [Boolean] + def welcome? + self.user.getting_started + end # @return [Array] def streams_included diff --git a/public/javascripts/pages/contacts-index.js b/public/javascripts/pages/contacts-index.js index f374ea18e..e036172a3 100644 --- a/public/javascripts/pages/contacts-index.js +++ b/public/javascripts/pages/contacts-index.js @@ -3,5 +3,7 @@ Diaspora.Pages.ContactsIndex = function() { this.subscribe("page/ready", function(evt, document) { self.infiniteScroll = self.instantiate("InfiniteScroll"); + + $('.conversation_button').twipsy({position: 'below'}); }); }; diff --git a/public/javascripts/pages/invitations-edit.js b/public/javascripts/pages/invitations-edit.js index 79649ac7b..358e6f3f8 100644 --- a/public/javascripts/pages/invitations-edit.js +++ b/public/javascripts/pages/invitations-edit.js @@ -2,7 +2,6 @@ Diaspora.Pages.InvitationsEdit = function() { var self = this; this.subscribe("page/ready", function(evt, body) { - $('#user_username').tipsy({trigger: 'select', gravity: 'w'}); - + $('#user_username').twipsy({trigger: 'select', placement: 'right'}); }); }; diff --git a/public/javascripts/pages/invitations-new.js b/public/javascripts/pages/invitations-new.js new file mode 100644 index 000000000..4507695f8 --- /dev/null +++ b/public/javascripts/pages/invitations-new.js @@ -0,0 +1,12 @@ +Diaspora.Pages.InvitationsNew = function() { + var self = this; + + this.subscribe("page/ready", function(evt, document) { + var rtl = $('html').attr('dir') == 'rtl', + position = rtl ? 'left' : 'right'; + + $('#new_user [title]').twipsy({trigger: 'focus', placement: position}); + $('#user_email').focus(); + }); +}; + diff --git a/public/javascripts/pages/multis-index.js b/public/javascripts/pages/multis-index.js index b583f5668..20dd08191 100644 --- a/public/javascripts/pages/multis-index.js +++ b/public/javascripts/pages/multis-index.js @@ -6,7 +6,6 @@ Diaspora.Pages.MultisIndex = function() { self.stream = self.instantiate("Stream", document.find("#aspect_stream_container")); self.infiniteScroll = self.instantiate("InfiniteScroll"); - - $('.indicator').tipsy({fade: true, live:true}); + $('.indicator').twipsy({placement:'below', live:true}); }); }; diff --git a/public/javascripts/pages/users-getting-started.js b/public/javascripts/pages/users-getting-started.js index 08fada146..b3d08b3d0 100644 --- a/public/javascripts/pages/users-getting-started.js +++ b/public/javascripts/pages/users-getting-started.js @@ -4,7 +4,7 @@ Diaspora.Pages.UsersGettingStarted = function() { this.subscribe("page/ready", function(evt, body) { self.peopleSearch = self.instantiate("Search", body.find("form.people.search_form")); self.tagSearch = self.instantiate("Search", body.find("form.tag_input.search_form")); - + $('#edit_profile').bind('ajax:success', function(evt, data, status, xhr){ $('#form_spinner').addClass("hidden"); $('.profile .saved').show(); @@ -17,8 +17,6 @@ Diaspora.Pages.UsersGettingStarted = function() { firstNameField.val(firstNameField.data("cachedValue")); }); - - $("#profile_first_name").bind("change", function(){ $(this).data("cachedValue", $(this).val()); $('#edit_profile').submit(); @@ -39,5 +37,30 @@ Diaspora.Pages.UsersGettingStarted = function() { $('#awesome_spinner').removeClass("hidden"); $('.tag_input').submit(); }); + + /* ------ */ + var autocompleteInput = $("#follow_tags"); + + autocompleteInput.autoSuggest("/tags", { + selectedItemProp: "name", + searchObjProps: "name", + asHtmlID: "tags", + neverSubmit: true, + retriveLimit: 10, + selectionLimit: false, + minChars: 2, + keyDelay: 200, + startText: "", + emptyText: "no_results" + }); + + autocompleteInput.bind('keydown', function(evt){ + if(evt.keyCode == 13 || evt.keyCode == 9 || evt.keyCode == 32){ + evt.preventDefault(); + if( $('li.as-result-item.active').length == 0 ){ + $('li.as-result-item').first().click(); + } + } + }); }); }; diff --git a/public/javascripts/vendor/bootstrap/bootstrap-popover.js b/public/javascripts/vendor/bootstrap/bootstrap-popover.js new file mode 100644 index 000000000..1cf4b8917 --- /dev/null +++ b/public/javascripts/vendor/bootstrap/bootstrap-popover.js @@ -0,0 +1,77 @@ +/* =========================================================== + * bootstrap-popover.js v1.3.0 + * http://twitter.github.com/bootstrap/javascript.html#popover + * =========================================================== + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * =========================================================== */ + + +!function( $ ) { + + var Popover = function ( element, options ) { + this.$element = $(element) + this.options = options + this.enabled = true + this.fixTitle() + } + + /* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js + ========================================= */ + + Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, { + + setContent: function () { + var $tip = this.tip() + $tip.find('.title')[this.options.html ? 'html' : 'text'](this.getTitle()) + $tip.find('.content p')[this.options.html ? 'html' : 'text'](this.getContent()) + $tip[0].className = 'popover' + } + + , getContent: function () { + var content + , $e = this.$element + , o = this.options + + if (typeof this.options.content == 'string') { + content = $e.attr(o.content) + } else if (typeof this.options.content == 'function') { + content = this.options.content.call(this.$element[0]) + } + return content + } + + , tip: function() { + if (!this.$tip) { + this.$tip = $('
') + .html('

') + } + return this.$tip + } + + }) + + + /* POPOVER PLUGIN DEFINITION + * ======================= */ + + $.fn.popover = function (options) { + if (typeof options == 'object') options = $.extend({}, $.fn.popover.defaults, options) + $.fn.twipsy.initWith.call(this, options, Popover, 'popover') + return this + } + + $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { content: 'data-content', placement: 'right'}) + +}( window.jQuery || window.ender ); \ No newline at end of file diff --git a/public/javascripts/vendor/bootstrap/bootstrap-twipsy.js b/public/javascripts/vendor/bootstrap/bootstrap-twipsy.js new file mode 100644 index 000000000..97cf47f46 --- /dev/null +++ b/public/javascripts/vendor/bootstrap/bootstrap-twipsy.js @@ -0,0 +1,303 @@ +/* ========================================================== + * bootstrap-twipsy.js v1.3.0 + * http://twitter.github.com/bootstrap/javascript.html#twipsy + * Adapted from the original jQuery.tipsy by Jason Frame + * ========================================================== + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function( $ ) { + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + var transitionEnd + + $(document).ready(function () { + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + }) + + + /* TWIPSY PUBLIC CLASS DEFINITION + * ============================== */ + + var Twipsy = function ( element, options ) { + this.$element = $(element) + this.options = options + this.enabled = true + this.fixTitle() + } + + Twipsy.prototype = { + + show: function() { + var pos + , actualWidth + , actualHeight + , placement + , $tip + , tp + + if (this.getTitle() && this.enabled) { + $tip = this.tip() + this.setContent() + + if (this.options.animate) { + $tip.addClass('fade') + } + + $tip + .remove() + .css({ top: 0, left: 0, display: 'block' }) + .prependTo(document.body) + + pos = $.extend({}, this.$element.offset(), { + width: this.$element[0].offsetWidth + , height: this.$element[0].offsetHeight + }) + + actualWidth = $tip[0].offsetWidth + actualHeight = $tip[0].offsetHeight + + placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ]) + + switch (placement) { + case 'below': + tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'above': + tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'left': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset} + break + case 'right': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset} + break + } + + $tip + .css(tp) + .addClass(placement) + .addClass('in') + } + } + + , setContent: function () { + var $tip = this.tip() + $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle()) + $tip[0].className = 'twipsy' + } + + , hide: function() { + var that = this + , $tip = this.tip() + + $tip.removeClass('in') + + function removeElement () { + $tip.remove() + } + + $.support.transition && this.$tip.hasClass('fade') ? + $tip.bind(transitionEnd, removeElement) : + removeElement() + } + + , fixTitle: function() { + var $e = this.$element + if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { + $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title') + } + } + + , getTitle: function() { + var title + , $e = this.$element + , o = this.options + + this.fixTitle() + + if (typeof o.title == 'string') { + title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title) + } else if (typeof o.title == 'function') { + title = o.title.call($e[0]) + } + + title = ('' + title).replace(/(^\s*|\s*$)/, "") + + return title || o.fallback + } + + , tip: function() { + if (!this.$tip) { + this.$tip = $('
').html('
') + } + return this.$tip + } + + , validate: function() { + if (!this.$element[0].parentNode) { + this.hide() + this.$element = null + this.options = null + } + } + + , enable: function() { + this.enabled = true + } + + , disable: function() { + this.enabled = false + } + + , toggleEnabled: function() { + this.enabled = !this.enabled + } + + } + + + /* TWIPSY PRIVATE METHODS + * ====================== */ + + function maybeCall ( thing, ctx, args ) { + return typeof thing == 'function' ? thing.apply(ctx, args) : thing + } + + /* TWIPSY PLUGIN DEFINITION + * ======================== */ + + $.fn.twipsy = function (options) { + $.fn.twipsy.initWith.call(this, options, Twipsy, 'twipsy') + return this + } + + $.fn.twipsy.initWith = function (options, Constructor, name) { + var twipsy + , binder + , eventIn + , eventOut + + if (options === true) { + return this.data(name) + } else if (typeof options == 'string') { + twipsy = this.data(name) + if (twipsy) { + twipsy[options]() + } + return this + } + + options = $.extend({}, $.fn[name].defaults, options) + + function get(ele) { + var twipsy = $.data(ele, name) + + if (!twipsy) { + twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options)) + $.data(ele, name, twipsy) + } + + return twipsy + } + + function enter() { + var twipsy = get(this) + twipsy.hoverState = 'in' + + if (options.delayIn == 0) { + twipsy.show() + } else { + twipsy.fixTitle() + setTimeout(function() { + if (twipsy.hoverState == 'in') { + twipsy.show() + } + }, options.delayIn) + } + } + + function leave() { + var twipsy = get(this) + twipsy.hoverState = 'out' + if (options.delayOut == 0) { + twipsy.hide() + } else { + setTimeout(function() { + if (twipsy.hoverState == 'out') { + twipsy.hide() + } + }, options.delayOut) + } + } + + if (!options.live) { + this.each(function() { + get(this) + }) + } + + if (options.trigger != 'manual') { + binder = options.live ? 'live' : 'bind' + eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus' + eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur' + this[binder](eventIn, enter)[binder](eventOut, leave) + } + + return this + } + + $.fn.twipsy.Twipsy = Twipsy + + $.fn.twipsy.defaults = { + animate: true + , delayIn: 0 + , delayOut: 0 + , fallback: '' + , placement: 'above' + , html: false + , live: false + , offset: 0 + , title: 'title' + , trigger: 'hover' + } + + $.fn.twipsy.elementOptions = function(ele, options) { + return $.metadata ? $.extend({}, options, $(ele).metadata()) : options + } + +}( window.jQuery || window.ender ); \ No newline at end of file diff --git a/public/javascripts/view.js b/public/javascripts/view.js index 873bbd0fb..d3abb441b 100644 --- a/public/javascripts/view.js +++ b/public/javascripts/view.js @@ -114,17 +114,9 @@ var View = { }, tooltips: { - public_badge: { - bind: function() { - $(".public_badge img").tipsy({ - live: true - }); - } - }, - conversation_participants: { bind: function() { - $(".conversation_participants img").tipsy({ + $(".conversation_participants img").twipsy({ live: true }); } diff --git a/public/javascripts/widgets/comment.js b/public/javascripts/widgets/comment.js index 554f46b68..0fa6f1501 100644 --- a/public/javascripts/widgets/comment.js +++ b/public/javascripts/widgets/comment.js @@ -12,7 +12,7 @@ }); self.deleteCommentLink.click(self.removeComment); - self.deleteCommentLink.tipsy({ trigger: "hover" }); + self.deleteCommentLink.twipsy({ trigger: "hover" }); // self.content.expander({ // slicePoint: 200, diff --git a/public/javascripts/widgets/stream-element.js b/public/javascripts/widgets/stream-element.js index fd15cfd22..3878e3beb 100644 --- a/public/javascripts/widgets/stream-element.js +++ b/public/javascripts/widgets/stream-element.js @@ -21,9 +21,9 @@ postScope: element.find("span.post_scope") }); - // tipsy tooltips - self.deletePostLink.tipsy({ trigger: "hover" }); - self.postScope.tipsy({ trigger: "hover" }); + // twipsy tooltips + self.deletePostLink.twipsy(); + self.postScope.twipsy(); // collapse long posts // self.content.expander({ diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index c16fb5888..f8ae266bf 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -3391,3 +3391,19 @@ a.toggle_selector :-webkit-box-shadow none :-moz-box-shadow none :box-shadow none + +#welcome-to-diaspora + :position absolute + :width 100% + :left 0 + :top 0 + :padding + :top 50px + :bottom 10px + h1,h3 + :color #fff + :background orange + +#gs-shim + :position absolute + :top 380px