rdcms_tour 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f36c06633d8ff5d33d5e034e64ee002a488a089b
-  data.tar.gz: ca858a9d2dbb4d175047388144c109de8ca91de9
+  metadata.gz: de2a8633d83106c1f162c11b2711e82979ff4f29
+  data.tar.gz: bb77e6c8bcea96ad9d2ea828ff45b64498a6649e
 SHA512:
-  metadata.gz: 25d52bcc0af5af448b5ed0ff5fd97576739c9d9a1f6c6a502c92ce9b144bda4062fce384f12f76645197f2bf087bce344e7ba2ac66c85893c45fd5dc134aacdb
-  data.tar.gz: 3a5c3a862f24ad3351fac1fff29742c757ccb8888190b9f852d1d9a522d7c3cf4cf51d5c525377dd13663ad0ad3a655fca63cdf73fdc42e7968bc317539cab8f
+  metadata.gz: 15f5457f2785acd08e3b86fcd1a807c85c836bc566d6b561efdadb781207b2f48f952216b232e96c278cfe3affc118c171a439c20b0e7eda7982dd893134e2c8
+  data.tar.gz: 59a484dfda57c071271ed449898c5456598bcc323278fe1f1b4e73ce5ea468867a879cbe9186f42087c2079b53c5e98c066310feb446742f3ce0a1b91bccf0cb

data/README.md

@@ -18,6 +18,13 @@ ou instale-a diretamente execultando:
     gem install rdcms_tour
 
 
+adicione as rotas:
+
+    # config/routes.rb
+    resources :tours, :only => [:index, :show] do
+      resources :marcations
+    end
+
 instale as migrações:
 
     # $

data/app/assets/javascripts/{tours.js.coffee → tour/landscape.js.coffee}

@@ -41,12 +41,12 @@ jQuery ->
       currentPosition = 0 - parseInt(_panorama.css("margin-left"))
 
       if _settings.direction is "right"
-        _panorama.animate marginLeft: 0 , ((_settings.speed / _settings.imageSizes.clientWidth) * (currentPosition)), "linear", ->
+        _panorama.animate marginLeft: 0 , ((_settings.speed / _settings.imageSizes["width"]) * (currentPosition)), "linear", ->
           if _settings.mode_360
-            _panorama.css "marginLeft", "-#{parseInt(_settings.imageSizes.clientWidth)}px"
+            _panorama.css "marginLeft", "-#{parseInt(_settings.imageSizes["width"])}px"
             tour_animate()
       else
-        rightlimit = if _settings.mode_360 then _settings.imageSizes.clientWidth else (_settings.imageSizes.clientWidth - _settings.viewport_width)
+        rightlimit = if _settings.mode_360 then _settings.imageSizes["width"] else (_settings.imageSizes["width"] - _settings.viewport_width)
 
         _panorama.animate
           marginLeft: -rightlimit
@@ -164,8 +164,17 @@ jQuery ->
     rtRender = (element, panoramaViewport) ->
       _t = element
 
+      _settings.imageSizes = {}
+      $.each "naturalHeight naturalWidth".split(' '), (ix, val) ->
+        _settings.imageSizes[val] = element[0][val]
+
+      _settings.imageSizes["height"] = _settings.viewSize["height"]
+      _settings.imageSizes["width"] = Math.round (_settings.imageSizes["height"] / _settings.imageSizes["naturalHeight"]) * _settings.imageSizes["naturalWidth"]
+
+      element = element.addClass("markregion-image").wrap("""<div />""").parent()
+
       element
-        .addClass("rtObject")
+        .addClass("rtObject markregion")
         .attr("unselectable", "on")
         .css
           position: "relative"
@@ -174,20 +183,26 @@ jQuery ->
           margin: "0"
           padding: "0"
           border: "none"
-          height: "#{panoramaViewport.innerHeight()}px"
-        .wrap "<div class='rtContainer' style='width: #{element[0].naturalWidth}px;'></div>"
+          height: "#{_settings.imageSizes["height"]}px"
+          width: "#{_settings.imageSizes["width"]}px"
+        .wrap "<div class='rtContainer' />"
+        # .wrap "<div class='rtContainer' style='width: #{_settings.imageSizes["width"]}px;'></div>"
 
-      _settings.imageSizes = {}
-      $.each "clientHeight clientWidth naturalHeight naturalWidth".split(' '), (ix, val) ->
-        _settings.imageSizes[val] = element[0][val]
+      # carrega as marcações
+      regions = element.markregion(
+        path: _settings.path
+        locale: _settings.locale
+        editable: _settings.editable
+        )
 
-      element.clone().insertAfter element  if _settings.mode_360
+      element.on "markregion-create", (ev) ->
+        element.clone().insertAfter element  if _settings.mode_360
 
       _panorama = element.parent()
         .css
-          width: ((_settings.imageSizes.clientWidth * 2) + (_settings.imageSizes.clientWidth * 0.02))
+          width: ((_settings.imageSizes["width"] * 2) + (_settings.imageSizes["width"] * 0.02))
           overflow: "hidden"
