├── VERSION ├── Screenshot.png ├── .document ├── lib └── ui_guiders.rb ├── app ├── assets │ ├── images │ │ └── ui_guiders │ │ │ ├── box_bgrnd.png │ │ │ ├── close_ico.png │ │ │ ├── left_arrow.png │ │ │ ├── right_arrow.png │ │ │ ├── top_arrow.png │ │ │ └── bottom_arrow.png │ ├── stylesheets │ │ └── ui_guiders.css.scss │ └── javascripts │ │ └── lib │ │ └── ui_guiders.js.coffee ├── views │ └── shared │ │ └── _ui_guider.haml └── helpers │ └── ui_guiders_helper.rb ├── Gemfile ├── Rakefile ├── .gitignore ├── LICENSE.txt ├── Gemfile.lock ├── ui_guiders.gemspec └── README.markdown /VERSION: -------------------------------------------------------------------------------- 1 | 0.1.2 -------------------------------------------------------------------------------- /Screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snitko/ui_guiders/master/Screenshot.png -------------------------------------------------------------------------------- /.document: -------------------------------------------------------------------------------- 1 | lib/**/*.rb 2 | bin/* 3 | - 4 | features/**/*.feature 5 | LICENSE.txt 6 | -------------------------------------------------------------------------------- /lib/ui_guiders.rb: -------------------------------------------------------------------------------- 1 | module UIGuiders 2 | 3 | class Engine < Rails::Engine 4 | end 5 | 6 | end 7 | -------------------------------------------------------------------------------- /app/assets/images/ui_guiders/box_bgrnd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snitko/ui_guiders/master/app/assets/images/ui_guiders/box_bgrnd.png -------------------------------------------------------------------------------- /app/assets/images/ui_guiders/close_ico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snitko/ui_guiders/master/app/assets/images/ui_guiders/close_ico.png -------------------------------------------------------------------------------- /app/assets/images/ui_guiders/left_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snitko/ui_guiders/master/app/assets/images/ui_guiders/left_arrow.png -------------------------------------------------------------------------------- /app/assets/images/ui_guiders/right_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snitko/ui_guiders/master/app/assets/images/ui_guiders/right_arrow.png -------------------------------------------------------------------------------- /app/assets/images/ui_guiders/top_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snitko/ui_guiders/master/app/assets/images/ui_guiders/top_arrow.png -------------------------------------------------------------------------------- /app/assets/images/ui_guiders/bottom_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snitko/ui_guiders/master/app/assets/images/ui_guiders/bottom_arrow.png -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "http://rubygems.org" 2 | # Add dependencies required to use your gem here. 3 | # Example: 4 | # gem "activesupport", ">= 2.3.5" 5 | 6 | # Add dependencies to develop your gem here. 7 | # Include everything needed to run rake, tests, features, etc. 8 | group :development do 9 | gem "bundler" 10 | gem "jeweler" 11 | end 12 | -------------------------------------------------------------------------------- /app/views/shared/_ui_guider.haml: -------------------------------------------------------------------------------- 1 | .uiGuider{ "data-target-element" => options[:target], "data-event-name" => options[:event], :class => options[:class], :id => options[:id], "data-target-edge" => options[:target_edge] } 2 | 3 | = image_tag "ui_guiders/top_arrow.png", :class => "arrow top" 4 | = image_tag "ui_guiders/left_arrow.png", :class => "arrow side left" 5 | = image_tag "ui_guiders/right_arrow.png", :class => "arrow side right" 6 | = image_tag "ui_guiders/close_ico.png", :class => "close" 7 | 8 | .content 9 | = content 10 | 11 | = image_tag "ui_guiders/bottom_arrow.png", :class => "arrow bottom" 12 | -------------------------------------------------------------------------------- /app/helpers/ui_guiders_helper.rb: -------------------------------------------------------------------------------- 1 | module UiGuidersHelper 2 | 3 | def ui_guider(options={}, &block) 4 | return if cookies["UIGuider_#{options[:id]}"] 5 | if block_given? 6 | content = capture(&block) 7 | elsif options[:template] 8 | content = render(options[:template]) 9 | else 10 | content = options[:text].html_safe 11 | end 12 | options[:class] = "" unless options[:class] 13 | options[:class] += " autoshow" if options[:autoshow] 14 | options[:class] += " autohide" if options[:autohide] 15 | options[:class] += " show_once" if options[:show_once] 16 | options[:class] += " side_arrow" if options[:side_arrow] 17 | render :partial => "shared/ui_guider", :locals => { :content => content, :options => options } 18 | end 19 | 20 | end 21 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | # encoding: utf-8 2 | 3 | require 'rubygems' 4 | require 'bundler' 5 | begin 6 | Bundler.setup(:default, :development) 7 | rescue Bundler::BundlerError => e 8 | $stderr.puts e.message 9 | $stderr.puts "Run `bundle install` to install missing gems" 10 | exit e.status_code 11 | end 12 | require 'rake' 13 | 14 | require 'jeweler' 15 | Jeweler::Tasks.new do |gem| 16 | # gem is a Gem::Specification... see http://docs.rubygems.org/read/chapter/20 for more options 17 | gem.name = "ui_guiders" 18 | gem.homepage = "http://github.com/snitko/ui_guiders" 19 | gem.license = "MIT" 20 | gem.summary = "Visual guiders for website UIs." 21 | gem.description = "It's like \"Guiders-JS\", but easily customizable and less js-centric." 22 | gem.email = "roman.snitko@gmail.com" 23 | gem.authors = ["Roman Snitko"] 24 | # dependencies defined in Gemfile 25 | end 26 | Jeweler::RubygemsDotOrgTasks.new 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # rcov generated 2 | coverage 3 | coverage.data 4 | 5 | # rdoc generated 6 | rdoc 7 | 8 | # yard generated 9 | doc 10 | .yardoc 11 | 12 | # bundler 13 | .bundle 14 | 15 | # jeweler generated 16 | pkg 17 | 18 | # Have editor/IDE/OS specific files you need to ignore? Consider using a global gitignore: 19 | # 20 | # * Create a file at ~/.gitignore 21 | # * Include files you want ignored 22 | # * Run: git config --global core.excludesfile ~/.gitignore 23 | # 24 | # After doing this, these files will be ignored in all your git projects, 25 | # saving you from having to 'pollute' every project you touch with them 26 | # 27 | # Not sure what to needs to be ignored for particular editors/OSes? Here's some ideas to get you started. (Remember, remove the leading # of the line) 28 | # 29 | # For MacOS: 30 | # 31 | #.DS_Store 32 | 33 | # For TextMate 34 | #*.tmproj 35 | #tmtags 36 | 37 | # For emacs: 38 | #*~ 39 | #\#* 40 | #.\#* 41 | 42 | # For vim: 43 | #*.swp 44 | 45 | # For redcar: 46 | #.redcar 47 | 48 | # For rubinius: 49 | #*.rbc 50 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012 Roman Snitko 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: http://rubygems.org/ 3 | specs: 4 | addressable (2.3.6) 5 | builder (3.2.2) 6 | descendants_tracker (0.0.4) 7 | thread_safe (~> 0.3, >= 0.3.1) 8 | faraday (0.9.0) 9 | multipart-post (>= 1.2, < 3) 10 | git (1.2.6) 11 | github_api (0.11.3) 12 | addressable (~> 2.3) 13 | descendants_tracker (~> 0.0.1) 14 | faraday (~> 0.8, < 0.10) 15 | hashie (>= 1.2) 16 | multi_json (>= 1.7.5, < 2.0) 17 | nokogiri (~> 1.6.0) 18 | oauth2 19 | hashie (3.0.0) 20 | highline (1.6.21) 21 | jeweler (2.0.1) 22 | builder 23 | bundler (>= 1.0) 24 | git (>= 1.2.5) 25 | github_api 26 | highline (>= 1.6.15) 27 | nokogiri (>= 1.5.10) 28 | rake 29 | rdoc 30 | json (1.8.1) 31 | jwt (1.0.0) 32 | mini_portile (0.6.0) 33 | multi_json (1.10.1) 34 | multi_xml (0.5.5) 35 | multipart-post (2.0.0) 36 | nokogiri (1.6.2.1) 37 | mini_portile (= 0.6.0) 38 | oauth2 (0.9.4) 39 | faraday (>= 0.8, < 0.10) 40 | jwt (~> 1.0) 41 | multi_json (~> 1.3) 42 | multi_xml (~> 0.5) 43 | rack (~> 1.2) 44 | rack (1.5.2) 45 | rake (10.3.2) 46 | rdoc (4.1.1) 47 | json (~> 1.4) 48 | thread_safe (0.3.4) 49 | 50 | PLATFORMS 51 | ruby 52 | 53 | DEPENDENCIES 54 | bundler 55 | jeweler 56 | -------------------------------------------------------------------------------- /app/assets/stylesheets/ui_guiders.css.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix { 2 | display: block; 3 | &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 4 | } 5 | 6 | .uiGuider { 7 | 8 | display: none; position: absolute; z-index: 2000; 9 | width: 350px; color: #000; font-size: 0px; 10 | background: #eecf84 asset_url("ui_guiders/box_bgrnd.png"); background-repeat: repeat-x; 11 | 12 | .content { 13 | padding: 1em; margin: -5px 0 0 0; font-size: 11px; 14 | a, a:visited { color: #a20000; } 15 | } 16 | 17 | img.arrow { position: relative; display: none; height: 5px; width: 13px; } 18 | img.arrow.top { @include clearfix; } 19 | img.arrow.top.left { top: -5px; left: 5px; margin: 0 0 0 0; } 20 | img.arrow.top.right { top: -5px; left: -5px; float: right; margin: 0 0 0 0; } 21 | img.arrow.bottom.left { top: 0; left: 5px; margin: 0 0 -5px 0; } 22 | img.arrow.bottom.right { top: 0; left: -5px; float: right; margin: 0 0 -5px 0; } 23 | 24 | img.arrow.side { width: 5px; height: 13px; margin-bottom: -13px; } 25 | img.arrow.side.left { left: -5px; } 26 | img.arrow.side.right { float: right; right: -5px; } 27 | 28 | 29 | img.close { position: relative; cursor: pointer; float: right; right: 8px; top: 8px; opacity: 0.3; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); margin: 0 0 15px 15px; } 30 | img.close:hover { opacity: 0.5; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); } 31 | 32 | &.autohide img.close { display: none; } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /ui_guiders.gemspec: -------------------------------------------------------------------------------- 1 | # Generated by jeweler 2 | # DO NOT EDIT THIS FILE DIRECTLY 3 | # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec' 4 | # -*- encoding: utf-8 -*- 5 | # stub: ui_guiders 0.1.2 ruby lib 6 | 7 | Gem::Specification.new do |s| 8 | s.name = "ui_guiders" 9 | s.version = "0.1.2" 10 | 11 | s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version= 12 | s.require_paths = ["lib"] 13 | s.authors = ["Roman Snitko"] 14 | s.date = "2014-06-05" 15 | s.description = "It's like \"Guiders-JS\", but easily customizable and less js-centric." 16 | s.email = "roman.snitko@gmail.com" 17 | s.extra_rdoc_files = [ 18 | "LICENSE.txt", 19 | "README.markdown" 20 | ] 21 | s.files = [ 22 | ".document", 23 | "Gemfile", 24 | "Gemfile.lock", 25 | "LICENSE.txt", 26 | "README.markdown", 27 | "Rakefile", 28 | "Screenshot.png", 29 | "VERSION", 30 | "app/assets/images/ui_guiders/bottom_arrow.png", 31 | "app/assets/images/ui_guiders/box_bgrnd.png", 32 | "app/assets/images/ui_guiders/close_ico.png", 33 | "app/assets/images/ui_guiders/left_arrow.png", 34 | "app/assets/images/ui_guiders/right_arrow.png", 35 | "app/assets/images/ui_guiders/top_arrow.png", 36 | "app/assets/javascripts/lib/ui_guiders.js.coffee", 37 | "app/assets/stylesheets/ui_guiders.css.scss", 38 | "app/helpers/ui_guiders_helper.rb", 39 | "app/views/shared/_ui_guider.haml", 40 | "lib/ui_guiders.rb", 41 | "ui_guiders.gemspec" 42 | ] 43 | s.homepage = "http://github.com/snitko/ui_guiders" 44 | s.licenses = ["MIT"] 45 | s.rubygems_version = "2.2.2" 46 | s.summary = "Visual guiders for website UIs." 47 | 48 | if s.respond_to? :specification_version then 49 | s.specification_version = 4 50 | 51 | if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then 52 | s.add_development_dependency(%q, [">= 0"]) 53 | s.add_development_dependency(%q, [">= 0"]) 54 | else 55 | s.add_dependency(%q, [">= 0"]) 56 | s.add_dependency(%q, [">= 0"]) 57 | end 58 | else 59 | s.add_dependency(%q, [">= 0"]) 60 | s.add_dependency(%q, [">= 0"]) 61 | end 62 | end 63 | 64 | -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | UIGuiders 2 | ========= 3 | 4 | *Visual guiders for website UIs* 5 | It's like "Guiders-JS", but easily customizable and less js-centric. 6 | 7 | ![Screenshot](https://github.com/snitko/ui_guiders/raw/master/Screenshot.png) 8 | 9 | Why? 10 | ---- 11 | Because I wanted an easy soulution that wouldn't be all javascript. I don't think it's a good idea to assign 12 | guiders on the js-level, like Guiders.js does. Instead, it should be in the views. The javascript part 13 | only handles proper positioning and effects part, while remaining uninvolved into the styles/content business. 14 | 15 | If you wish, you may just use the js part and use it outside of the Rails app. 16 | (Actually, it's written in coffeescript, so you'd have to compile it first). 17 | 18 | The javascript part will correctly determine which part of the screen the target DOM-element is positioned and 19 | then choose how to display the guider - what side the arrow should be on and should the guider be on top or 20 | at the bottom of the target DOM-element. No need to manually specify any options. 21 | 22 | See Screenshot.png file for a small demonstration of how it looks. 23 | 24 | INSTALLATION 25 | ------------ 26 | 27 | 1. gem install ui_guiders 28 | 29 | 2. 30 | (a) Add to your scss: `@import "ui_guiders";` OR 31 | (b) Add to your layout: `stylesheet_link_tag 'ui_guiders'` 32 | 33 | 3. 34 | (a) Add to your application.js.coffee `#= require lib/ui_guiders` OR 35 | (b) Add to your layout: `javascript_include_tag "lib/ui_guiders"` 36 | 37 | 38 | Usage 39 | ----- 40 | 41 | This is what you put in your views (haml example): 42 | 43 | = ui_guider :target => "header .menuItem1", :autoshow => true, :event => "click", :show_once => true, :id => "menu_item_1_guider", :class => "myclass" do 44 | text explaining 45 | this awesome menuitem 46 | 47 | That's it. Now when your page is loaded a shiny yellow guider will appear pointing at the DOM element you specified with the :target option. 48 | Other options explanation: 49 | 50 | `:autoshow` if true, js-part of the plugin will force the guider to appear up 51 | immediately after the page loads. Default is false. 52 | 53 | `:autohide` if true, it hides the guider whenever the `mouseout` event happens on the target element. 54 | The close ico does not appear if this option is enabled (because this option also adds `autohide` class to 55 | the .uiGuider element, and default css sets a `display` property of `img.close` in it to `none`). 56 | 57 | `:show_once` Saves cookie with the id of the guider. Next time the user visits, the guider is not shown. 58 | Default is false. 59 | 60 | `:event` jQuery event (for example `click` or `mouseover`) which is binded to the target and on which the guider is shown. 61 | 62 | `:side_arrow` Normally the arrow would appear either on top or the bottom side of the guider, but with this option set to true, you can an arrow 63 | on either left or right side of the guider. Use with caution, as this may force horizontal scrollbars to appear if your targer is 64 | placed to close the edge of the screen. 65 | 66 | `:target_edge` Sets a horizontal location on the target for the arrow to point to, possible values are "left", "right" or "middle" 67 | (default is "middle"). 68 | 69 | `:id` 70 | `:class` Both are applied to the html-element. 71 | 72 | 73 | Customization 74 | ------------- 75 | * Want different styles? 76 | copy `app/assets/stylesheets/ui_guiders.css.scss` from the gem dir and change it. 77 | 78 | * Replacing images? 79 | You guessed it right. Copy `app/assets/images/ui_guiders/` from the gem dir and change it. 80 | 81 | For images and stylesheets make sure your `app/assets` dir loads last, so that Rails loads *your* files. 82 | I managed to do it with 83 | 84 | config.assets.paths << "#{Rails.root}/app/assets/stylesheets/" 85 | config.assets.paths << "#{Rails.root}/app/assets/images/" 86 | 87 | in my `config/application.rb` 88 | 89 | * Want a different markup? 90 | copy `app/assets/views/shared/_ui_guider.haml` from the plugin dir and change it. 91 | 92 | 93 | Requirements 94 | ------------ 95 | 96 | * Rails 3.1 (sorry, no 3.0 support, using assets) 97 | * jQuery (tested on 1.5.2) 98 | * jquery.cookie.js 99 | -------------------------------------------------------------------------------- /app/assets/javascripts/lib/ui_guiders.js.coffee: -------------------------------------------------------------------------------- 1 | jQuery ($) -> 2 | 3 | window.UIGuider = class UIGuider 4 | 5 | constructor: (block) -> 6 | @block = $(block) 7 | @target = $($(@block).attr("data-target-element")) 8 | @arrows = { 9 | top: @block.children(".arrow.top") 10 | bottom: @block.children(".arrow.bottom") 11 | left: @block.children(".arrow.side.left") 12 | right: @block.children(".arrow.side.right") 13 | } 14 | @state = "hidden" 15 | 16 | @hide_arrows = () -> 17 | for a in @arrows 18 | a.hide() 19 | 20 | # Places arrow to the right corner of the Guider. 21 | # It's top/bottom and left/right position is always equal to that 22 | # of a target. 23 | @place_arrow = (pos, options={}) -> 24 | @hide_arrows() 25 | if options.side_arrow 26 | @arrows[pos.x].css(top: @block.height()/2 - @arrows.left.height()).show() 27 | else 28 | @arrows[pos.y].show().addClass(pos.x) 29 | 30 | # Places Guider so that its arrow always points to the target. 31 | # Depending on the position of the target the guider will appear on the left 32 | # or on the right side of the target. 33 | # 34 | # To set a horizontal location on the target for the arrow to point to, 35 | # use "edge" option for that with "left", "right" or "middle" (default is "middle"). 36 | # 37 | # To set the type of arrow (side arrow or arrows appearing on the top or the bottom of the guider), 38 | # set "side_arrow" option to true. 39 | @place_guider = (pos, options={}) -> 40 | 41 | if options.side_arrow 42 | arrow = @arrows.left 43 | arrow_offset_sign = 1 44 | else 45 | arrow = @arrows.top 46 | arrow_offset_sign = -1 47 | 48 | if options.side_arrow 49 | top_offset = @target.offset().top + @target.height()/2 - @block.height()/2 50 | else if pos.y == "top" 51 | top_offset = @target.offset().top + @target.height() + arrow.height() 52 | else 53 | top_offset = @target.offset().top - @block.height() - arrow.height() 54 | 55 | if pos.x == "left" 56 | pos_left_offset = @target.offset().left + arrow.width()*arrow_offset_sign 57 | if options.edge == "left" 58 | width_left_offset = 0 59 | else if options.edge == "right" 60 | width_left_offset = @target.width() 61 | else 62 | width_left_offset = @target.width()/2 63 | else 64 | arrow_offset_sign = -arrow_offset_sign 65 | pos_left_offset = @target.offset().left + arrow.width()*arrow_offset_sign 66 | if options.edge == "left" 67 | width_left_offset = -@block.width() 68 | else if options.edge == "right" 69 | width_left_offset = -@block.width() + @target.width() 70 | else 71 | width_left_offset = -@block.width() + @target.width()/2 72 | 73 | 74 | @block.css { top: top_offset } 75 | @block.css { left: pos_left_offset + width_left_offset } 76 | 77 | 78 | @set_cookie = () -> 79 | $.cookie("UIGuider_#{@block.attr("id")}", "1", { expires: 3560 }) if @block.hasClass("show_once") and @block.attr("id") 80 | 81 | # Finds which part of the screen the target is located, 82 | # top/bottom and left/right. It is later used to position 83 | # the Guider and its arrow. 84 | @target_location = () -> 85 | return @target_location_cached if @target_location_cached 86 | if $(document).width()/2 - @target.offset().left < 0 87 | x = "right" 88 | else 89 | x = "left" 90 | if $(document).height()/2 - @target.offset().top < 0 91 | y = "bottom" 92 | else 93 | y = "top" 94 | @target_location_cached = { x: x, y: y } 95 | 96 | show: (options={}) -> 97 | return if @hiding 98 | UIGuidersCollection.hide_all() 99 | return if $.cookie("UIGuider_#{@block.attr("id")}") 100 | 101 | options["side_arrow"] = true if @block.hasClass("side_arrow") 102 | options["edge"] = @block.attr("data-target-edge") if @block.attr("data-target-edge") 103 | @target = options.target if options.target 104 | 105 | @place_arrow @target_location(), options 106 | @place_guider @target_location(), options 107 | 108 | @set_cookie() 109 | @block.find(".content").html(options["content"]) if options["content"] 110 | @block.fadeIn(300) 111 | @state = "visible" 112 | 113 | hide: () -> 114 | return if @hiding 115 | @hiding = true 116 | @block.fadeOut 300, () => 117 | @hiding = false 118 | @state = "hidden" 119 | 120 | 121 | class _UIGuidersCollection 122 | 123 | 124 | constructor: () -> 125 | 126 | @ui_guiders = [] 127 | for g in $(".uiGuider") 128 | @ui_guiders.push new UIGuider(g) 129 | 130 | for g in @ui_guiders 131 | if g.block.hasClass("autoshow") 132 | setTimeout () -> 133 | g.show() 134 | , 1000 135 | 136 | if g.block.hasClass("autohide") 137 | g.target.bind "mouseleave", { guider: g }, (event) -> 138 | event.data.guider.hide() 139 | 140 | if g.block.attr("data-event-name") && g.block.attr("data-event-name").length > 0 141 | g.target.bind g.block.attr("data-event-name"), { guider: g }, (event) => 142 | event.data.guider.show(target: $(event.currentTarget)) unless event.data.guider.state == "visible" 143 | 144 | g.block.find(".close").click () -> 145 | g.hide() 146 | 147 | 148 | find: (id) -> 149 | result = null 150 | for guider in @ui_guiders 151 | result = guider if guider.block.attr("id") == id 152 | result 153 | 154 | hide_all: () -> 155 | for guider in @ui_guiders 156 | guider.hide() 157 | 158 | window._UIGuidersCollection = _UIGuidersCollection 159 | window.UIGuidersCollection = new _UIGuidersCollection() 160 | --------------------------------------------------------------------------------