help-anywhere 0.1.1

data/app/assets/javascripts/help_anywhere/help_anywhere.js.coffee

@@ -0,0 +1,254 @@
+do($ = jQuery) ->
+  HELP_TEMPLATE = (args) ->
+    """
+      <div id="help-anywhere-widget">
+        <div class="ha-std-button" title="Help">?</div>
+      </div>
+    """
+
+  HELP_INTERFACE_TEMPLATE = (pages, edit_mode) ->
+    """
+      <div id="help-anywhere-layout">
+        <div class="ha-page-content"></div>
+        #{
+        if edit_mode
+          HELP_INTERFACE_EDIT_MODE(pages)
+        else ''
+        }
+      </div>
+    """
+
+  HELP_INTERFACE_EDIT_MODE = (pages) ->
+    """
+      <div class="ha-edit-bottom-layout">
+        <div class="ha-new-component">
+          Add component:
+            <select class="ha-add-component">
+            #{HELP_SELECT_COMPONENT()}
+            </select>
+            <input type="button" class="ha-save-btn btn btn-primary" value="Save"></input>
+            <input type="button" class="ha-remove-page-btn btn btn-danger" value="Remove page"></input>
+            <input type="button" class="ha-exit-btn btn btn-danger" value="Exit"></input>
+        </div>
+        <div class="ha-page-list">
+          #{HELP_INTERFACE_PAGES(pages)}
+        </div>
+      </div>
+    """
+
+  HELP_SELECT_COMPONENT = ->
+    "<option value='' selected='selected'>Select a component</option>" + (
+      for k,v of HelpAnywhere.components
+        "<option value='#{k}'>#{k}</option>"
+    ).join("")
+
+  HELP_INTERFACE_PAGES = (pages) ->
+    (for page, idx in pages
+      HELP_INTERFACE_PAGE(idx) ).join('') +
+    """
+      <div class="ha-new-page">+</div>
+    """
+
+  HELP_INTERFACE_PAGE = (idx) -> """<div class="ha-page" data-idx="#{idx}">#{idx}</div>"""
+
+  class HelpAnywhere
+    @API_URL: "/help_anywhere"
+
+    @render: ->
+      @instance = new HelpAnywhere
+      @instance.init()
+    @show: (edit_mode=false) ->
+      if @instance
+        @instance.openHelpInterface(edit_mode)
+        return true
+      else
+        return false
+    @hide: ->
+      @instance.closeHelpInterface()
+    @edit: -> @show(yes)
+
+    @saveElement: (elm) ->
+      for p in @instance.pageList
+        for e, idx in p.items
+          if e.id is elm.id
+            @instance.elementsChanged = true
+            p.items[idx].content = elm.getData()
+            return
+
+    @addRoutes: (routes) ->
+      @routes = (@routes ? [])
+
+      if not routes instanceof Array
+        routes = [routes]
+
+      for [regexp, value] in routes
+        regexp = '^' +
+          regexp
+          .replace('/', '\\/')
+          .replace('.', '\\.')
+          .replace('**', '.*')
+          .replace('*', '[^\\/]*')
+          .replace('??', '(.*)')
+          .replace('?', '([^\\/]*)') + '$'
+        @routes.push [new RegExp(regexp), value]
+
+    @deleteItem: (elm) ->
+      for p in @instance.pageList
+        for e, idx in p.items
+          if e.id is elm.id
+            p.items.splice(idx, 1)
+            elm.remove()
+            return true
+
+    selectRoute: (path) ->
+      for [regexp, value] in HelpAnywhere.routes
+        return path.replace(regexp, value) if regexp.test(path)
+
+      return false
+
+    elementsChanged: false
+
+    init: ->
+      @fixBody()
+      @retrieveResource()
+
+    fixBody: ->
+      $("body").css
+        position: "absolute"
+        left: 0
+        top: 0
+        "min-width": "100%"
+        "min-height": "100%"
+        margin: 0
+
+    buildInterface: ->
+      unless @help?
+        @help = $(HELP_TEMPLATE())
+        @help.find('.ha-std-button').on 'click', =>
+          @openHelpInterface()
+      @help.css(display: 'block', opacity: '0')
+        .animate(opacity: '1', 2000)
+        .appendTo($('body'))
+
+    showPage: (pageIndex) ->
+      @helpInterface.find('.ha-page-content').empty()
+
+      @helpInterface.find('.ha-page').removeClass('selected')
+      @helpInterface.find(".ha-page:nth-child(#{Number(pageIndex)+1})").addClass('selected')
+
+      items = @pageList[pageIndex].items
+
+      for item in items
+        g = new HelpAnywhere.components[item.class_id]()
+        g.id = item.id
+        g.class_id = item.class_id
+        g.load(item.content)
+
+        @helpInterface.find('.ha-page-content').append(g.build(@edit_mode))
+
+    movePage: (fromIndex, toIndex) ->
+      #Magic coffee <3
+      [@pageList[fromIndex], @pageList[toIndex]] = [@pageList[toIndex], @pageList[fromIndex]]
+      @currentPage = toIndex
+      @showPage(@currentPage) #Refreshing interface for edition mode
+
+
+    deletePage: ->
+      pageIndex = Number(@helpInterface.find('.ha-page.selected').remove().attr('data-idx'))
+      @pageList.splice(pageIndex, 1)
+
+      #Refreshing the indices
+      for page, idx in @helpInterface.find('.ha-page')
+        $(page).text(idx).attr('data-idx', idx)
+
+      @currentPage = pageIndex - 1
+
+      if @currentPage < 0
+        @currentPage = 0
+
+      if @pageList.length > 0
+        @showPage(@currentPage)
+
+    createNewPage: ->
+      @pageList.push items: [], number: @pageList[@pageList.length-1].number+1
+
+      newPage = $(HELP_INTERFACE_PAGE(@pageList.length-1))
+      newPage.insertBefore(@helpInterface.find('.ha-new-page'))
+      newPage.on 'click', =>
+        @currentPage = newPage.attr('data-idx')
+        @showPage(@currentPage)
+      @showPage(newPage.attr('data-idx'))
+
+    temporaryId: (pageIndex) ->
+      @_uid ?= 0
+      return "_#{@_uid++}" #Temporary ids are discriminated by adding underscore before.
+
+    createNewComponent: (pageIndex, componentClass) ->
+      if componentClass? and componentClass isnt ''
+        component = new HelpAnywhere.components[componentClass]()
+        @helpInterface.find('.ha-page-content').append(component.build(@edit_mode))
+
+        component.class_id = componentClass
+        component.id = @temporaryId()
+
+        @pageList[pageIndex].items.push {id: component.id, class_id: componentClass}
+    closeHelpInterface: ->
+      if @elementsChanged
+        return unless confirm("Are you sure? All changes will be losts...")
+      @helpInterface.remove()
+      @helpInterface = null
+
+    openHelpInterface: (@edit_mode=false)->
+      @helpInterface ?= $ HELP_INTERFACE_TEMPLATE(@pageList, @edit_mode)
+      @helpInterface.appendTo($("body"))
+      @currentPage = 0
+      self = this
+
+      unless @edit_mode
+        @helpInterface.on 'click', =>
+          @currentPage += 1
+
+          if @currentPage >= @pageList.length
+            @helpInterface.remove()
+            @helpInterface = null
+          else
+            @showPage(@currentPage)
+      else
+        @helpInterface.on 'click', -> HelpAnywhereEditor.focus(null)
+        @helpInterface.find('.ha-page').on 'click', ->
+          self.currentPage = $(this).attr('data-idx')
+          self.showPage(self.currentPage)
+        @helpInterface.find(".ha-new-page").on 'click', ->
+          self.createNewPage()
+        @helpInterface.find('.ha-add-component').on 'change', ->
+          self.createNewComponent(self.currentPage, $(this).val())
+          $(this).val('')
+        @helpInterface.find('.ha-save-btn').on 'click', @saveHelp.bind(@)
+        @helpInterface.find('.ha-exit-btn').on 'click', @closeHelpInterface.bind(@)
+
+        @helpInterface.find('.ha-remove-page-btn').on 'click', @deletePage.bind(@)
+
+      @showPage(@currentPage)
+
+    saveHelp: ->
+      $.post("#{HelpAnywhere.API_URL}/resources/save?name=#{@resource}", content: JSON.stringify(@pageList))
+      .success =>
+        @elementsChanged = false
+      .error =>
+        alert('Sorry, but something went wrong')
+
+    retrieveResource: (resource) ->
+      @resource = resource || @selectRoute window.location.pathname
+
+      if @help?
+        @help.css(display: 'none')
+
+
+      if @resource
+        $.get("#{HelpAnywhere.API_URL}/resources/?name=#{@resource}").success (data) =>
+          if data.pages? and data.pages.length > 0
+            @pageList = data.pages
+            @buildInterface()
+
+  window.HelpAnywhere = HelpAnywhere
+  window.HelpAnywhere.components = {}

