add content to sub unit

app/assets/stylesheets/space-frontend.scss

@@ -27,7 +27,7 @@
     top: 50%;
     height: 100%;
     margin: auto;
-
+    width: 100%;
     // overflow: hidden;
     transform: translate(-50%, -50%);
   }

app/models/floor_sub_unit.rb

@@ -4,7 +4,7 @@ class FloorSubUnit
 	include Slug
 
 	field :title, as: :slug_title, localize: true
-
+  field :content, localize: true
 	has_many :floor_sub_unit_images, :autosave => true, :dependent => :destroy
 	belongs_to :floor_unit
 

app/views/admin/spaces/_sub_unit_form.html.erb

@@ -28,7 +28,7 @@
       <% @site_in_use_locales.each do |locale| %>
         <%= f.fields_for :title_translations do |f| %>
           <div class="control-group">
-            <%= f.label :title.to_s + " (" + locale.to_s + ")", :class => "control-label muted" %>
+            <%= f.label t(:title) + " (" + t(locale) + ")", :class => "control-label muted" %>
             <div class="controls">
               <%= f.text_field locale, placeholder: t("space.sub_unit_name"), data: {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"}, :value => @sub_unit.title_translations[locale.to_s] %>
             </div>
@@ -68,6 +68,17 @@
             
         </div>
       </div>
+
+      <% @site_in_use_locales.each do |locale| %>
+        <%= f.fields_for :content_translations do |f| %>
+          <div class="control-group">
+            <%= f.label t(:content) + " (" + t(locale) + ")", :class => "control-label muted" %>
+            <div class="controls">
+              <%= f.text_area locale, placeholder: t(:content), :value => @sub_unit.content_translations[locale.to_s], :class=> 'ckeditor'  %>
+            </div>
+          </div>
+        <% end %>
+      <% end %> 
       
     </div>
   </div>

modules/space/show.html.erb

@@ -16,7 +16,7 @@
     <a href="{{building-back-link}}" class="s-space__back-btn btn btn-primary"><i class="fa fa-arrow-left"></i></a>
   </div>
 </article>
-
+<div id="space-for-ad-banner"></div>
 <script>
   (function() {
     var canvas = $("#full-layout-canvas");
@@ -28,17 +28,16 @@
     var tmpImg = new Image();
     var $box = $('.selection-box');
     var $pin = $('<a class="s-space__pin-link" href="#"><div class="pin"></div><div class="pulse"></div></a>');
+    var $slideshow = null;
+    var $closeBtn = $('<div class="s-space__close-btn btn-close"><i class="fa fa-times"></i></div>');
     var floorId = "{{floor-id}}";
     var pageId = "{{page-id}}";
-    var id = '';
+    var spaceForAdBanner = $("#space-for-ad-banner");
-    var obj = null;
+    var loading = $("div.loading-cover");
-    var temp = null;
+    var $controlBtn = null;
-    var $imgToggle = $('.s-space__floor-img-small');
+    var $controlIcon = null;
-    var $imgLarge = $('.s-space__floor-img-large');
+    var $collapse = null;
-    var $lightbox = $('<div class="s-space__light-box"></div>');
+    
-    var $closeBtn = $('<div class="s-space__close-btn"><i class="fa fa-times"></i></div>');
-    var body = document.body;
-
     canvas.height(windowHeight);
     cover.height(coverImageHeight);
     layoutImage.height(coverImageHeight);
@@ -48,46 +47,156 @@
       cover.width(layoutImage.width());
     };
 
-    // get rid of these buttons since we're not using them on frontend page
     $('.selection-box-btn-holder').remove();
 
-    // get URLs for each link
     $.ajax({
       url: "/xhr/spaces/get_floor_units",
       data: {floor_id : floorId, page_id : pageId },
       dataType: 'JSON'
-
     }).done(function(data) {
       $box.each(function(i) {
-        id = $(this).data('unit-id');
+        var id = $(this).data('unit-id');
-        obj = data.units.filter(function(x) {
+        var obj = data.units.filter(function(x) {
           return x.id == id;
         });
-        temp = $pin.clone();
+        var temp = $pin.clone();
         temp.attr('href', obj[0].url);
+        if (obj[0].url == "#") {
+          temp.find('.pulse').remove();
+        }
+        var text = $(this).find('.selection-box-label.absolute-center')
+        temp.prepend('<img src="/assets/space-p1.png">')
+        temp.on('focus',function(){
+          $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
+          $(this).find('img').attr('src','/assets/space-p2.png')
+        })
+        temp.on('mouseover',function(){
+          $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
+          $(this).find('img').attr('src','/assets/space-p2.png')
+        })
+        temp.on('blur',function(){
+          $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
+          $(this).find('img').attr('src','/assets/space-p1.png')
+        })
+        temp.on('mouseleave',function(){
+          if (!$(this).is(':focus')){
+            $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
+            $(this).find('img').attr('src','/assets/space-p1.png')
+          }
+        })
+        //temp.prepend($(this).find('.selection-box-label.absolute-center'))
         $(this).append(temp);
       });
+      canvas.find(".s-space__pin-link").on("click",pinLinkClickHandler);
     });
 
-    $imgToggle.on('click', function(e) {
+    var pinLinkClickHandler = function(){
-      if (!$(body).children('.light-box').length) {
+      var el = $(this);
-        $lightbox.append($closeBtn);
+      if(el.attr("href") != "#"){
-        $(body).append($lightbox);
+        loading.removeClass("loading-hide");
+        $.ajax({
+          url : el.attr("href"),
+          dataType : "html",
+          type : "get"
+        }).done(function(data){
+          var template = $(data).find('#main-content')
+          template.find('.s-space__back-btn-wrap').hide()
+          createAdbanner(template);
+          $("#space-for-ad-banner").show()
+          $closeBtn
+            .on('click', destroyAdbanner)
+            .prependTo(template);
+        });
       }
+      else{
+        destroyAdbanner()
+      }
+      return false;
+    };
 
-      $(body).toggleClass('has-lightbox');
+    function createAdbanner(data) {
-
+      spaceForAdBanner.html(data);
-      $closeBtn.on('click', function(e) {
+      $closeBtn.removeClass('active');
-        $(body).removeClass('has-lightbox');
+      imageLoad(function(){
+        setTimeout(function(){
+          loading.addClass("loading-hide");
+        },1000);
       });
 
-    });
+      $slideshow = data.find('.cycle-slideshow');
+      $slideshow.cycle();
+      $controlBtn = data.find('.w-ad-banner__btn');
+      $controlIcon = $controlBtn.find('i');
+      $collapse = data.find('.w-ad-banner__collpase');
 
-    $('html').keyup(function(e) {
+      $(document).on('keyup.adbanner', function(e) {
-      if (e.keyCode === 27) {
+        if (e.keyCode === 37) {
-        $(body).removeClass('has-lightbox');
+          $slideshow.cycle('prev');
-      } 
+        } else if (e.keyCode === 39) {
-    });
+          $slideshow.cycle('next');
+        } else if (e.keyCode === 27) {
+          destroyAdbanner();
+        } 
+      });
 
+      $controlBtn.on('click', function(e) {
+        if ($slideshow.hasClass('cycle-paused')) {
+          $slideshow.cycle('resume');
+          $controlIcon.attr('class', 'fa fa-pause');
+        } else {
+          $slideshow.cycle('pause');
+          $controlIcon.attr('class', 'fa fa-play');
+        }
+      });
+
+      // collapse cycle pager and close button
+      $collapse.on('click', function(e) {
+        var $this = $(this);
+        console.log($this.parents('.w-ad-banner.s-showcase').find('.w-ad-banner__wrap.cycle-slideshow'))
+        if ($this.hasClass('active')) {
+          $this
+            .removeClass('active')
+              .find('.fa')
+              .removeClass('fa-chevron-up')
+              .addClass('fa-chevron-down');
+          $this.parents('.w-ad-banner.s-showcase').find('.w-ad-banner__wrap.cycle-slideshow').show();
+        } else {
+          $this
+            .addClass('active')
+              .find('.fa')
+              .removeClass('fa-chevron-down')
+              .addClass('fa-chevron-up');
+          $this.parents('.w-ad-banner.s-showcase').find('.w-ad-banner__wrap.cycle-slideshow').hide();
+        }
+        $this.parents('.w-ad-banner__pager-wrap.w-ad-banner__page--active').toggleClass('active');
+      });
+    }
+
+    var imageLoad = function(fn){
+      var images = spaceForAdBanner.find("img.w-ad-banner__image");
+          images_loaded = 0;
+      images.each(function(){
+        var img = new Image();
+        img.src = $(this).attr("src");
+        img.onload = function(){
+          images_loaded++;
+           if(typeof fn == "function" && images_loaded == images.length){
+              fn.call();
+            }
+        };
+      });
+    };
+
+    function destroyAdbanner() {
+      $slideshow.cycle('destroy');
+      $closeBtn.remove();
+      $('#space-for-ad-banner')
+        .children()
+        .remove()
+        .end()
+        .hide();
+
+      $(document).off('keyup.adbanner');
+    }
   }());
 </script>

modules/space/unit.html.erb

@@ -34,14 +34,13 @@
     var $controlIcon = null;
     var $collapse = null;
     
-    canvas.height(windowHeight);
+    canvas.css('height','');
-    cover.height(coverImageHeight);
+    cover.css('height','')
-    layoutImage.height(coverImageHeight);
+    layoutImage.css('height','');
+    layoutImage.css('width','100%');
 
     tmpImg.src = layoutImage.attr('src') ;
-    tmpImg.onload = function() {
+    cover.css('width','');
-      cover.width(layoutImage.width());
-    };
 
     $('.selection-box-btn-holder').remove();
 
@@ -55,6 +54,9 @@
         var obj = data.sub_units.filter(function(x) {
           return x.id == id;
         });
+        if (obj.length==0){
+          return;
+        }
         var temp = $pin.clone();
         temp.attr('href', obj[0].url);
         if (obj[0].url == "#") {