heatmap-rails 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 87094bab47af8ff7d11ffa1ad7859bfd676663f0
-  data.tar.gz: b29655825150001bb58b16a34730967a674d113f
+  metadata.gz: 3ee4ef0f55873798ec7a01874168a45a0b457495
+  data.tar.gz: c3380e20bc6dd155eaff287a246a7fce1e3f1024
 SHA512:
-  metadata.gz: b73c339204943ab57d3581404621c0e40df06b887756845f74e12918753d3b6e431a06ab5cd81d2e3916abf5dc39ff045e1029bb805901842562ee98926ed220
-  data.tar.gz: d1d14d96f0a6168e02df4389680407713dc8921c642056cef95d239dd2bac112e50391963714785ea62c39da972fbd0a2da49f8bf675c6f22694e5b21e3e704a
+  metadata.gz: 29babce180685c54115c5d6190483b3e344b63fc5da852ae91d42ddc8fbe91d953b3c12fc5800fb9c50f6574e13811ccf219b8512b57b405f5f1cce944dab670
+  data.tar.gz: 7e83034fdf416e3e5f50815c5969540ad8a1f42548a4eac35aae6406712815a2a780d83672285ae903243b63655b7807ce98c5d0f7a58c8315358562bdae4403

data/app/controllers/points_controller.rb

@@ -13,5 +13,10 @@ class PointsController < ApplicationController
         HeatMap.create(path: params[:move_data]["#{i}"][:path], click_type: 'move',xpath: params[:move_data]["#{i}"][:xpath], offset_x: params[:move_data]["#{i}"][:offset_x], offset_y: params[:move_data]["#{i}"][:offset_y])
       end
     end
+    if params[:scroll_data].present? && params[:total_scrolls].to_i > 0
+      for i in 0..params[:total_scrolls].to_i-1
+        HeatMap.create(path: params[:scroll_data]["#{i}"][:path], click_type: 'scroll',xpath: params[:scroll_data]["#{i}"][:xpath], offset_x: params[:scroll_data]["#{i}"][:offset_x], offset_y: params[:scroll_data]["#{i}"][:offset_y])
+      end
+    end
   end
 end

data/lib/heatmap/rails.rb

@@ -7,6 +7,6 @@ module Heatmap
     class << self
       attr_accessor :options
     end
-    self.options = {click: 3, move: 10, html_element: 'body'}
+    self.options = {click: 3, move: 10, html_element: 'body', scroll: 10}
   end
 end

data/lib/heatmap/rails/helper.rb

@@ -7,6 +7,7 @@ module Heatmap
 
       click = options[:click] || Heatmap::Rails.options[:click]
       move = options[:move] || Heatmap::Rails.options[:move]
+      scroll = options[:scroll] || Heatmap::Rails.options[:scroll]
       html_element = options[:html_element] || Heatmap::Rails.options[:html_element]
       html = ""
 