data/app/assets/javascripts/help_anywhere/help_anywhere_editor.js.coffee

@@ -0,0 +1,41 @@
+do($ = jQuery) ->
+  current_mouse_move_target = null
+  hook_enabled = true
+
+  HelpAnywhereEditor =
+    focus: (elm) ->
+      @focused?.blur?()
+      @focused = elm
+    render: ->
+      @hook()
+    hook: ->
+      @hook_mouse_move()
+      @hook_mouse_click()
+    hook_mouse_move: ->
+      $('body').mousemove (evt) ->
+        return unless hook_enabled
+
+        $(current_mouse_move_target).removeClass('ha-hover')
+
+        id = $(evt.target).attr('id')
+
+        if id? and id isnt ''
+          $(evt.target).addClass('ha-hover')
+          current_mouse_move_target = evt.target
+        else
+          nearest_identifiable = do ->
+            parents = $(evt.target).parents()
+            console.log parents.toArray().map((x) -> $(x).attr('id')).join(', ')
+            for ancestor in parents
+              ancestor_id = $(ancestor).attr('id')
+              if ancestor_id? and id isnt ''
+                return ancestor
+            return null
+          $(nearest_identifiable).addClass('ha-hover')
+          current_mouse_move_target = nearest_identifiable
+
+    hook_mouse_click: ->
+      $('body').mousemove (evt) ->
+        return unless hook_enabled
+
+  window.HelpAnywhereEditor = HelpAnywhereEditor

