intro 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 05b237765af1bce1116c0200ead3508884e27c6c25836ad9f77dd4d0ab46daec
-  data.tar.gz: 4549d34e11f742793c0777864b2cae15af2af560dbc5699d536eb00212f21fbc
+  metadata.gz: e0d791d4ca97f5169800acd0c44b2f1d5414f34ebabccb3c34afe7907351dd97
+  data.tar.gz: 60d8b85776ec85b72041378699c3b0fda3f8fd213776122871b93396af8eb5e0
 SHA512:
-  metadata.gz: 093c5406aeac8563ebc3fa0570368a8a6fb3a9d740db83926d74bd1c13cee5b93f1bb7a8537ac6cdf2818df59dcd2723e353557576b09d38e6ae47f77429784a
-  data.tar.gz: 705c2f9ae8ab41f811b240aee3728aefb4c87b2555138ac0376296d4f7046afa647e3fc23c5ee02e3565a83f68790049ca09aa500d13e40e04722fb042fc080b
+  metadata.gz: d5a84de54a7afafcb6ebe94f7a2ecccabcb4df9582b931b7c6f9b4536ff243683773c7fa0b26761845a84c0c0a8705d8e45f4361b87cc9d1abf3763872bff5e4
+  data.tar.gz: 3efa12dc9948e1d3dfc0c15111a8897f74d1a941e7a667ae25dad72e8cea8ae74b1376dd973a7949784b1d29f7c00034821da2a31932a9c27be198f3581d8cb5

data/README.md

