help-anywhere 0.1.1

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    NGM2ZjIxMjMyNzViM2UzYjk0NzJjY2QxNGE1NGE2NDQwYzk1ZDIzYw==
+  data.tar.gz: !binary |-
+    ODliNTg3YTJkZmU0N2Y2MzM2Mzg3Y2QxYWQ3NTNiN2JmODcxNDAwMg==
+SHA512:
+  metadata.gz: !binary |-
+    ZTdhZjc0NjI0YzBiZWNjYzEzYzkwNTU1NDQwY2VhNzFjNGE3ZWVmMjQwYzA3
+    ZGM2ZDFlZWU4MGM2NjVkN2NlYTFkYWVmNGZjNTkzMDc3MDAwYWYzNDg2ZTg5
+    NjI4MjMwZjJmOWQ2NzBhMmU5MTU1ODkxMTZkNmUwMTNhODdiNzA=
+  data.tar.gz: !binary |-
+    YmFiZmZlMWMxZmFmNjhjNmRiYzliYjVhMmU2YmZiNTRhMzVlMzA2NTI5NjBm
+    NzVjOTk5NzU4NTQyZTIwMTNmZjRiNjk1MzYwOTRjOGZlNTUxYzUwYmE4NGIw
+    Nzc0ODAyODc1N2ZmMGJhNjhiNzlhY2YzNTJlOWUxZTU5Yjc2MWI=

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2013 Yacine PETITPREZ
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.rdoc

@@ -0,0 +1,46 @@
+= Help Anywhere
+
+This plugin for rails provides a powerful help system for every websites
+built with ruby on rails.
+
+Users can read the help, and administrator can update help pages.
+
+You can select on or more elements in your website,
+add help box on it, save it, create "step by step" help page.
+
+== Usage
+
+Add in your Gemfile:
+
+
+    gem 'help-anywhere'
+
+
+Then
+
+    bundle install
+    rake help-anywhere:install:migrations
+    rake help-anywhere:setup
+    rake db:migrate
+
+
+Finish by setup css and javascript files in your application.js/css:
+
+    //= require help_anywhere
+
+
+That's all!
+
+Finally, update the file `config/help-anywhere.rb` to change the permission strategy and the help routes!
+See help-anywhere-example project for more information!
+
+Log-in has edit mode, and create new help page with our editor. Enjoy!
+
+== Version
+
+0.1.1
+
+- This is the first stable release!
+- HelpAnywhere is provided with Bubble component, but you can also build your own. Check `app/javascript/bubble.coffee.js`
+  for more informations.
+  You can ignore this component. Just `require help_anywhere_core_only` in  both application.js and .css

data/Rakefile

@@ -0,0 +1,38 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'HelpAnywhere'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task :default => :test

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

@@ -0,0 +1,367 @@
+###
+  help-anywhere's bubble text content.
+
+  This is for now the only component bundled with the project.
+  It looks like a comic book bubble.
+
+  You can take as example for new components.
+  Here we code all logic for show and edit mode.
+###
+do ( $ = jQuery ) ->
+  BUBBLE_TEMPLATE = -> """
+    <div class="ha-bubble-box">
+      <div class="ha-bubble-pointer"></div>
+      <div class="ha-bubble-content">#{@content}</div>
+    </div>
+  """
+
+  ANCHOR_TEMPLATE = (position) -> """
+    <div class="ha-bubble-anchor #{@position}">"
+  """
+
+  EDIT_TEMPLATE = -> """
+    <div class="ha-bubble-edit-box">
+      Position:
+      <select class="ha-bubble-position">
+        <option value="free">Free</option>
+        <option value="left">Left</option>
+        <option value="top">Top</option>
+        <option value="right">Right</option>
+        <option value="bottom">Bottom</option>
+        <option value="guess">Auto</option>
+      </select>
+      Selector:
+      <input type="text" class="ha-bubble-selector" value="">
+      <input type="button" class="ha-bubble-remove btn btn-danger" value="Remove">
+    </div>
+  """
+
+  # Just constants to get named into array for d&d of resize handling
+  X = 0
+  Y = 1
+  LEFT = 0
+  TOP = 1
+  WIDTH = 2
+  HEIGHT = 3
+
+  class Bubble extends window.HelpAnywhere.Component
+    constructor: ->
+      @content = "Add text here"
+      @drag =
+        hasStarted: no
+        startOffset: [0,0]
+        startCoords: [0,0,0,0]
+
+    load: (data) ->
+      $.extend this, data
+
+    build: (editMode) ->
+      @elm = $(BUBBLE_TEMPLATE.call(this))
+
+      @editMode = editMode
+
+      #Render the handlers for edition mode as needed
+      @buildEditMode() if editMode
+
+      @elm.addClass(@htmlClass) if @htmlClass?
+
+      #Temporary append to body to check the size.
+      $('body').append(@elm)
+
+      #Focusing element
+      if @editMode
+        @elm.on 'click', (evt) =>
+          @refresh()
+
+          evt.stopPropagation()
+
+          HelpAnywhereEditor.focus(this)
+
+          for k,anchor of @anchors
+            anchor.css display: 'block'
+
+          @control.css display: 'block'
+
+          if @isBinded()
+            @anchors.x.css display: 'none'
+
+      return @refresh()
+
+    isBinded: ->
+      @target and $(@target).length > 0 and @position isnt 'free'
+
+    blur: ->
+      @control.css display: 'none'
+
+      for k,anchor of @anchors
+        anchor.css display: 'none'
+
+    refresh: ->
+      @elm.css(height: @height) if @height!=null
+
+      @targetArea ?= $("<div class='ha-bubble-target-selected'>")
+
+      #We set a default width if no width is set, to avoid some render problem
+      if @width?
+        @elm.css(width: @width)
+      else
+        @elm.css(width: '150px')
+
+      if @isBinded()
+        pos = $(@target).first().offset()
+
+        objectSize   = [$(@target).outerWidth(), $(@target).outerHeight()]
+        documentSize = [$("body").outerWidth(), $("body").outerHeight()]
+        bubbleSize = [@elm.outerWidth(), @elm.outerHeight()]
+
+        boundingBox =
+          x: parseFloat(pos.left)
+          y: parseFloat(pos.top)
+          w: parseFloat(objectSize[0])
+          h: parseFloat(objectSize[1])
+
+        boundingBox.x2 = boundingBox.x + boundingBox.w
+        boundingBox.y2 = boundingBox.y + boundingBox.h
+
+        docW = parseFloat(documentSize[0])
+        docH = parseFloat(documentSize[1])
+
+        unless @position || @position is 'guess' #Guess mode
+          ###
+            x,y-------x2,y
+            |          |
+            |          |
+            |          |
+            x,y2-----x2,y2
+          ###
+          leftSpace = boundingBox.x
+          rightSpace = docW - boundingBox.x2
+
+          topSpace = boundingBox.y
+          bottomSpace = docH - boundingBox.y2
+
+          values = right: rightSpace, top: topSpace, bottom: bottomSpace
+
+          selectedPosition = 'left'
+          selectedValue = leftSpace
+          for k,v of values
+            if v > selectedValue
+              selectedValue = v
+              selectedPosition = k
+
+          finalPosition = selectedPosition
+        else
+          finalPosition = @position
+
+        switch finalPosition
+          when 'top'
+            @elm.css
+              top: (boundingBox.y - bubbleSize[1]) + "px"
+              left: boundingBox.x + Math.round((boundingBox.w-bubbleSize[0])/2) + "px"
+              'margin-top': '-14px'
+              'margin-left': '0px'
+          when 'bottom'
+            @elm.css
+              top: boundingBox.y2 + "px"
+              left: boundingBox.x + Math.round((boundingBox.w-bubbleSize[0])/2) + "px"
+              'margin-top': '14px'
+              'margin-left': '0px'
+          when 'right'
+            @elm.css
+              top: boundingBox.y + Math.round((boundingBox.h-bubbleSize[1])/2) + "px"
+              left: boundingBox.x2 + "px"
+              'margin-left': '14px'
+              'margin-top': '0px'
+          else
+            @position = 'left'
+            @elm.css
+              top: boundingBox.y + Math.round((boundingBox.h-bubbleSize[1])/2) + "px"
+              left: (boundingBox.x - bubbleSize[0]) + "px"
+              'margin-left': '-14px'
+              'margin-top': '0px'
+
+        #reset all pointer-* class and set the good one.
+        @elm.find('.ha-bubble-pointer').attr(class: 'ha-bubble-pointer').addClass("pointer-#{finalPosition}")
+
+        if @editMode
+          if @target
+            @control.find('.ha-bubble-position').val(@position || 'guess')
+          else
+            @control.find('.ha-bubble-position').val('free')
+
+          @control.find('.ha-bubble-selector').val(@target)
+
+        @elm.find('.ha-bubble-pointer').css display: 'block'
+
+        @targetArea.css
+          width: $(@target).outerWidth()
+          height: $(@target).outerHeight()
+          top: boundingBox.y
+          left: boundingBox.x
+          display: 'block'
+      else
+        @elm.css top: "#{@y}px", left: "#{@x}px"
+        @elm.find('.ha-bubble-pointer').css display: 'none'
+        @targetArea.css display: 'none'
+
+      return [@elm, @targetArea]
+
+    saveChanges: ->
+      HelpAnywhere.saveElement this
+
+
+    getData: ->
+      x: @x
+      y: @y
+      position: @position
+      width: @width
+      height: @height
+      target: @target
+      content: @content
+
+    ###
+      DRAG HANDLING
+    ###
+    handleMouseMove: (evt) ->
+      return unless @drag.hasStarted
+
+      drag_anchor = @drag.currentAnchor
+
+      decal = [
+        @drag.startOffset[X]-evt.pageX
+        @drag.startOffset[Y]-evt.pageY
+      ]
+
+      coords = [].concat @drag.startCoords
+
+      if ~drag_anchor.indexOf('x')
+        coords[LEFT] -= decal[X]
+        coords[TOP] -= decal[Y]
+      else
+        if ~drag_anchor.indexOf('n')
+          coords[TOP] -= decal[Y]
+          coords[HEIGHT] += decal[Y]
+        else if ~drag_anchor.indexOf('s')
+          coords[HEIGHT] -= decal[Y]
+
+        if ~drag_anchor.indexOf('e')
+          coords[WIDTH] -= decal[X]
+        else if ~drag_anchor.indexOf('w')
+          coords[LEFT] -= decal[X]
+          coords[WIDTH] += decal[X]
+
+      @x = coords[LEFT]
+      @y = coords[TOP]
+      @width = coords[WIDTH]
+      @height = coords[HEIGHT]
+
+      @refresh()
+
+    handleMouseUp: ->
+      if @drag.hasStarted
+        @drag.hasStarted = no
+        @saveChanges()
+
+    handleMouseDown: (evt) ->
+      @drag.hasStarted = yes
+
+      @drag.currentAnchor = $(evt.target).data('_position')
+
+      @drag.startOffset = [
+        evt.pageX
+        evt.pageY
+      ]
+
+      @drag.startCoords = [
+        @elm.position().left
+        @elm.position().top
+        @elm.width()
+        @elm.height()
+      ]
+
+    handleAnchorBehavior: (anchor) ->
+      drag_anchor = anchor.data('_position')
+
+      @handleMouseMoveInstance = @handleMouseMove.bind(this)
+      @handleMouseUpInstance = @handleMouseUp.bind(this)
+
+      $('body')
+      .on('mousemove', @handleMouseMoveInstance)
+      .on('mouseup', @handleMouseUpInstance)
+
+      anchor.on 'mousedown', @handleMouseDown.bind(this)
+
+    ###
+      END OF DRAG HANDLING
+    ###
+
+    remove: ->
+      $('body')
+      .off('mousemove', @handleMouseMoveInstance)
+      .off('mouseup', @handleMouseUpInstance)
+
+      @elm.remove()
+
+    buildEditMode:  ->
+      self = this
+      @anchors = {}
+
+      for position in ['ne', 'n', 'nw', 'w', 'sw', 's', 'se', 'e', 'x']
+        anchor = @anchors[position] = $("<div class='ha-bubble-anchor #{position}'>")
+        anchor.data('_position', position)
+
+        @elm.append anchor
+        @handleAnchorBehavior anchor
+
+      @control =  $(EDIT_TEMPLATE()).appendTo(@elm)
+
+      @control.find('.ha-bubble-position').on 'change', ->
+        self.position = $(this).val()
+        self.saveChanges()
+        self.refresh()
+
+      @control.find('.ha-bubble-selector').on 'change', ->
+        self.target = $(this).val()
+        self.saveChanges()
+        self.refresh()
+
+      @control.find('.ha-bubble-remove').on 'click', ->
+        HelpAnywhere.deleteItem(self)
+
+      content = @elm.find('.ha-bubble-content')
+
+      content
+      .attr('contenteditable', true)
+      .on 'focus', =>
+        # This test is a special case when user change focus from browser
+        if !content.data('_has_focus')
+          content.data('_has_focus', true)
+          #Get the html:
+          escapedHtml = content.text(content.html()).html()
+          #Replace the <br> by "\n"
+          # And &amp; by & (for &nbsp; for example)
+          escapedHtml = escapedHtml
+          .replace(/&lt;br&gt;/g, "<br>")
+          .replace(/&amp;/g, "&")
+          # Render the html, but keep the <br> correctly rendered
+          content.html(escapedHtml)
+      .on 'blur', =>
+        # This test is a special case when user change focus from browser
+        if content.data('_has_focus')
+          content.data('_has_focus', false)
+          content.html(
+            content.html()
+            .replace(/(<div>)(((?!<\/div>).)*)(<\/div>)/g, "<br>$2")
+            # We ignore the <br> before a markup
+            .replace(/<br>&lt;/g, '&nbsp;&lt;')
+            .replace(/&lt;/g, "<")
+            .replace(/&gt;/g, ">")
+            .replace(/&nbsp;/g, " ")
+            .replace("/&amp;/g", "&")
+          )
+          @content = content.html()
+
+        @saveChanges()
+
+  #Register generator to generators list
+  HelpAnywhere.Component.register('Bubble', Bubble)

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

@@ -0,0 +1,10 @@
+do($=jQuery) ->
+  class window.HelpAnywhere.Component
+    @register: (class_name, class_obj) -> HelpAnywhere.components[class_name] = class_obj
+
+    @_NEED_IMPLEMENTATION: (function_names...) ->
+      for function_name in function_names
+        @::[function_name] = ->
+          throw new Error("You must implement #{function_name}")
+
+    @_NEED_IMPLEMENTATION 'build', 'getData', 'blur', 'remove'