data/app/assets/javascripts/help_anywhere/hooks.js.coffee

@@ -0,0 +1,28 @@
+#TODO
+jQuery ($) ->
+
+  current_mouse_move_target = null
+
+  $('html, body').mousemove (evt) ->
+    return unless HelpAnywhereEditor.hook_enabled
+
+    $(current_mouse_move_target).removeClass('ha-hover')
+
+    id = $(evt.target).attr('id')
+
+    if id? and id isnt ''
+      $(evt.target).addClass('ha-hover')
+      current_mouse_move_target = evt.target
+    else
+      nearest_identifiable = do ->
+        parents = $(evt.target).parents()
+        for ancestor in parents
+          ancestor_id = $(ancestor).attr('id')
+          if ancestor_id? and id isnt ''
+            return ancestor
+        return null
+
+  $('html, body').click (evt) ->
+    return unless HelpAnywhereEditor.hook_enabled
+
+

data/app/assets/javascripts/help_anywhere.js.coffee

@@ -0,0 +1,2 @@
+#= require help_anywhere_core_only
+#= require help_anywhere/components/bubble

data/app/assets/javascripts/help_anywhere_core_only.js.coffee

@@ -0,0 +1,11 @@
+#
+# This is the entry point for help_anywhere plugin
+#
+#
+#= require help_anywhere/help_anywhere
+#= require help_anywhere/help_anywhere_editor
+#= require help_anywhere/components/component
+jQuery ($) ->
+  $.get('/help_anywhere/routes').success (data)->
+    HelpAnywhere.addRoutes(data)
+    HelpAnywhere.render()

data/app/assets/stylesheets/generators/bubble.css.scss