-        .append("<div class=\"overlay-block\"></div>")
+        # .append("<div class=\"overlay-block\"></div>")
         .appendTo(panoramaViewport)
 
 
@@ -195,27 +210,32 @@ jQuery ->
       bMouseMove      = false
       mouseMoveStart  = 0
 
-      panoramaViewport
+      # panoramaViewport
+      _panorama
         .mousedown (e) ->
           unless bMouseMove
             bMouseMove = true
             mouseMoveStart = e.clientX
+            $.mouseMoving = true
           false
         .mouseup ->
           bMouseMove = false
           mouseMoveStart = 0
+          $.mouseMoving = false
           false
         .mousemove (e) ->
           if bMouseMove
+            # console.debug "mousemove", e
             delta = parseInt((mouseMoveStart - e.clientX) / 30)
+            # console.debug "delta", delta
             if (delta > 10) or (delta < 10)
               newMarginLeft = parseInt(_panorama.css("marginLeft")) - (delta)
               if _settings.mode_360
-                newMarginLeft = -_settings.imageSizes.clientWidth  if newMarginLeft > 0
-                newMarginLeft = 0  if newMarginLeft < -_settings.imageSizes.clientWidth
+                newMarginLeft = -_settings.imageSizes["width"]  if newMarginLeft > 0
+                newMarginLeft = 0  if newMarginLeft < -_settings.imageSizes["width"]
               else
                 newMarginLeft = 0  if newMarginLeft > 0
-                newMarginLeft = -_settings.imageSizes.clientWidth  if newMarginLeft < -_settings.imageSizes.clientWidth
+                newMarginLeft = -_settings.imageSizes["width"]  if newMarginLeft < -_settings.imageSizes["width"]
               _panorama.css "marginLeft", newMarginLeft + "px"
 
       _panorama.css "margin-left": "-#{_settings.start_position}px"
@@ -226,6 +246,28 @@ jQuery ->
 
       move("start") if _settings.auto_start
 
+    initAnnotate = (element) ->
+      $(".annotate-image").annotateImage
+        useAjax: false
+        notes: [
+          top: 286
+          left: 161
+          width: 30
+          height: 30
+          text: "Small people on the steps"
+          id: "e69213d0-2eef-40fa-a04b-0ed998f9f1f5"
+          editable: false
+        ,
+          top: 134
+          left: 179
+          width: 30
+          height: 30
+          text: "National Gallery Dome"
+          id: "e7f44ac5-bcf2-412d-b440-6dbb8b19ffbe"
+          editable: true
+        ]
+
+
     @each ->
       _element = _t = $(this)
 

data/app/assets/javascripts/tour/rd.markregion.js.coffee

