asiaH4/modules/space/unit.html.erb

<article class="s-space show-space">
  <div class="loading-cover loading-hide">
    <div class="loading"></div>
  </div>
  <h3 class="s-space__apartment-name">{{unit-title}}</h3>
  <div class="s-space__apartment-layout">
    {{unit-layout}}
  </div>

  <div class="s-space__back-btn-wrap">
    <a href="{{floor-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");
    var layoutImage = $("#layout-image");
    var cover = canvas.find(".image-cover");
    var pxToDeduct = (Modernizr.touch ? 157 : 257);
    var windowHeight = ($(window).height() - pxToDeduct);
    var coverImageHeight = (parseInt(windowHeight));
    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 unitId = "{{unit-id}}";
    var pageId = "{{page-id}}";
    var spaceForAdBanner = $("#space-for-ad-banner");
    var loading = $("div.loading-cover");
    var $controlBtn = null;
    var $controlIcon = null;
    var $collapse = null;
    
    canvas.height(windowHeight);
    cover.height(coverImageHeight);
    layoutImage.height(coverImageHeight);

    tmpImg.src = layoutImage.attr('src') ;
    tmpImg.onload = function() {
      cover.width(layoutImage.width());
    };

    $('.selection-box-btn-holder').remove();

    $.ajax({
      url: "/xhr/spaces/get_floor_sub_units",
      data: {unit_id : unitId, page_id : pageId },
      dataType: 'JSON'
    }).done(function(data) {
      $box.each(function(i) {
        var id = $(this).data('unit-id');
        var obj = data.sub_units.filter(function(x) {
          return x.id == id;
        });
        var temp = $pin.clone();
        temp.attr('href', obj[0].url);
        if (obj[0].url == "#") {
          temp.find('.pulse').remove();
        }
        $(this).append(temp);
      });
      canvas.find(".s-space__pin-link").on("click",pinLinkClickHandler);
    });

    var pinLinkClickHandler = function(){
      var el = $(this);
      if(el.attr("href") != "#"){
        loading.removeClass("loading-hide");
        $.ajax({
          url : el.attr("href"),
          dataType : "html",
          type : "get"
        }).done(function(data){
          createAdbanner(data);
          $closeBtn
            .on('click', destroyAdbanner)
            .appendTo($slideshow);
        });
      }
      return false;
    };

    function createAdbanner(data) {
      spaceForAdBanner.html(data);
      $closeBtn.removeClass('active');
      imageLoad(function(){
        setTimeout(function(){
          spaceForAdBanner.animate({
            opacity: 'toggle'
          },function(){
            loading.addClass("loading-hide");
          });
        },1000);
      });

      $slideshow = $('.cycle-slideshow');
      $slideshow.cycle();
      $controlBtn = $('.w-ad-banner__btn');
      $controlIcon = $controlBtn.find('i');
      $collapse = $('.w-ad-banner__collpase');

      $(document).on('keyup.adbanner', function(e) {
        if (e.keyCode === 37) {
          $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);
        if ($this.hasClass('active')) {
          $closeBtn.removeClass('active');
          $this
            .removeClass('active')
              .find('.fa')
              .removeClass('fa-chevron-up')
              .addClass('fa-chevron-down');
          $this
            .siblings('.w-ad-banner__pager')
            .removeClass('active');
        } else {
          $closeBtn.addClass('active');
          $this
            .addClass('active')
              .find('.fa')
              .removeClass('fa-chevron-down')
              .addClass('fa-chevron-up');
          $this
            .siblings('.w-ad-banner__pager')
            .addClass('active');
        }
        $('.w-ad-banner__pager-wrap')
          .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>