@@ -0,0 +1,195 @@
+.ha-bubble-box {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  padding: 10px;
+  background-color: white;
+  border-radius: 12px;
+  border: solid 3px black;
+  box-shadow: 4px 4px 9px rgba(0,0,0,0.3);
+  position: absolute;
+  display: block;
+  width: 100px;
+
+  .ha-bubble-anchor {
+    position: absolute;
+    display: none;
+    width: 6px;
+    height: 6px;
+
+    border: dotted 2px blue;
+    margin: -4px;
+
+    cursor: pointer;
+
+    &:hover {
+      border: solid 2px blue;
+      background-color: white;
+    }
+
+    &.x {
+      border: solid 2px blue;
+      border-radius: 50%;
+      left: 50%; top: 50%;
+      cursor: move;
+    }
+
+    &.nw {
+      top: 0%; left: 0%;
+      cursor: nw-resize;
+    }
+    &.n {
+      top: 0%; left: 50%;
+      cursor: n-resize;
+    }
+
+    &.ne {
+      top: 0; left: 100%;
+      cursor: ne-resize;
+    }
+
+    &.e {
+      top: 50%; left: 100%;
+    }
+
+    &.se {
+      top: 100%; left: 100%;
+      cursor: se-resize;
+    }
+
+    &.s {
+      top: 100%; left: 50%;
+      cursor: s-resize;
+    }
+
+    &.sw {
+      top: 100%; left: 0%;
+      cursor: sw-resize;
+    }
+
+    &.w {
+      top: 50%; left: 0%;
+      cursor: w-resize;
+    }
+  }
+
+  .ha-bubble-content {
+    &:focus {
+      -webkit-touch-callout: auto;
+      -webkit-user-select: auto;
+      -khtml-user-select: auto;
+      -moz-user-select: auto;
+      -ms-user-select: auto;
+      user-select: auto;
+      text-align: left;
+    }
+
+    text-align: justify;
+    padding: 0;
+    margin: 0;
+  }
+
+  .ha-bubble-edit-box {
+    display: none;
+    background-color: #333;
+    color: white;
+
+    width: 175px;
+    height: auto;
+    padding: 5px;
+
+    position: absolute;
+    margin-left: 10px;
+    top: 0;
+    left: 100%;
+    z-index:  1;
+
+
+    opacity: 0.8;
+
+    transition: opacity ease-in-out 0.3s;
+    -moz-transition: opacity ease-in-out 0.3s;
+    -o-transition: opacity ease-in-out 0.3s;
+    -webkit-transition: opacity ease-in-out 0.3s;
+    -ms-transition: opacity ease-in-out 0.3s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    select, input {
+      width: 100%;
+    }
+
+    input {
+      border: solid 1px #EEE;
+    }
+  }
+
+  .ha-bubble-pointer {
+    position: absolute;
+
+    width: 15px;
+    height: 15px;
+    background-color: white;
+
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+
+    /*
+     * Note: right, left, bottom and top refer at the position
+     * of the target element, not the pointer itself.
+     */
+    &.pointer-right {
+      border-top: solid 3px black;
+      border-left: solid 3px black;
+
+      margin-top: -9px;
+      margin-left: -11px;
+
+
+      top: 50%;
+      left: 0;
+    }
+
+    &.pointer-left {
+      border-bottom: solid 3px black;
+      border-right: solid 3px black;
+
+      margin-top: -9px;
+      margin-right: -11px;
+
+      top: 50%;
+      right: 0;
+    }
+
+    &.pointer-bottom {
+      border-top: solid 3px black;
+      border-right: solid 3px black;
+
+      margin-top: -11px;
+      margin-left: -9px;
+
+      top: 0;
+      left: 50%;
+    }
+
+    &.pointer-top {
+      border-bottom: solid 3px black;
+      border-left: solid 3px black;
+
+      margin-bottom: -11px;
+      margin-left: -9px;
+
+      bottom: 0;
+      left: 50%;
+    }
+  }
+}

data/app/assets/stylesheets/help_anywhere.css.scss

@@ -0,0 +1,4 @@
+/*
+ *=require help_anywhere_core_only
+ *=require generators/bubble
+ */