@@ -0,0 +1,203 @@
+###
+@File : rd.markregion.js.coffee
+@version : 0.5.0
+@description : Cria marcação para tour virtual
+@language : PT-BR Charset: UTF-8
+@date : Sex Jul 19 14:54:00 AMT 2013
+
+@package : RDCMS Tour
+
+@author : Gullit Miranda <gullitmiranda@requestdev.com.br>
+
+@copyright © RequestDev Sistemas 2011-2013, all right reserved.
+http://www.requestdev.com.br
+###
+
+jQuery ->
+  markregion =
+    # Marcadores
+    marcations: []
+
+    # Configurações padrão
+    defaults:
+      editable: false
+      resizable: false
+
+      # Urls para ajax
+      path: null
+
+    init: (obj, options) ->
+      self = @
+      @element = obj
+
+      @options = options = $.extend(true, {}, @defaults, options)
+
+      # remove localização
+      # @options.path = @options.path.replace(RegExp("^\/#{@options.locale}"), "") if @options.locale
+
+      if (@element.get(0).tagName == "IMG" or !@element.hasClass("markregion"))
+        @element = @element.wrap("<div class=\"markregion\" />").parent()
+
+
+      @image  = @element.children(".markregion-image")
+      @view   = $('<div class="markregion-view"       />').appendTo(@element)
+      @modal  = $("""
+        <div id="markregion-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+          <div class="modal-body">
+          </div>
+        </div>""").appendTo(@element)
+
+      ###
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+            <h3 id="myModalLabel">Editar Marcação</h3>
+          </div>
+          <div class="modal-footer">
+            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+            <button class="btn btn-primary">Save changes</button>
+          </div>
+      ###
+
+      @edit   = $(""" <div class="markregion-edit">
+                        <div class="markregion-edit-area"  />
+                      </div>""").appendTo(@element)
+
+
+      @sizes=
+        naturalWidth:   @image[0].naturalWidth
+        naturalHeight:  @image[0].naturalHeight
+        height: @element.height()
+        width: @element.width()
+
+
+      @element.parent().off ".markregion"
+
+      @element.parent().on("click.markregion", ".markregion", (ev) ->
+        if $(ev.target).hasClass("markregion-view")
+          parentOffset = $(@).parent().offset();
+          # or $(this).offset(); if you really just want the current element's offset
+          positions =
+            relX : ev.pageX - parentOffset.left
+            relY : ev.pageY - parentOffset.top
+
+          size_range = self.sizes.naturalHeight / self.sizes.height
+
+          naturalPositions =
+            relX : Math.round positions.relX * size_range
+            relY : Math.round positions.relY * size_range
+
+          marcation =
+            left: naturalPositions.relX
+            top: naturalPositions.relY
+
+          self.renderMarcations marcation, "new"
+        ) if @options.editable
+
+
+      @element.parent().on "mouseenter.markregion", ".markregion", (ev) ->
+        $(".markregion-view", ev.delegateTarget).show() if $(".markregion-edit", ev.delegateTarget).css("display") is "none"
+      @element.parent().on "mouseleave.markregion", ".markregion", (ev) ->
+        $(".markregion-view", ev.delegateTarget).hide()
+
+      @load()
+      self
+
+
+    # Carrega as marcações
+    load: ->
+      return false unless @options.path
+      $.getJSON @options.path.index, (data) =>
+        @marcations = data
+        @renderMarcations()
+
+    # Renderiza as marcações
+    renderMarcations: (marcation, action) ->
+      self = @
+      marcations = if marcation then [marcation] else @marcations
+      action = action || "edit"
+      $.each marcations, (i) ->
+        marcation = @
+
+        if action is "new"
+          params = $.param(marcation: marcation, false)
+          path = "#{self.options.path.new}?#{params}"
+        else
+          path = @path.edit
+
+        # definendo o posicionamento
+        @positions= if self.image.length
+          left: (@left * self.sizes.width) / self.sizes.naturalWidth
+          top: (@top * self.sizes.height) / self.sizes.naturalHeight
+        else
+          left: @left
+          top: @top
+
+        # Caso a marcação já exista remove-la
+        exist_marcation = $("#{@id}.markregion-area, .markregion-area.markregion-area-new")
+        exist_marcation.remove() if exist_marcation.length
+
+        modal_link = $(if self.options.editable then """<a href="#{path}" role="button" data-target="#markregion-modal" />""" else "<span />")
+
+        modal_link
+          .addClass("markregion-modal-link")
+          .append("""<i class="icon-search" />""")
+
+        area = $("""
+          <div />""")
+          .attr("id", @id)
+          .addClass("markregion-area #{"markregion-area-new" unless @id}")
+          .append(modal_link)
+            # <a href="#{@path.edit}" class="markregion-modal-link" role="button" data-toggle="modal" data-target="#markregion-modal"><i class="icon-search" /> </a>
+          .appendTo(self.view)
+          .css
+            left: @positions.left
+            top: @positions.top
+
+        link = $("""<div id=\"#{@id}\" class=\"markregion-note\"><a href=\"#{@url || ""}\" target="_blank" >#{@body}</a></div>""")
+          .appendTo(area)
+
+
+        # se for editável, ao clicar no icone cria o form
+        modal_link = area.children(".markregion-modal-link").click( (ev) ->
+          ev.preventDefault()
+          self.formMarcation("#{action}", $(@), marcation)
+          ) if self.options.editable
+
+        modal_link.trigger("click") if action is "new" and modal_link.length
+
+        # Execulta o evento de pós criação
+        self.element.trigger("markregion-create", marcation)
+
+    # Edição da maracção
+    formMarcation: (action, link, marcation) ->
+      return false unless marcation
+      self = @
+      modal = $(link.data("target")).load link.prop("href"), (data) ->
+        $this = $(this)
+
+        form = $("form:first", $this).on "submit", (ev) ->
+          ev.preventDefault()
+          $.ajax
+            type: form.attr("method") || "PUT"
+            url: form.attr("action")
+            data: form.serialize()
+            dataType: "json"
+          .done (data, status) ->
+            self.renderMarcations(data)
+            $this.modal("hide")
+          # .fail (data, status) ->
+          #   console.debug status, data
+
+          $("#markregion-modal").modal("hide");
+
+        $this.modal("show")
+
+        # fixbug firefox focus
+        $("input", $this).on "click", ((ev) -> $(this).select() )
+      @
+
+
+  $.fn.markregion = (options) ->
+    @each ->
+      markregion.init $(this), options
+

data/app/assets/javascripts/tours.js

@@ -0,0 +1,2 @@
+//= require tour/rd.markregion
+//= require tour/landscape

data/app/assets/stylesheets/tours/landscape.css.scss

