change unit html for front page

app/assets/stylesheets/space-frontend.scss

@@ -4,7 +4,19 @@
 .overlay {
   position: absolute;
 }
-
+.s-space.show-space .selection-box-label.absolute-center{
+  display: none;
+}
+.s-space.show-space .selection-box-label.absolute-center.active{
+  display: block;
+  position: absolute;
+  bottom: 110%;
+  left: 100%;
+  background: #2196F3;
+  color: white;
+  width: 150%;
+  padding: 0.2em;
+}
 #full-layout-canvas {
   text-align: center;
   position: relative;

modules/space/info.json

@@ -0,0 +1,12 @@
+{
+    "frontend": [
+        {
+            "filename" : "space_index1",
+            "name" : {
+                "zh_tw" : "1. 卡片式 ( 模組標題, 大樓, 樓層)",
+                "en" : "1. Card-like layout ( widget-title, buildings, floors )"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}

modules/space/show.html.erb

@@ -0,0 +1,93 @@
+<article class="s-space show-space">
+  <h3 class="s-space__apartment-name">{{floor-title}}</h3>
+  <div class="s-space__apartment-layout">
+    {{floor-layout}}
+  </div>
+
+<!--   <div class="s-space__floor-img-small">
+    <img class="img-btn" src="{{floor-frontend-image-thumb}}" alt="{{image-alt}}">
+  </div>
+  
+  <div class="s-space__floor-img-large">
+    <img src="{{floor-frontend-image}}" alt="{{image-alt}}">
+  </div>
+ -->
+  <div class="s-space__back-btn-wrap">
+    <a href="{{building-back-link}}" class="s-space__back-btn btn btn-primary"><i class="fa fa-arrow-left"></i></a>
+  </div>
+</article>
+
+<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 floorId = "{{floor-id}}";
+    var pageId = "{{page-id}}";
+    var id = '';
+    var obj = null;
+    var temp = null;
+    var $imgToggle = $('.s-space__floor-img-small');
+    var $imgLarge = $('.s-space__floor-img-large');
+    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);
+
+    tmpImg.src = layoutImage.attr('src') ;
+    tmpImg.onload = function() {
+      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');
+        obj = data.units.filter(function(x) {
+          return x.id == id;
+        });
+        temp = $pin.clone();
+        temp.attr('href', obj[0].url);
+        $(this).append(temp);
+      });
+    });
+
+    $imgToggle.on('click', function(e) {
+      if (!$(body).children('.light-box').length) {
+        $lightbox.append($closeBtn);
+        $(body).append($lightbox);
+      }
+
+      $(body).toggleClass('has-lightbox');
+
+      $closeBtn.on('click', function(e) {
+        $(body).removeClass('has-lightbox');
+      });
+
+    });
+
+    $('html').keyup(function(e) {
+      if (e.keyCode === 27) {
+        $(body).removeClass('has-lightbox');
+      } 
+    });
+
+  }());
+</script>

modules/space/showcase.html.erb

@@ -0,0 +1,60 @@
+<style type="text/css">
+  .w-ad-banner__pager-wrap.w-ad-banner__page--active .w-ad-banner__pager.external {
+    display: none;
+  }
+  .w-ad-banner__pager-wrap.w-ad-banner__page--active.active .w-ad-banner__pager.external {
+    display: table;
+    width: 100%;
+  }
+  .w-ad-banner__pager.external img {
+    display: inline-block;
+    width: 100%;
+  }
+  .bundle-button{
+    padding-bottom: 1em;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .fa.fa-times{
+    background: #e4225d;
+    color: white;
+    padding: 0.2em;
+    float: right;
+    cursor: pointer;
+  }
+</style>
+<div class="w-ad-banner ad-banner-widget-1 s-showcase">
+  <div class="w-ad-banner__pager-wrap w-ad-banner__page--active">
+    <h2 class="w-ad-banner__widget-title">{{unit-title}}</h2>
+    <div class="bundle-button">
+      <div class="w-ad-banner__control">
+        <button class="w-ad-banner__btn pull-left ui-button">
+          <i class="fa fa-pause"></i>
+        </button>
+      </div>
+      <div class="w-ad-banner__collpase ui-button">
+          <i class="fa fa-chevron-down"></i>
+      </div>
+    </div>
+    <div class="w-ad-banner__pager external" data-list="unit-images" data-level="0">
+      <span class="w-ad-banner__pager-item">
+        <img src="{{image-thumb-url}}" alt="{{alt-image}}">
+      </span>
+    </div>
+  </div>
+  <div class="w-ad-banner__wrap cycle-slideshow"
+      data-list="unit-images"
+      data-level="0"
+      data-cycle-fx="tileSlide"
+      data-cycle-slides=".w-ad-banner__slide"
+      data-cycle-timeout="5000"
+      data-cycle-pager=".w-ad-banner__pager"
+      data-cycle-pager-template=""
+      data-cycle-log="false"
+    >
+    <div class="w-ad-banner__slide">
+        <img class="w-ad-banner__image banner-responsive" src="{{image-url}}" alt="{{alt-image}}">
+    </div>
+  </div>
+</div>

modules/space/space_index1.html.erb

@@ -0,0 +1,89 @@
+<div class="i-space index-space-1">
+  <ul 
+    class="i-sapce__building-wrap list-unstyled cycle-slideshow" 
+    data-list="buildings"
+    data-level="0"
+    data-cycle-slide=".i-space__building"
+  >
+    <li class="i-space__building">
+      <span class="i-space__img-wrap">
+        <img src="{{building-image}}" alt="{{alt-title}}" class="i-space__building-img img-responsive">
+      </span>
+      <span class="i-space__building-title">{{building-title}}</span>
+      <ol class="i-space__floors list-unstyled" data-list="floors" data-level="1">
+        <li class="i-space__floor-item">
+         <a class="i-space__floor-link" href="{{link_to_show}}">
+          <span class="i-space__floor-name">{{floor-title}}</span>
+          <img src="{{floor-image}}" alt="" class="i-space__floor-img" alt="{{alt-title}}">
+         </a>
+        </li>
+      </ol>
+    </li>
+  </ul>
+  
+</div>
+
+<div class="background-div">
+  <ul data-list="buildings" data-level="0">
+    <li class="background-image" style="background-image: url({{building-image}});"></li>
+  </ul>
+</div>
+
+<script>
+  (function(){
+    var body = document.body;
+    var $img = $('.i-space__img-wrap');
+    var $this = null;
+    var activeCls = 'active';
+    var floorActiveCls = 'floors--active';
+    var windowWidth = $(window).width();
+    var breakpointExtraSmall = 480;
+
+    $img.on('click', function(e) {
+      e.stopPropagation();
+      $this = $(this);
+      var floors = $(this).parents(".i-space__building").find("ol li");
+      if (floors.length == 1){
+        window.location.href = floors.first().find("a").attr("href");
+      } else {
+
+        if (windowWidth < breakpointExtraSmall) {
+          $('.i-space__floors')
+            .removeClass(activeCls);
+
+          if (!$this.hasClass(activeCls)) {
+            $this
+              .addClass(activeCls)
+              .siblings('.i-space__floors')
+              .addClass(activeCls);
+          } else {
+            $this
+              .removeClass(activeCls)
+              .siblings('.i-space__floors')
+              .removeClass(activeCls);
+          }
+        } else {
+          $('.i-space__floors')
+            .removeClass(activeCls);
+
+          if (!$this.hasClass(activeCls)) {
+            $this
+              .addClass(activeCls)
+              .siblings('.i-space__floors')
+              .addClass(activeCls);
+          } else {
+            $this
+              .removeClass(activeCls)
+              .siblings('.i-space__floors')
+              .removeClass(activeCls);
+          }
+        }
+      }
+    });
+
+    $(document).on('click', function() {
+      $('.i-space__img-wrap, .i-space__floors').removeClass(activeCls);
+    });
+
+  }());
+</script>

modules/space/unit.html.erb

@@ -0,0 +1,197 @@
+<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();
+        }
+        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);
+    });
+
+    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){
+          var template = $(data)
+          createAdbanner(template);
+          $("#space-for-ad-banner").show()
+          $closeBtn
+            .on('click', destroyAdbanner)
+            .prependTo(template);
+        });
+      }
+      else{
+        destroyAdbanner()
+      }
+      return false;
+    };
+
+    function createAdbanner(data) {
+      spaceForAdBanner.html(data);
+      $closeBtn.removeClass('active');
+      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');
+
+      $(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);
+        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>

space.gemspec

@@ -2,7 +2,19 @@ $:.push File.expand_path("../lib", __FILE__)
 
 # Maintain your gem's version:
 require "space/version"
-
+app_path = File.expand_path(__dir__)
+template_path = ENV['PWD'] + '/app/templates'
+all_template = Dir.glob(template_path+'/*/')
+puts 'copying module'
+all_template.each do |folder|
+  if folder.split('/')[-1] != 'mobile'
+    begin
+      system ('cp -r '+ app_path + '/modules/ ' + folder)
+    rescue
+      puts 'error copy'
+    end
+  end
+end
 # Describe your gem and declare its dependencies:
 Gem::Specification.new do |s|
   s.name        = "space"