add popup box

modules/space/show.html.erb

@@ -70,7 +70,7 @@
         var text = $(this).find('.selection-box-label')
         text.append('<div class="anchor"></div>')
         temp.prepend('<i class="fa fa-map-marker"></i>')
-        temp.find('.fa-map-marker').append(text)
+        temp.prepend(text)
         temp.find('.fa-map-marker').css('color',map_color)
         $(this).on('mouseover',function(){
           $(this).css('background-color',block_color)

modules/space/unit.html.erb

@@ -1,3 +1,5 @@
+<script type="text/javascript" src="/assets/space/tingle.js"></script>
+<link rel="stylesheet" type="text/css" href="/assets/space/tingle.css">
 <article class="s-space show-space">
   <div class="loading-cover loading-hide">
     <div class="loading"></div>
@@ -11,15 +13,16 @@
     <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>
+<div id="space-for-ad-banner-unit"></div>
 {{style_label}}
 <script>
   (function() {
+    var touch_flag = 'ontouchstart' in window || navigator.msMaxTouchPoints;
     var layout = $(".s-space__apartment-layout").eq(-1)
     var canvas = layout.find("#full-layout-canvas");
     var layoutImage = layout.find("#layout-image");
     var cover = canvas.eq(-1).find(".image-cover");
-    var pxToDeduct = (Modernizr.touch ? 157 : 257);
+    var pxToDeduct = (touch_flag ? 157 : 257);
     var windowHeight = ($(window).height() - pxToDeduct);
     var coverImageHeight = (parseInt(windowHeight));
     var tmpImg = new Image();
@@ -29,7 +32,7 @@
     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 = layout.parents('.s-space.show-space').next('#space-for-ad-banner');
+    var spaceForAdBanner = layout.parents('.s-space.show-space').next('#space-for-ad-banner-unit');
     var loading = $("div.loading-cover");
     var $controlBtn = null;
     var $controlIcon = null;
@@ -42,7 +45,25 @@
     cover.css('width','');
     layoutImage.css('height','');
     layoutImage.css('width','100%');
-
+    var modal = new tingle.modal({
+        footer: false,
+        stickyFooter: false,
+        closeMethods: ['overlay', 'button', 'escape'],
+        closeLabel: "Close",
+        //cssClass: ['custom-class-1', 'custom-class-2'],
+        onOpen: function() {
+            console.log('modal open');
+        },
+        onClose: function() {
+            destroyAdbanner()
+        },
+        beforeClose: function() {
+            // here's goes some logic
+            // e.g. save content before closing the modal
+            return true; // close the modal
+            return false; // nothing happens
+        }
+    });
     tmpImg.src = layoutImage.attr('src') ;
     cover.css('width','');
     spaceForAdBanner.hide()
@@ -54,6 +75,7 @@
       dataType: 'JSON'
     }).done(function(data) {
       $box.each(function(i) {
+      	$(this).attr('tabindex','0')
         var id = $(this).data('unit-id');
         var obj = data.sub_units.filter(function(x) {
           return x.id == id;
@@ -63,13 +85,15 @@
         }
         var temp = $pin.clone();
         temp.attr('href', obj[0].url);
+        var text = $(this).find('.selection-box-label')
         if (obj[0].url == "#") {
           temp.find('.pulse').remove();
+        }else{	
+          text.append('<a class="popup" href="'+obj[0].url+'">></a>')
         }
-        var text = $(this).find('.selection-box-label')
         text.append('<div class="anchor"></div>')
         temp.prepend('<i class="fa fa-map-marker"></i>')
-        temp.find('.fa-map-marker').append(text)
+        temp.prepend(text)
         temp.find('.fa-map-marker').css('color',map_color)
         $(this).find('.selection-box.overlay')
         $(this).on('mouseover',function(){
@@ -84,15 +108,16 @@
         })
         temp.on('focus',function(){
           $(this).parents('.selection-box.overlay').find('.selection-box-label').addClass('active')
+          $(this).parents('.selection-box.overlay').focus()
           active_map(this)
         })
         temp.on('mouseover',function(){
           $(this).parents('.selection-box.overlay').find('.selection-box-label').addClass('active')
           active_map(this)
         })
-        temp.on('blur',function(){
-          $(this).parents('.selection-box.overlay').find('.selection-box-label').removeClass('active')
-          inactive_map(this)
+        temp.parents('.selection-box.overlay').on('blur',function(){
+          $(this).find('.selection-box-label').removeClass('active')
+          inactive_map($(this).find('a.s-space__pin-link'))
         })
         temp.on('mouseleave',function(){
           if (!$(this).is(':focus')){
@@ -103,7 +128,15 @@
         //temp.prepend($(this).find('.selection-box-label.absolute-center'))
         $(this).append(temp);
       });
-      canvas.find(".s-space__pin-link").on("click",pinLinkClickHandler);
+      if (touch_flag){
+        canvas.find(".s-space__pin-link .popup").on("click",pinLinkClickHandler)
+        canvas.find(".s-space__pin-link").on("click",function(){
+        	return false;
+        })
+      }else{
+        canvas.find(".s-space__pin-link").on("click",pinLinkClickHandler)
+        canvas.find(".s-space__pin-link .popup").on("click",pinLinkClickHandler)
+      }
     });
 
     var pinLinkClickHandler = function(){
@@ -118,15 +151,22 @@
           var template = $(data)
           createAdbanner(template);
           spaceForAdBanner.show()
-          $closeBtn
+          /*$closeBtn
             .on('click', destroyAdbanner)
             .prependTo(template);
+          */
         });
+        window.setTimeout(function(){
+          $(modal.modalBoxContent).html(spaceForAdBanner)
+          modal.open()
+        },1)
+        
       }
       else{
         destroyAdbanner()
       }
       return false;
+
     };
 
     function createAdbanner(data) {