@@ -0,0 +1,219 @@
+.requestTour {
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+
+  .rtOverlayContainer {
+    z-index: 1010;
+
+    &,
+    .rtOverlay,
+    .rtLoading {
+      position: absolute;
+    }
+
+    &, .rtOverlay {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    .rtOverlay {
+      background: #000;
+      opacity: .9;
+    }
+    .rtLoading {
+      $bs: 0 1px 3px rgba(255, 255, 255, 0.5);
+      $br: 10px;
+      $size: 138px;
+
+      background: url('loading.gif') no-repeat 50% 50% scroll #000;
+      width: $size;
+      height: $size;
+      top: 50%;
+      left: 50%;
+      margin-top: -($size + $br)/2;
+      margin-left: -($size + $br)/2;
+      padding: $br 0 0 $br;
+
+      -webkit-border-radius: $br;
+         -moz-border-radius: $br;
+              border-radius: $br;
+      -webkit-box-shadow: $bs;
+         -moz-box-shadow: $bs;
+              box-shadow: $bs;
+    }
+  }
+
+  .rtContainer {
+    position: relative;
+    // width: 100%;
+    width: 100000px;
+    margin: 0;
+    padding: 0;
+
+    .rtObject {
+      // position: relative;
+      margin: 0;
+      padding: 0;
+      border: none;
+      // top: 0;
+      // bottom: 0;
+      display: inline-block;
+      img {
+        // width: 100%;
+        height: 100%;
+        max-width: none;
+        // width: auto;
+      }
+    }
+    .rtArea {
+      border: 2px solid white;
+      filter: alpha(opacity=20);
+      opacity: .2;
+      background: black;
+      font-size: 100%;
+      cursor: pointer;
+      text-decoration: none;
+      color: white;
+      text-align: right;
+
+      &:hover {
+        background: #0080e2;
+        cursor: pointer;
+      }
+    }
+  }
+
+  /* Button Sprite */
+  .rtArrowIcn,
+  .rtBigButtonIcn {
+    position: absolute;
+    cursor: pointer;
+    background: url('rdcms/sliders/sprite.png');
+    background-color: rgba(0,0,0,0.75);
+    *background-color: #111;
+
+    &:hover { background-color: rgba(0,0,0,0.9); }
+  }
+  /* Arrow */
+  .rtArrow {
+    height: 100%;
+    width: 44px;
+    position: absolute;
+    display: block;
+    cursor: pointer;
+    z-index: 21;
+
+    opacity: 1;
+    -webkit-transition:opacity 0.3s linear;
+       -moz-transition:opacity 0.3s linear;
+         -o-transition:opacity 0.3s linear;
+            transition:opacity 0.3s linear;
+    .rtArrowIcn {
+      width: 32px;
+      height: 32px;
+      top: 50%;
+      left: 50%;
+      margin-top:-16px;
+      margin-left: -16px;
+
+
+      border-radius: 2px;
+    }
+  }
+
+  /* Arrow > Horizontal [Default] */
+  &.rtHor {
+    .rtArrowLeft { top: 0; left: 0; }
+    .rtArrowRight { top:0; right: 0; }
+    .rtArrowLeft  .rtArrowIcn { background-position: -64px -32px; }
+    .rtArrowRight .rtArrowIcn { background-position: -64px -64px; }
+  }
+
+  /* Arrow > Vertical */
+  &.rtVer {
+    .rtArrow { width: 100%; height: 44px; }
+    .rtArrowLeft  { top: 0; left: 0; }
+    .rtArrowRight { bottom: 0;  left: 0; }
+    .rtArrowLeft  .rtArrowIcn { background-position: -96px -32px; }
+    .rtArrowRight .rtArrowIcn { background-position: -96px -64px; }
+  }
+
+  /* Botões de Navegação */
+  .rtBtnNavContainer {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    height: 50px;
+    z-index: 2000;
+
+    .rtBigButton {
+      $bigButtonSize: 40px;
+      width: $bigButtonSize;
+      height: $bigButtonSize;
+      z-index: 22;
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+
+      .rtBigButtonIcn {
+        width: $bigButtonSize;
+        height: $bigButtonSize;
+        top: 50%;
+        left: 50%;
+        margin-top: -22px;
+        margin-left: -22px;
+        border-radius: 4px;
+      }
+    }
+
+    .rtFullscreen     .rtBigButtonIcn { background-position: 4px 5px; }
+    .rtDefaultscreen  .rtBigButtonIcn { background-position: -28px 5px; }
+    .rtPlayBtn        .rtBigButtonIcn { background-position: -13px -44px; }
+    .rtPauseBtn       .rtBigButtonIcn { background-position: -57px -99px; }
+  }
+
+  /* Desabilitado */
+  .rtArrowDisabled .rtArrowIcn { background-color: rgba(0,0,0,0.4); opacity: .4; *display: none; }
+
+  /* Ocultar */
+  .rtHidden {
+    opacity: 0;
+    visibility: hidden;
+    -webkit-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
+       -moz-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
+         -o-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
+            transition:visibility 0s linear 0.3s,opacity 0.3s linear;
+  }
+  /* Fullscreen options, very important ^^ */
+  &.rtFullscreen {
+    position: fixed !important;
+    height: auto !important;
+    width: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    z-index: 2147483647 !important;
+    top: 0 !important;
+    left: 0 !important;
+    bottom: 0 !important;
+    right: 0 !important;
+  }
+}
+.rtWebkit3d {
+  .rtViewport,
+  .rtContainer,
+  .rtPreloader,
+  img,
+  .rtArrow,
+  .rtControllerToobar {
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: translateZ(0);
+  }
+  .rtFade .rtSlide,
+  .rtFade img,
+  .rtFade .rtContainer {
+    -webkit-transform: none;
+  }
+}

data/app/assets/stylesheets/tours/markregion.css.scss

@@ -0,0 +1,75 @@
+.markregion {
+  position: relative;
+
+  .markregion-view {
+    display: none;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+  }
+  .markregion-area {
+    position: absolute;
+
+    i {
+      color: #f5f5f5;
+      font-size: 24px;
+    }
+
+    .markregion-note {
+      background: #E7FFE7 none repeat scroll 0 0;
+      border: solid 1px #397F39;
+      color: #000;
+      display: none;
+      font-family: Verdana, Sans-Serif;
+      font-size: 12px;
+      // max-width: 200px;
+      padding: 3px 7px;
+      // position: absolute;
+
+      .actions {
+        display: block;
+        font-size: 80%;
+      }
+    }
+
+    &:hover .markregion-note { display: block; }
+
+    // div {
+    //   border: 2px solid rgba(255, 255, 255, 0.8);
+    //   display: block;
+    //   width: 30px;
+    //   height: 30px;
+    // }
+  }
+  .markregion-area-editable {
+    cursor: pointer;
+  }
+  .markregion-edit {
+    display: none;
+  }
+
+  // &:hover {
+  //   .markregion-view { display: block; }
+  // }
+}
+/* Form de edição */
+.markregion-edit-form {
+  background: #FFFEE3 none repeat scroll 0 0;
+  border: 1px solid #f5f5f5;
+  // height: 78px;
+  padding: 7px;
+  position: absolute;
+  width: 250px;
+
+  form {
+    clear: right;
+    margin: 0 !important;
+    padding: 0;
+    z-index: 999;
+  }
+
+  .box { margin: 0; }
+}

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

@@ -1,212 +1,5 @@
-.requestTour {
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
-  text-align: left;
-
-  .rtOverlayContainer {
-    z-index: 1010;
-
-    &,
-    .rtOverlay,
-    .rtLoading {
-      position: absolute;
-    }
-
-    &, .rtOverlay {
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-    .rtOverlay {
-      background: #000;
-      opacity: .9;
-    }
-    .rtLoading {
-      $bs: 0 1px 3px rgba(255, 255, 255, 0.5);
-      $br: 10px;
-      $size: 138px;
-
-      background: url('loading.gif') no-repeat 50% 50% scroll #000;
-      width: $size;
-      height: $size;
-      top: 50%;
-      left: 50%;
-      margin-top: -($size + $br)/2;
-      margin-left: -($size + $br)/2;
-      padding: $br 0 0 $br;
-
-      -webkit-border-radius: $br;
-         -moz-border-radius: $br;
-              border-radius: $br;
-      -webkit-box-shadow: $bs;
-         -moz-box-shadow: $bs;
-              box-shadow: $bs;
-    }
-  }
-
-  .rtContainer {
-    position: relative;
-    // width: 100%;
-    width: 100000px;
-    margin: 0;
-    padding: 0;
-
-    .rtObject {
-      position: relative;
-      margin: 0;
-      padding: 0;
-      border: none;
-      top: 0;
-      bottom: 0;
-    }
-    .rtArea {
-      border: 2px solid white;
-      filter: alpha(opacity=20);
-      opacity: .2;
-      background: black;
-      font-size: 100%;
-      cursor: pointer;
-      text-decoration: none;
-      color: white;
-      text-align: right;
-
-      &:hover {
-        background: #0080e2;
-        cursor: pointer;
-      }
-    }
-  }
-
-  /* Button Sprite */
-  .rtArrowIcn,
-  .rtBigButtonIcn {
-    position: absolute;
-    cursor: pointer;
-    background: url('rdcms/sliders/sprite.png');
-    background-color: rgba(0,0,0,0.75);
-    *background-color: #111;
-
-    &:hover { background-color: rgba(0,0,0,0.9); }
-  }
-  /* Arrow */
-  .rtArrow {
-    height: 100%;
-    width: 44px;
-    position: absolute;
-    display: block;
-    cursor: pointer;
-    z-index: 21;
-
-    opacity: 1;
-    -webkit-transition:opacity 0.3s linear;
-       -moz-transition:opacity 0.3s linear;
-         -o-transition:opacity 0.3s linear;
-            transition:opacity 0.3s linear;
-    .rtArrowIcn {
-      width: 32px;
-      height: 32px;
-      top: 50%;
-      left: 50%;
-      margin-top:-16px;
-      margin-left: -16px;
-
-
-      border-radius: 2px;
-    }
-  }
-
-  /* Arrow > Horizontal [Default] */
-  &.rtHor {
-    .rtArrowLeft { top: 0; left: 0; }
-    .rtArrowRight { top:0; right: 0; }
-    .rtArrowLeft  .rtArrowIcn { background-position: -64px -32px; }
-    .rtArrowRight .rtArrowIcn { background-position: -64px -64px; }
-  }
-
-  /* Arrow > Vertical */
-  &.rtVer {
-    .rtArrow { width: 100%; height: 44px; }
-    .rtArrowLeft  { top: 0; left: 0; }
-    .rtArrowRight { bottom: 0;  left: 0; }
-    .rtArrowLeft  .rtArrowIcn { background-position: -96px -32px; }
-    .rtArrowRight .rtArrowIcn { background-position: -96px -64px; }
-  }
-
-  /* Botões de Navegação */
-  .rtBtnNavContainer {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    height: 50px;
-    z-index: 2000;
-
-    .rtBigButton {
-      $bigButtonSize: 40px;
-      width: $bigButtonSize;
-      height: $bigButtonSize;
-      z-index: 22;
-      display: inline-block;
-      position: relative;
-      cursor: pointer;
-
-      .rtBigButtonIcn {
-        width: $bigButtonSize;
-        height: $bigButtonSize;
-        top: 50%;
-        left: 50%;
-        margin-top: -22px;
-        margin-left: -22px;
-        border-radius: 4px;
-      }
-    }
-
-    .rtFullscreen     .rtBigButtonIcn { background-position: 4px 5px; }
-    .rtDefaultscreen  .rtBigButtonIcn { background-position: -28px 5px; }
-    .rtPlayBtn        .rtBigButtonIcn { background-position: -13px -44px; }
-    .rtPauseBtn       .rtBigButtonIcn { background-position: -57px -99px; }
-  }
-
-  /* Desabilitado */
-  .rtArrowDisabled .rtArrowIcn { background-color: rgba(0,0,0,0.4); opacity: .4; *display: none; }
-
-  /* Ocultar */
-  .rtHidden {
-    opacity: 0;
-    visibility: hidden;
-    -webkit-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
-       -moz-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
-         -o-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
-            transition:visibility 0s linear 0.3s,opacity 0.3s linear;
-  }
-  /* Fullscreen options, very important ^^ */
-  &.rtFullscreen {
-    position: fixed !important;
-    height: auto !important;
-    width: auto !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    z-index: 2147483647 !important;
-    top: 0 !important;
-    left: 0 !important;
-    bottom: 0 !important;
-    right: 0 !important;
-  }
-}
-.rtWebkit3d {
-  .rtViewport,
-  .rtContainer,
-  .rtPreloader,
-  img,
-  .rtArrow,
-  .rtControllerToobar {
-    -webkit-backface-visibility: hidden;
-    -webkit-transform: translateZ(0);
-  }
-  .rtFade .rtSlide,
-  .rtFade img,
-  .rtFade .rtContainer {
-    -webkit-transform: none;
-  }
+body,
+body.active_admin {
+  @import "tours/markregion";
+  @import "tours/landscape";
 }

data/app/controllers/marcations_controller.rb

@@ -0,0 +1,70 @@
+class MarcationsController < ApplicationController
+  before_filter :load_tour
+  load_and_authorize_resource
+  respond_to :html, :json, :js
+
+  # GET /marcations
+  # GET /marcations.json
+  def index
+    @marcations = @tour.marcations
+    respond_with @marcations
+  end
+
+  # GET /marcations/1
+  # GET /marcations/1.json
+  def show
+    @marcation = @tour.marcations.find(params[:id])
+    respond_with @marcation
+  end
+
+  # GET /marcations/new
+  # GET /marcations/new.json
+  def new
+    @marcation = @tour.marcations.create params[:marcation]
+    respond_with @marcation
+  end
+
+  # GET /marcations/1/edit
+  def edit
+    @marcation = @tour.marcations.find(params[:id])
+    respond_with @marcation
+  end
+
+  # POST /marcations
+  # POST /marcations.json
+  def create
+    @marcation = @tour.marcations.create(params[:marcation])
+    # if @marcation.save
+    #   flash[:notice] = "Marcation was successfully created."
+    # end
+    respond_with @marcation
+  end
+
+  # PUT /marcations/1
+  # PUT /marcations/1.json
+  def update
+    @marcation = @tour.marcations.find(params[:id])
+
+    if @marcation.update_attributes(params[:marcation])
+      flash[:notice] = "Marcation was successfully updated."
+    end
+    respond_with @marcation
+    # respond_with @marcation do |format|
+    #   format.json { render json: @marcation }
+    # end
+  end
+
+  # DELETE /marcations/1
+  # DELETE /marcations/1.json
+  def destroy
+    @marcation = @tour.marcations.find(params[:id])
+    @marcation.destroy
+    # flash[:notice] = "Marcation was successfully destroyed."
+    respond_with @marcation
+  end
+
+  private
+  def load_tour
+    @tour = Tour.find params[:tour_id]
+  end
+end

data/app/models/marcation.rb

@@ -0,0 +1,38 @@
+class Marcation < ActiveRecord::Base
+  extend ActiveModel::Naming
+
+  belongs_to :tour
+  attr_accessible :body, :left, :top, :url,
+    # I18n
+    :locale, :translations_attributes
+
+  # Translate
+  translates :body, :url
+  accepts_nested_attributes_for :translations
+
+  class Translation
+    attr_accessible :locale, :body, :url
+  end
+  def translations_attributes=(attributes)
+    new_translations = attributes.values.reduce({}) do |new_values, translation|
+      new_values.merge! translation.delete("locale") => translation
+    end
+    set_translations new_translations
+  end
+
+
+  include Rails.application.routes.url_helpers
+  # include ActionView::Helpers::NumberHelper
+
+  def as_json options
+    # if can? :update, self
+      super.merge!(
+        path: {
+          show: tour_marcation_path(self.tour, self),
+          edit: edit_tour_marcation_path(self.tour, self)
+        })
+    # else
+    #   super
+    # end
+  end
+end

data/app/models/tour.rb

@@ -7,6 +7,8 @@ class Tour < ActiveRecord::Base
   # Taggings
   acts_as_taggable
 
+  has_many :marcations
+
   has_attached_file :tour,
                     :styles => {
                       :thumb      => "560x180#"

data/app/views/admin/tours/_show.html.erb

@@ -38,4 +38,40 @@
       <%= s.body.html_safe if s.body %>
     </div>
   </div>
+
+  <script type="text/javascript" charset="utf-8">
+    var Tour_labels = {
+      index         : '<%= I18n.t "attributes_all.index" %>',
+      rotate_left   : '<%= I18n.t "attributes_all.rotate_left" %>',
+      rotate_right  : '<%= I18n.t "attributes_all.rotate_right" %>',
+      play_stop     : '<%= I18n.t "attributes_all.play_stop" %>',
+      zoom          : '<%= I18n.t "attributes_all.zoom" %>',
+    };
+  </script>
+
+  <%= stylesheet_link_tag    "tours" %>
+  <%= javascript_include_tag "tours" %>
+
+  <script language="javascript">
+    $(window).load(function() {
+      $(".annotate-image").annotateImage({
+          useAjax: false
+        , editable: true
+        , notes: [ { "top": 286,
+               "left": 161,
+               "width": 30,
+               "height": 30,
+               "text": "Small people on the steps",
+               "id": "e69213d0-2eef-40fa-a04b-0ed998f9f1f5",
+               "editable": false },
+             { "top": 134,
+               "left": 179,
+               "width": 30,
+               "height": 30,
+               "text": "National Gallery Dome",
+               "id": "e7f44ac5-bcf2-412d-b440-6dbb8b19ffbe",
+               "editable": true } ]
+      });
+    });
+  </script>
 </div>

data/app/views/marcations/_form.html.erb

@@ -0,0 +1,34 @@
+<%= form_for [@tour, @marcation], html: { class: "form-horizontal " } do |f| %>
+  <div class="modal-body">
+    <% if @marcation.errors.any? %>
+      <div id="error_explanation">
+        <h2><%= pluralize(@marcation.errors.count, "error") %> prohibited this marcation from being saved:</h2>
+
+        <ul>
+        <% @marcation.errors.full_messages.each do |msg| %>
+          <li><%= msg %></li>
+        <% end %>
+        </ul>
+      </div>
+    <% end %>
+    <div class="hidden">
+      <%= f.hidden_field :top %>
+      <%= f.hidden_field :left %>
+    </div>
+
+    <%= f.globalize_inputs :translations do |lf| %>
+      <div class="control-group">
+        <%= lf.text_field :body, class: 'text_field', placeholder: t(".body") %>
+      </div>
+      <div class="control-group">
+        <%= lf.text_field :url, class: 'text_field', placeholder: t(".url") %>
+      </div>
+      <%= lf.hidden_field :locale %>
+    <% end %>
+
+    <div class="actions">
+      <%= f.button t(".save"), type: :submit, class: "btn btn-primary" %>
+      <%= link_to t('.delete'), tour_marcation_path(@tour, @marcation), method: :delete, remote: true, class: "btn btn-danger" %>
+    </div>
+  </div>
+<% end %>

data/app/views/marcations/create.js.erb

@@ -0,0 +1 @@
+$("#markregion-modal").modal("hide");

data/app/views/marcations/destroy.js.erb

@@ -0,0 +1,2 @@
+$("#<%= @marcation.id %>.markregion-area, .markregion-area.markregion-area-new").remove();
+$("#markregion-modal").modal("hide");

data/app/views/marcations/edit.html.erb

@@ -0,0 +1 @@
+<%= render 'form' %>

data/app/views/marcations/new.html.erb

@@ -0,0 +1 @@
+<%= render 'form' %>

data/app/views/tours/show.html.erb

@@ -4,7 +4,7 @@
   <%= link_to "<span class=\"icon-back\" aria-hidden=\"true\"></span>".html_safe, tours_path, class: "BigButton fade in btnBack", rel: "tooltip", title: I18n.t("back") %>
 <% end -%>
 
-<%= image_tag @tour.tour, class: "panorama" %>
+<%= image_tag @tour.tour, class: "panorama", alt: "" %>
 
 <script type="text/javascript" charset="utf-8">
   var Tour_labels = {
@@ -23,14 +23,21 @@
   $(function () {
     // Initialize the jQuery File Upload widget:
     tour = $(".panorama").tour({
-      navBarContainer: "footer .navbar:first > .navbar-inner > .container",
-      data_placement: "top",
-      <%= "speed            : #{@tour.speed},".html_safe            if defined?(@tour.speed           ) %>
-      <%= "direction        : '#{@tour.direction}',".html_safe      if defined?(@tour.direction       ) %>
-      <%= "control_display  : #{@tour.control_display},".html_safe  if defined?(@tour.control_display ) %>
-      <%= "start_position   : #{@tour.start_position},".html_safe   if defined?(@tour.start_position  ) %>
-      <%= "auto_start       : #{@tour.auto_start},".html_safe       if defined?(@tour.auto_start      ) %>
-      <%= "mode_360         : #{@tour.loop},".html_safe             if defined?(@tour.loop            ) %>
+        navBarContainer: "footer .navbar:first > .navbar-inner > .container"
+      , data_placement: "top"
+      , path: {
+            index : "<%= tour_marcations_path(@tour) %>"
+          <%= ", new   : '#{new_tour_marcation_path(@tour)}'".html_safe if can?(:create, Marcation) %>
+        }
+      , locale: "<%= I18n.locale %>"
+      <%= ", editable         : #{can?(:update, @tour)}".html_safe %>
+      <%#= ", editable         : #{user_signed_in?}".html_safe %>
+      <%= ", speed            : #{@tour.speed}".html_safe            if defined?(@tour.speed           ) %>
+      <%= ", direction        : '#{@tour.direction}'".html_safe      if defined?(@tour.direction       ) %>
+      <%= ", control_display  : #{@tour.control_display}".html_safe  if defined?(@tour.control_display ) %>
+      <%= ", start_position   : #{@tour.start_position}".html_safe   if defined?(@tour.start_position  ) %>
+      <%= ", auto_start       : #{@tour.auto_start}".html_safe       if defined?(@tour.auto_start      ) %>
+      <%= ", mode_360         : #{@tour.loop}".html_safe             if defined?(@tour.loop            ) %>
     });
   });
 </script>

data/db/migrate/20130603134344_create_tours.rb

@@ -1,5 +1,5 @@
 class CreateTours < ActiveRecord::Migration
-  def change
+  def up
     create_table :tours do |t|
       t.string :slug
       t.string :name

data/db/migrate/20130720154434_create_marcations.rb

@@ -0,0 +1,21 @@
+class CreateMarcations < ActiveRecord::Migration
+  def up
+    create_table :marcations do |t|
+      t.belongs_to :tour
+      t.integer :top
+      t.integer :left
+      t.string :body
+      t.text :url
+
+      t.timestamps
+    end
+    add_index :marcations, :tour_id
+
+    Marcation.create_translation_table! :body => :string, :url => :text
+  end
+
+  def dow
+    drop_table :marcations
+    Marcation.drop_translation_table!
+  end
+end

data/lib/rdcms_tour/version.rb

@@ -1,3 +1,3 @@
 module RdcmsTour
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rdcms_tour
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Gullit Miranda
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-06-03 00:00:00.000000000 Z
+date: 2013-08-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -66,15 +66,27 @@ files:
 - README.md
 - Rakefile
 - admin/tours.rb
-- app/assets/javascripts/tours.js.coffee
+- app/assets/javascripts/tour/landscape.js.coffee
+- app/assets/javascripts/tour/rd.markregion.js.coffee
+- app/assets/javascripts/tours.js
 - app/assets/stylesheets/tours.css.scss
+- app/assets/stylesheets/tours/landscape.css.scss
+- app/assets/stylesheets/tours/markregion.css.scss
+- app/controllers/marcations_controller.rb
 - app/controllers/tours_controller.rb
+- app/models/marcation.rb
 - app/models/tour.rb
 - app/views/admin/tours/_form.html.erb
 - app/views/admin/tours/_show.html.erb
+- app/views/marcations/_form.html.erb
+- app/views/marcations/create.js.erb
+- app/views/marcations/destroy.js.erb
+- app/views/marcations/edit.html.erb
+- app/views/marcations/new.html.erb
 - app/views/tours/index.html.erb
 - app/views/tours/show.html.erb
 - db/migrate/20130603134344_create_tours.rb
+- db/migrate/20130720154434_create_marcations.rb
 - lib/rdcms_tour.rb
 - lib/rdcms_tour/engine.rb
 - lib/rdcms_tour/version.rb
@@ -100,7 +112,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.2
+rubygems_version: 2.0.3
 signing_key: 
 specification_version: 4
 summary: Módulo de Panorâmas para o RDCMS