@@ -3,19 +3,21 @@
 [![Gem Version](https://badge.fury.io/rb/intro.svg)](https://badge.fury.io/rb/intro)
 [![Build Status](https://travis-ci.org/jinhucheung/intro.svg?branch=master)](https://travis-ci.org/jinhucheung/intro)
 
+[中文文档 Chinese document](/README-CN.md)
+
 Intro brings your rails application to new feature introduction and step-by-step users guide.
 
-Intro injects dynamically-generated [Shepherd.js](https://github.com/shipshapecode/shepherd) code into  your application whenever user should see a guided tour.
+Intro injects dynamically-generated [Shepherd.js](https://github.com/shipshapecode/shepherd) code into your application whenever user should see a guided tour.
 
-+ Define tour content supports image in a backstage.
++ Define tour content in a backstage.
++ Tour content supports image, many languages.
 + Easy to change tours styles or add a theme.
 + Play nicely with Turbolinks.
 + Friendly to non-developers.
 
-## Todo
+## Example
 
-+ Supporting tour content with many languages.
-+ Supporting to display tour when user is not logined.
+![example](https://user-images.githubusercontent.com/19590194/64253419-dbe38d80-cf4f-11e9-9aab-b1e6058990ab.png)
 
 ## Demo
 

data/app/assets/javascripts/intro/shepherd.js

@@ -63,6 +63,7 @@
 
     if (!intro) return
 
+    var locales = intro.locales
     var locale = intro.locale
     var shepherdOptions = intro.shepherd_options
 
@@ -95,7 +96,8 @@
     }
 
     Tour.prototype.configure = function () {
-      locale.complete = this.tour.options.btn_complete_text || locale.complete
+      var btnCompleteText = this.tour.options['btn_complete_text_' + locale] || this.tour.options.btn_complete_text
+      locales.complete = btnCompleteText || locales.complete
 
       this.configureSteps(this.tour.options.steps)
 
@@ -118,20 +120,22 @@
     Tour.prototype.configureStepBase = function (step, index) {
       var options = {}
       var popperOptions = {}
+      var stepTitle = step['title_' + locale] || step.title
+      var stepContent = step['content_' + locale] || step.content
 
       options.id = 'tour-' + index
 
-      if (step.title) {
-        options.title = step.title
+      if (stepTitle) {
+        options.title = stepTitle
       }
 
       if (step.image_url) {
         options.text = '<div class="shepherd-image-box" x-placement="' + (step.image_placement || 'top') + '">' +
                           '<div class="shepherd-image-box-content"><img height="' + step.image_height + 'px" width="' + step.image_width + 'px" src="' + encodeURI(step.image_url) + '"></div>' +
-                          (step.content ? ('<div class="shepherd-image-box-text">' + step.content + '</div>') : '') +
+                          (stepContent ? ('<div class="shepherd-image-box-text">' + stepContent + '</div>') : '') +
                        '</div>'
-      } else if (step.content) {
-        options.text = '<div class="shepherd-text-box">' + step.content + '</div>'
+      } else if (stepContent) {
+        options.text = '<div class="shepherd-text-box">' + stepContent + '</div>'
       }
 
       if (step.element) {
@@ -169,21 +173,21 @@
 
       if (this.tour.options.btn_visible == 1) {
         if (index === 0) {
-          options.buttons = [{ text: locale.exit, action: this.shepherd.cancel, secondary: true }]
+          options.buttons = [{ text: locales.exit, action: this.shepherd.cancel, secondary: true }]
           if (steps.length === 1) {
-            options.buttons.push({ text: locale.complete, action: this.shepherd.complete })
+            options.buttons.push({ text: locales.complete, action: this.shepherd.complete })
           } else {
-            options.buttons.push({ text: locale.next, action: this.next.bind(this) })
+            options.buttons.push({ text: locales.next, action: this.next.bind(this) })
           }
         } else if (index === steps.length - 1) {
           options.buttons = [
-            { text: locale.back, action: this.shepherd.back, secondary: true },
-            { text: locale.complete, action: this.shepherd.complete }
+            { text: locales.back, action: this.shepherd.back, secondary: true },
+            { text: locales.complete, action: this.shepherd.complete }
           ]
         } else {
           options.buttons = [
-            { text: locale.back, action: this.shepherd.back, secondary: true },
-            { text: locale.next, action: this.next.bind(this) }
+            { text: locales.back, action: this.shepherd.back, secondary: true },
+            { text: locales.next, action: this.next.bind(this) }
           ]
         }
       } else {
@@ -259,6 +263,8 @@
 
       createCookie('intro-tour-' + this.tour.id, (action || 'complete'), 7300)
 
+      if (!intro.signed) return
+
       var xhr = new XMLHttpRequest()
       var csrfToken = document.querySelector('meta[name="csrf-token"]')
 

data/app/assets/stylesheets/intro/admin/tour.scss

@@ -25,6 +25,33 @@
   margin-bottom: 1em;
 }
 
+.intro-admin__tour-form .local-field {
+  .header {
+    @include flex;
+    @include flex-pack-justify;
+
+    margin: 0 0 .28em 0;
+  }
+
+  .intro-admin__select {
+    background: none;
+  }
+
+  .intro-admin__select select {
+    border: none;
+    padding: 0;
+    text-align-last: right;
+  }
+
+  .input-group > .locale-input {
+    display: none;
+  }
+
+  .input-group > .locale-input.active {
+    display: inline-block;
+  }
+}
+
 // steps
 
 .intro-admin__steps .add-step-button {

data/app/controllers/intro/tours_controller.rb

@@ -3,14 +3,16 @@ require 'uri'
 module Intro
   class ToursController < ::Intro::ApplicationController
     if Rails::VERSION::MAJOR > 3
-      before_action :authenticate
+      before_action :authenticate, only: :record
       before_action :require_tour, only: :record
     else
-      before_filter :authenticate
+      before_filter :authenticate, only: :record
       before_filter :require_tour, only: :record
     end
 
     def index
+      return render_unauthorized unless Intro.config.visible_without_signing_in || current_user
+
       tours = Intro::Tour.with_controller_and_action(params[:controller_path], params[:action_name])
       tours = tours.published
 
@@ -19,6 +21,7 @@ module Intro
       tours = filter_tours_by_route(tours)
       tours = filter_tours_by_histories(tours)
       tours = filter_tours_by_expired_time(tours)
+      tours = filter_tours_by_signed_in(tours)
 
       render json: { data: tours.map(&:expose_attributes) }
     end
@@ -31,8 +34,12 @@ module Intro
 
     protected
 
+    def render_unauthorized
+      render json: { message: t('intro.errors.unauthorized') }, status: :unauthorized
+    end
+
     def authenticate
-      render json: { message: t('intro.errors.unauthorized') }, status: :unauthorized unless current_user
+      render_unauthorized unless current_user
     end
 
     def require_tour
@@ -88,5 +95,13 @@ module Intro
     def filter_tours_by_expired_time(tours)
       tours.reject(&:expired?)
     end
+
+    def filter_tours_by_signed_in(tours)
+      if Intro.config.visible_without_signing_in && !current_user
+        tours.select {|tour| tour.options['not_sign_visible'] rescue false}
+      else
+        tours
+      end
+    end
   end
 end

data/app/models/intro/tour.rb

@@ -71,8 +71,6 @@ module Intro
       end
     end
 
-    protected
-
     def format_attributes
       %i[ident controller_path action_name].each do |attribute|
         strip_attribute = send(attribute).try(:strip)

data/app/views/intro/admin/tours/_form.html.erb

@@ -57,6 +57,15 @@
   <details class='field'>
     <summary><%= t('intro.admin.others') %></summary>
     <div class='intro-admin__tour-others'>
+      <% if Intro.config.visible_without_signing_in %>
+        <div class='field'>
+          <div class='checkbox intro-admin__checkbox'>
+            <%= check_box_tag 'tour[options][not_sign_visible]', 1, @tour.options['not_sign_visible'] %>
+            <%= label_tag 'tour[options][not_sign_visible]', t('intro.admin.placeholders.not_sign_visible') %>
+          </div>
+        </div>
+      <% end %>
+
       <div class='field'>
         <div class='checkbox intro-admin__checkbox'>
           <%= check_box_tag 'tour[options][overlay_visible]', 1, @tour.options['overlay_visible'] %>
@@ -74,10 +83,10 @@
       </div>
 
       <div class='two fields js-intro-complete-btn-fields <%= 'intro-admin__hide' unless btn_visible %>'>
-        <div class='field'>
-          <%= label_tag :btn_complete_text, t('intro.admin.tour.btn_complete_text') %>
-          <%= text_field_tag 'tour[options][btn_complete_text]', @tour.options['btn_complete_text'], placeholder: t('intro.admin.placeholders.btn_complete_text') %>
-        </div>
+        <%= render 'local_field',
+          label: { name: :btn_complete_text, content: t('intro.admin.tour.btn_complete_text') },
+          input: { name: 'tour[options][btn_complete_text]', object: @tour.options, attr: :btn_complete_text, options: { placeholder: t('intro.admin.placeholders.btn_complete_text') } }
+        %>
 
         <div class='field'>
           <%= label_tag :btn_complete_link, t('intro.admin.tour.btn_complete_link') %>
@@ -102,92 +111,96 @@
 <% end %>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function () {
-    var simpleRouteInput = document.querySelector('.js-tour-simple-route-input')
-    var identInput = document.querySelector('.js-tour-ident-input')
-    var controllerInput = document.querySelector('.js-tour-controller-input')
-    var actionInput = document.querySelector('.js-tour-action-input')
-    var queryInput = document.querySelector('.js-tour-query-input')
-    var testBtn = document.querySelector('.js-intro-admin__button-test')
-    var form = document.querySelector('.intro-admin__tour-form')
+  $(function () {
     var introTour
 
     // auto fill ident, controller, action, query input
-    simpleRouteInput.addEventListener('change', function (e) {
+    $('.js-tour-simple-route-input').change(function (e) {
       if (!e.target.value) return
 
-      var xhr = new XMLHttpRequest()
-      xhr.open('GET', "<%= route_admin_tours_path %>?path=" + encodeURIComponent(e.target.value))
-      xhr.setRequestHeader('Content-Type', 'application/json')
-      xhr.onload = function () {
-        if (xhr.status !== 200) return
-
-        var res = JSON.parse(xhr.response)
-        var data = res.data
-
-        if (!data) return
-        if (data.source) {
-          controllerInput.value = data.source.controller
-          actionInput.value = data.source.action
+      var $identInput = $('.js-tour-ident-input')
+      var $controllerInput = $('.js-tour-controller-input')
+      var $actionInput = $('.js-tour-action-input')
+      var $queryInput = $('.js-tour-query-input')
+
+      $.ajax({
+        method: 'GET',
+        url: "<%= route_admin_tours_path %>?path=" + encodeURIComponent(e.target.value),
+        contentType: 'application/json',
+        success: function (res) {
+          var data = res && res.data
+          if (!data) return
+
+          if (data.source) {
+            $controllerInput.val(data.source.controller)
+            $actionInput.val(data.source.action)
+
+            if (/^(([\/\w]+)#(\w+)-.*)|(\s*)$/.test($identInput.val())) {
+              $identInput.val(data.source.controller + '#' + data.source.action + '-' + Math.random().toString(36).slice(-6))
+            }
+          }
 
-          if (/^(([\/\w]+)#(\w+)-.*)|(\s*)$/.test(identInput.value)) {
-            identInput.value = data.source.controller + '#' + data.source.action + '-' + Math.random().toString(36).slice(-6)
+          if (data.query) {
+            $queryInput.val(data.query)
           }
         }
-        if (data.query) {
-          queryInput.value = data.query
-        }
-      }
-      xhr.send()
+      })
     })
 
     // test tour
-    testBtn.addEventListener('click', function () {
-      if (testBtn.classList.contains('intro-loading')) return
-
-      testBtn.classList.add('intro-loading')
-      introTour && introTour.hide()
-
-      var data = new FormData(form)
-      data.append('_method', 'POST')
-
-      var xhr = new XMLHttpRequest()
-      xhr.open('POST', "<%= attempt_admin_tours_path %>")
-
-      xhr.onload = function () {
-        testBtn.classList.remove('intro-loading')
-
-        if (xhr.status !== 200) return
-
-        var res = JSON.parse(xhr.response)
-
-        if (res.data) {
-          introTour = new window._intro.Tour(res.data)
+    $('.js-intro-admin__button-test').click(function () {
+      var $this = $(this)
+      var $form = $('.intro-admin__tour-form')
+
+      if ($this.hasClass('intro-loading')) return
+
+      $.ajax({
+        method: 'POST',
+        url: "<%= attempt_admin_tours_path %>",
+        data: $form.serialize().replace(/&_method=(put|patch)&/i, '&_method=post&'),
+        beforeSend: function () {
+          $this.addClass('intro-loading')
+          introTour && introTour.hide()
+        },
+        success: function (res) {
+          if (res.data) {
+            introTour = new window._intro.Tour(res.data)
+
+            introTour.test({
+              element: '.js-intro-admin__button-test'
+            })
+          }
 
-          introTour.test({
-            element: '.js-intro-admin__button-test'
-          })
+          $this.removeClass('intro-loading')
+        },
+        error: function () {
+          $this.removeClass('intro-loading')
         }
-      }
-
-      xhr.onerror = function () {
-        testBtn.classList.remove('intro-loading')
-      }
+      })
 
-      xhr.send(data)
     })
 
     // complete btn actions
-    document.querySelector('.js-intro-btn-visible-input').addEventListener('change', function (e) {
-      var completeBtnFields = document.querySelector('.js-intro-complete-btn-fields')
+    $('.js-intro-btn-visible-input').change(function (e) {
+      var $field = $(this).closest('.field')
+      var $completeBtnFields = $('.js-intro-complete-btn-fields')
 
       if (e.target.checked) {
-        completeBtnFields.classList.remove('intro-admin__hide')
-        e.target.closest('.field').style.marginBottom = null
+        $completeBtnFields.removeClass('intro-admin__hide')
+        $field.css('marginBottom', 'null')
       } else {
-        completeBtnFields.classList.add('intro-admin__hide')
-        e.target.closest('.field').style.marginBottom = '1em'
+        $completeBtnFields.addClass('intro-admin__hide')
+        $field.css('marginBottom', '1em')
       }
     })
+
+    // local field
+    $('.intro-admin__tour-form').on('change', '.js-intro-admin__locale-select', function () {
+      var $this = $(this)
+      var $field = $this.closest('.field')
+
+      $field.find('.locale-input').removeClass('active')
+      $field.find('.locale-input[data-locale="' + $this.val() + '"]').addClass('active')
+    })
   })
 </script>

data/app/views/intro/admin/tours/_local_field.html.erb

@@ -0,0 +1,23 @@
+<% text_tag_method = :textarea == input[:type] ? :text_area_tag : :text_field_tag %>
+<% render_locale_input = ->(locale, options) do
+    send(text_tag_method,
+      input[:name].to_s.gsub(/\[(\w+)\]$/, "[\\1_#{locale}]"),
+      (input[:object]["#{input[:attr]}_#{locale}"].presence || input[:object][input[:attr].to_s] rescue ''),
+      options)
+  end
+%>
+
+<div class='field local-field'>
+  <div class='header'>
+    <%= label_tag label[:name], label[:content] %>
+    <div class='intro-admin__select'>
+      <%= select_tag '_', options_for_select(I18n.available_locales, I18n.locale), class: 'js-intro-admin__locale-select' %>
+    </div>
+  </div>
+  <div class='input-group'>
+    <% I18n.available_locales.each do |locale| %>
+      <% input_class = "locale-input #{input[:options][:class] rescue ''} #{'active' if locale == I18n.locale}"  %>
+      <%= render_locale_input.call(locale, input[:options].merge(class: input_class, 'data-locale' => locale)) %>
+    <% end %>
+  </div>
+</div>

data/app/views/intro/admin/tours/_step.html.erb

@@ -13,15 +13,15 @@
   </div>
 
   <div class='intro-admin__step-content'>
-    <div class='field'>
-      <%= label_tag :component_title, t('intro.admin.component.title') %>
-      <%= text_field_tag "#{step_prefix}[title]", step['title'], placeholder: t('intro.admin.placeholders.title') %>
-    </div>
+    <%= render 'local_field',
+      label: { name: :component_title, content: t('intro.admin.component.title') },
+      input: { name: "#{step_prefix}[title]", object: step, attr: :title, options: { placeholder: t('intro.admin.placeholders.title') } }
+    %>
 
-    <div class='field'>
-      <%= label_tag :component_content, t('intro.admin.component.content') %>
-      <%= text_area_tag "#{step_prefix}[content]", step['content'], placeholder: t('intro.admin.placeholders.content'), class: 'content-textarea' %>
-    </div>
+    <%= render 'local_field',
+      label: { name: :component_content, content: t('intro.admin.component.content') },
+      input: { type: :textarea, name: "#{step_prefix}[content]", object: step, attr: :content, options: { placeholder: t('intro.admin.placeholders.content', class: 'content-textarea') } }
+    %>
 
     <div class='two fields'>
       <div class='field'>
@@ -68,14 +68,14 @@
     </div>
 
     <div class='field'>
-      <div class='checkbox intro-admin__checkbox js-intro-step-cancel-link-checkbox'>
+      <div class='checkbox intro-admin__checkbox' data-scope="cancel-link">
         <%= check_box_tag "#{step_prefix}[cancel_link]", 1, step['cancel_link'], id: "intro-admin__step-cancel-link-#{index}" %>
         <%= label_tag "#{step_prefix}[cancel_link]", t('intro.admin.placeholders.cancel_link'), for: "intro-admin__step-cancel-link-#{index}" %>
       </div>
     </div>
 
     <div class='field'>
-      <div class='checkbox intro-admin__checkbox js-intro-step-fixed-checkbox'>
+      <div class='checkbox intro-admin__checkbox' data-scope="fixed">
         <%= check_box_tag "#{step_prefix}[fixed_placement]", 1, step['fixed_placement'], id: "intro-admin__step-fixed-#{index}" %>
         <%= label_tag "#{step_prefix}[fixed_placement]", t('intro.admin.placeholders.fixed_placement'), title: t('intro.admin.tips.fixed_placement'), for: "intro-admin__step-fixed-#{index}" %>
       </div>