@@ -14,6 +15,40 @@ module Heatmap
 <script type="text/javascript">
 $( document ).ready(function() {
   var move_array = [];
+  var scroll_array = [];
+
+  (function() {
+    document.onwheel = handleWheelMove;
+    function handleWheelMove(event) {
+      var dot, eventDoc, doc, body, offsetX, offsetY;
+      event = event || window.event;
+      if (event.offsetX == null && event.clientX != null) {
+        eventDoc = (event.target && event.target.ownerDocument) || document;
+        doc = eventDoc.documentElement;
+        body = eventDoc.body;
+        event.offsetX = event.clientX +
+        (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
+        (doc && doc.clientLeft || body && body.clientLeft || 0);
+        event.offsetY = event.clientY +
+        (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
+        (doc && doc.clientTop  || body && body.clientTop  || 0 );
+      }
+      var xpath_element =  xpathstring(event);
+      var element_width = event.target.getBoundingClientRect().width;
+      var element_height= event.target.getBoundingClientRect().height;
+      offset_x_element = event.offsetX / element_width;
+      offset_y_element = event.offsetY /  element_height;
+      var pageCoords = { path: window.location.pathname,  type: 'scroll', xpath: xpath_element, offset_x: offset_x_element ,  offset_y: offset_y_element, };
+
+      scroll_array.push(pageCoords);
+      if (scroll_array.length >= parseInt(#{scroll})) {
+        var coordinates = scroll_array;
+        sendRequest({'scroll_data': coordinates, 'total_scrolls': #{scroll} });
+        scroll_array = [];
+      }
+    }
+  })();
+
   document.querySelector('#{html_element}').onmousemove = function(ev) {
     var xpath_element =  xpathstring(ev);
     var element_width = ev.target.getBoundingClientRect().width;
@@ -119,12 +154,25 @@ JS
       html.respond_to?(:html_safe) ? html.html_safe : html
     end
 
-    def show_heatmap(path)
-      heatmap = HeatMap.where(path: path.to_s)
+    def show_heatmap(path,type = false)
+      if type
+        heatmap = HeatMap.where(path: path.to_s , click_type: type)
+        heatmap_count = HeatMap.where(path: path.to_s , click_type: type).count
+        type = type + 's'
+      else
+        heatmap = HeatMap.where(path: path.to_s)
+        heatmap_count = HeatMap.where(path: path.to_s).count
+        type = 'heatmaps'
+      end
       @data_points = []
       @data_xpaths = []
+      @scroll_data = []
       heatmap.each do |coordinate|
-        @data_xpaths.push({xpath: coordinate.xpath, offset_x: coordinate.offset_x, offset_y:coordinate.offset_y, value: 100})
+        if (coordinate.click_type == "scroll")
+          @scroll_data.push({xpath: coordinate.xpath, offset_x: coordinate.offset_x, offset_y:coordinate.offset_y})
+        else
+          @data_xpaths.push({xpath: coordinate.xpath, offset_x: coordinate.offset_x, offset_y:coordinate.offset_y, value: 100})
+        end
       end
       html = ""
       js = <<JS
@@ -133,6 +181,25 @@ JS
     container: document.querySelector('body'),
     radius: 40
   });
+  window.onload = function() {
+    var parent_div = document.createElement("div");
+    var text_div = document.createElement("span");
+    parent_div.style.padding= "14px";
+    parent_div.style.position = "absolute";
+    parent_div.style.top = "0";
+    parent_div.style.right = "0";
+    parent_div.style.background ="rgba(0, 0, 0, 0.7)";
+    parent_div.style.color ="white";
+    parent_div.style.textAlign ="center";
+    var text_node = document.createTextNode("#{type.capitalize} Recorded");
+    text_div.appendChild(text_node);
+    parent_div.appendChild(text_div);
+    var numeric_div = document.createElement("h1");
+    var numeric_node =  document.createTextNode("#{heatmap_count}");
+    numeric_div.appendChild(numeric_node);
+    parent_div.appendChild(numeric_div);
+    document.body.appendChild(parent_div);
+  }
   function getOffset( path ) {
     el = document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
     var _x = 0;
@@ -149,24 +216,56 @@ JS
   }
   var xpath = JSON.parse('#{raw(@data_xpaths.to_json.html_safe)}');
   var data_xpath = xpath.map(function(path){
-    width = getElement(path.xpath).getBoundingClientRect().width;
-    height = getElement(path.xpath).getBoundingClientRect().height;
-    var x_coord = getOffset(path.xpath).x+  (width * path.offset_x);
-    var y_coord = getOffset(path.xpath).y+  (height * path.offset_y);
-    delete path["xpath"];
-    delete path["offset_x"];
-    delete path["offset_y"];
-    path.x = Math.ceil(parseFloat(x_coord));
-    path.y = Math.ceil(parseFloat(y_coord));
-    return path;
+    if (path != null) {
+      element = getElement(path.xpath);
+      if (element != null){
+        width = element.getBoundingClientRect().width;
+        height = element.getBoundingClientRect().height;
+        var x_coord = getOffset(path.xpath).x+  (width * path.offset_x);
+        var y_coord = getOffset(path.xpath).y+  (height * path.offset_y);
+        delete path["xpath"];
+        delete path["offset_x"];
+        delete path["offset_y"];
+        path.x = Math.ceil(parseFloat(x_coord));
+        path.y = Math.ceil(parseFloat(y_coord));
+        return path;
+      }
+    }
   });
+  // Removed: Null Xpath(s)
+  var data_xpath = data_xpath.filter(function(val){ return val!==undefined; });
+
   heatmapInstance.addData(data_xpath);
+  var scroll = JSON.parse('#{raw(@scroll_data.to_json.html_safe)}');
+  var scroll_data = scroll.map(function(element){
+    width = getElement(element.xpath).getBoundingClientRect().width;
+    height = getElement(element.xpath).getBoundingClientRect().height;
+    dot = document.createElement('div');
+    dot.className = "dot";
+    dot.style.left = (getOffset(element.xpath).x+  (width * element.offset_x)) + "px";
+    dot.style.top = (getOffset(element.xpath).y+  (height * element.offset_y) )+ "px";
+    delete element["xpath"];
+    delete element["offset_x"];
+    delete element["offset_y"];
+    dot.style.backgroundColor ="white";
+    dot.style.position ="absolute";
+    dot.style.borderWidth ="8px";
+    dot.style.borderStyle ="solid";
+    var colors = Array('#ee3e32', '#f68838' ,'#fbb021', '#1b8a5a','#1d4877');
+    var color = colors[Math.floor(Math.random()*colors.length)];
+    dot.style.borderColor = color;
+    dot.style.borderRadius ="50%";
+    dot.style.opacity ="0.7";
+    var arrow_node = document.createTextNode("\u21C5");
+    dot.appendChild(arrow_node);
+    document.body.appendChild(dot);
+  });
+
 </script>
 JS
 
       html += js
       html.respond_to?(:html_safe) ? html.html_safe : html
     end
-
   end
 end

data/lib/heatmap/rails/version.rb

@@ -1,5 +1,5 @@
 module Heatmap
   module Rails
-    VERSION = "0.1.2"
+    VERSION = "0.1.3"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: heatmap-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Hassan
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-12-11 00:00:00.000000000 Z
+date: 2018-02-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler