ajax_canvas_field 0.0.5 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c9255a0fcb8af907db44abb00ed37621d5d2b18b
-  data.tar.gz: '0081b9fb765eeba33e525a7b3334f19323f2288a'
+  metadata.gz: cf10d08ef3a76a3276c6a2cba8a371d451a7d7bc
+  data.tar.gz: c28991ea6197847f70f6b13bc60585027944402b
 SHA512:
-  metadata.gz: c0dffa02118ff8665d65f5be6594e77abf22c1f375e37dc6f382614cbdb194a7cf58eeada06a53dc385de44e5328ff5a39bce92b92e2354c060c32a8d63d5813
-  data.tar.gz: 15273d04a079fa0196988b04accc3e11c4ca98eb805e74e5108bbdc84146ff35285bf711041e210563e0646eb523aa6815942ae4597c581ac3820ab71594ca07
+  metadata.gz: 0dbeab8a431220af99fa794f8b8e6c4d043ea9620fb88484342382dbd4d8efd93f0eb525a3fe34149c9f909c1995b4f0511eac0ef72d771a9c6218fc416d0e05
+  data.tar.gz: a5cc0f4448b335e735d1769bb0580aae732d8e7a3bf5c7cd23f99afc9e67b7f91833d888489dd5959f6660f3b8046a4534edb00899ff985425dc7495ad7fe488

data/app/assets/javascripts/ajax_canvas_field.js

@@ -1,198 +1,259 @@
-document.addEventListener('DOMContentLoaded', function(){
-  var canvas = document.getElementById('canvas_field');
+function refreshAll(canvas, context, points, e) {
+  points = [];
+  initCircles(canvas, context, points);
+}
+
+function initCircles(canvas, context, points) {
+  var initial_data = JSON.parse(find_data_field(canvas).dataset.initialData);
+  for (i = 0; i < initial_data.length; i++) {
+    var point = buildCircle(initial_data[i][1], initial_data[i][2], initial_data[i][3], canvas);
+    point.database_id = initial_data[i][0];
+    points.push(point);
+  }
+  redrawAllCircles(canvas, context, points);
+  return points;
+}
+
+function isPixelCollision(canvas, e) {
+  e.preventDefault();
+  if (e.type == "contextmenu")
+    return;
+  var r = canvas.getBoundingClientRect(),
+    context = canvas.getContext('2d'),
+    points = [],
+    x = e.clientX - r.left,
+    y = e.clientY - r.top,
+    removed = false,
+    i;
+
+  points = initCircles(canvas, context, points);
+  for (i = points.length - 1; i >= 0; --i) {
+    if (context.isPointInPath(points[i], x, y, 'nonzero')) {
+      deleteAjax(i, canvas, context, points);
+      removed = true;
+    }
+  }
+
+  if (removed == false) {
+    createAjax(x, y, e, canvas, context, points);
+  }
+}
+
+function buildCircle(x, y, e, canvas) {
+  var c = new Path2D(),
+    offset = 3.5;
+
+  c.arc(x - offset, y - offset, 7, 0, Math.PI * 2);
+  c.color = (typeof e === 'string')
+    ? e
+    : chooseColor(e, canvas);
+  c.x = x;
+  c.y = y;
+  return c;
+}
+
+function chooseColor(e, canvas) {
+  if (e === null)
+    return '#ff0000';
+  switch (e.which) {
+    case 1:
+      return canvas.dataset.leftColor;
+    case 2:
+      return canvas.dataset.middleColor;
+    case 3:
+      return canvas.dataset.rightColor;
+  }
+}
+
+function chooseButton(e) {
+  if (e === null)
+    return null;
+  switch (e.which) {
+    case 1:
+      return 'left';
+    case 2:
+      return 'middle';
+    case 3:
+      return 'right';
+  }
+}
+
+function deleteAjax(i, canvas, context, points) {
+  var id = points[i].database_id;
+  $.ajax({
+    type: 'DELETE',
+    url: canvas.dataset.url + '/' + id,
+    headers: {
+      'Authorization': 'Token token=' + canvas.dataset.token
+    },
+    dataType: "json",
+    success: function(data) {
+      removeCircle(i, data, canvas, context, points);
+    },
+    error: function(data) {
+      alert('No connection to Server');
+    }
+  });
+}
+
+function removeCircle(i, data, canvas, context, points) {
+  points.splice(i, 1);
+  redrawAllCircles(canvas, context, points);
+}
+
+function createAjax(x, y, e, canvas, context, points) {
+  post_data = collectPostData(x, y, e, canvas, context, points);
+  $.ajax({
+    type: 'POST',
+    url: canvas.dataset.url,
+    headers: {
+      'Authorization': 'Token token=' + canvas.dataset.token
+    },
+    data: post_data,
+    dataType: "json",
+    success: function(data) {
+      addCircle(x, y, data, e, canvas, context, points);
+    },
+    error: function(data) {
+      alert('No connection to Server');
+    }
+  });
+}
+
+function collectPostData(x, y, e, canvas, context, points) {
+  var params = {};
+  var param = canvas.dataset.strongParam;
+
+  var additional_data = JSON.parse(find_data_field(canvas).dataset.additionalData);
+  params[param] = {
+    x_value: x,
+    y_value: y,
+    button: chooseButton(e)
+  };
+  for (var attrname in additional_data) {
+    params[param][attrname] = additional_data[attrname];
+  }
+  return params;
+}
+
+function find_data_field(canvas) {
+  var active_datafields = document.getElementsByClassName('active canvas_data_field');
+  var fields = document.querySelectorAll('.canvas_field, .ro_canvas_field');
+  if (active_datafields.length == 1)
+    return active_datafields[0];
+  if (fields.length == 1)
+    return active_datafields[0];
+  var active_id_fields = document.querySelectorAll('.canvas_data_field.active[data-for=' + canvas.id + ']');
+  if (active_id_fields.length == 1)
+    return active_id_fields[0];
+  return active_datafields[0];
+}
+
+function addCircle(x, y, data, e, canvas, context, points) {
+  new_point = buildCircle(x, y, e, canvas);
+  new_point['database_id'] = data.id;
+  points.push(new_point);
+  redrawAllCircles(canvas, context, points);
+}
+
+function redrawAllCircles(canvas, context, points) {
+  var tmpData = [];
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  for (i = 0; i < points.length; i++) {
+    context.fillStyle = points[i].color;
+    context.fill(points[i], 'nonzero');
+    context.stroke(points[i], 'nonzero');
+
+    tmpData.push([
+      points[i].database_id,
+      points[i].x,
+      points[i].y,
+      points[i].color
+    ]);
+  }
+  find_data_field(canvas).dataset.initialData = JSON.stringify(tmpData);
+}
+
+function handle_data_table(data_fields, canvas, context, points) {
+  var tableRows = document.getElementsByClassName('request_row');
+  var markRequestRow = function() {
+    for (var i = 0; i < tableRows.length; i++) {
+      tableRows[i].classList.remove('active');
+    }
+    for (var i = 0; i < data_fields.length; i++) {
+      data_fields[i].classList.remove('active');
+    }
+    this.classList.add('active');
+    this.getElementsByClassName('canvas_data_field')[0].classList.add('active');
+    refreshAll(canvas, context, points, event);
+  };
+
+  for (var i = 0; i < tableRows.length; i++) {
+    tableRows[i].addEventListener('click', markRequestRow, false);
+  }
+}
+
+var start_with_canvas_fields = function() {
+  var canvas_fields = document.getElementsByClassName('canvas_field');
+  var ro_canvas_fields = document.getElementsByClassName('ro_canvas_field');
   var data_fields = document.getElementsByClassName('canvas_data_field');
-  if (canvas) {
-    if (data_fields.length == 0) {
-      console.log('No Data Field found. Please add canvas_data_field in your code!');
-      document.getElementsByClassName('canvas_table')[0].style.display = 'none';
-      canvas.style.display = 'none';
-    } else {
-      canvas.width = canvas.dataset.width;
-      canvas.height = canvas.dataset.height;
-      var context = canvas.getContext('2d'),
-        url = canvas.dataset.url,
-        param = canvas.dataset.strongParam,
-        token = canvas.dataset.token,
-        points = [];
-
-      function refreshAll(e) {
-        points = [];
-        initCircles();
-      }
-
-      function initCircles() {
-        var data_field = document.getElementsByClassName('active canvas_data_field')[0].dataset;
-        var initialData = JSON.parse(data_field.initialData);
-        for (i = 0; i < initialData.length; i++) {
-          var point = buildCircle(initialData[i][1], initialData[i][2], initialData[i][3]);
-          point.database_id = initialData[i][0];
-          points.push(point);
-        }
-        redrawAllCircles();
-      }
-
-      function isPixelCollision(e) {
-        e.preventDefault();
-
-        if (e.type == "contextmenu") return;
-
-        var r = canvas.getBoundingClientRect(),
-          x = e.clientX - r.left,
-          y = e.clientY - r.top,
-          removed = false,
-          i;
-
-        for (i = points.length - 1; i >= 0; --i) {
-          if (context.isPointInPath(points[i], x, y, 'nonzero')) {
-            deleteAjax(i);
-            removed = true;
-          }
-        }
-
-        if (removed == false) {
-          createAjax(x, y, e);
-        }
-      }
-
-      function buildCircle(x, y, e) {
-        var c = new Path2D(),
-          offset = 3.5;
-
-        c.arc(x - offset, y - offset, 7, 0, Math.PI * 2);
-        c.color = (typeof e === 'string') ? e : chooseColor(e)
-        c.x = x;
-        c.y = y;
-        return c;
-      }
-
-      function chooseColor(e) {
-        if (e === null) return '#ff0000';
-        switch (e.which) {
-          case 1:
-            return canvas.dataset.leftColor;
-          case 2:
-            return canvas.dataset.middleColor;
-          case 3:
-            return canvas.dataset.rightColor;
-        }
-      }
-
-      function chooseButton(e) {
-        if (e === null) return null;
-        switch (e.which) {
-          case 1:
-            return 'left';
-          case 2:
-            return 'middle';
-          case 3:
-            return 'right';
-        }
-      }
-
-      function deleteAjax(i) {
-        var id = points[i].database_id;
-        $.ajax({
-          type: 'DELETE',
-          url: url + '/' + id,
-          headers: {
-            'Authorization': 'Token token=' + token
-          },
-          dataType: "json",
-          success: function(data) {
-            removeCircle(i, data);
-          },
-          error: function(data) {
-            alert('No connection to Server');
-          }
-        });
-      }
-
-      function removeCircle(i, data) {
-        points.splice(i, 1);
-        redrawAllCircles();
-      }
-
-      function createAjax(x, y, e) {
-        post_data = collectPostData(x, y, e);
-        $.ajax({
-          type: 'POST',
-          url: url,
-          headers: {
-            'Authorization': 'Token token=' + token
-          },
-          data: post_data,
-          dataType: "json",
-          success: function(data) {
-            addCircle(x, y, data, e);
-          },
-          error: function(data) {
-            alert('No connection to Server');
-          }
-        });
-      }
-
-      function collectPostData(x, y, e) {
-        var params = {};
-        var data_field = document.getElementsByClassName('active canvas_data_field')[0].dataset;
-        var additionalData = JSON.parse(data_field.additionalData);
-        params[param] = {
-          x_value: x,
-          y_value: y,
-          button: chooseButton(e)
-        };
-        for (var attrname in additionalData) {
-          params[param][attrname] = additionalData[attrname];
-        }
-        return params;
-      }
-
-      function addCircle(x, y, data, e) {
-        new_point = buildCircle(x, y, e);
-        new_point['database_id'] = data.id;
-        points.push(new_point);
-        redrawAllCircles();
-      }
-
-      function redrawAllCircles() {
-        var tmpData = [];
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        for (i = 0; i < points.length; i++) {
-          context.fillStyle = points[i].color;
-          context.fill(points[i], 'nonzero');
-          context.stroke(points[i], 'nonzero');
-
-          tmpData.push([points[i].database_id, points[i].x, points[i].y, points[i].color]);
-        }
-        document.getElementsByClassName('active canvas_data_field')[0].dataset.initialData = JSON.stringify(tmpData);
-      }
-
-      if (canvas.dataset.leftActive == 'true') {
-        canvas.addEventListener('click', isPixelCollision, false);
-      }
-      if (canvas.dataset.middleActive == 'true') {
-        canvas.addEventListener('auxclick', isPixelCollision, false);
-      }
-      if (canvas.dataset.rightActive == 'true') {
-        canvas.addEventListener('contextmenu', isPixelCollision, false);
-      }
-      initCircles();
-
-      var tableRows = document.getElementsByClassName('request_row');
-      var markRequestRow = function() {
-        for (var i = 0; i < tableRows.length; i++) {
-          tableRows[i].classList.remove('active');
-        }
-        for (var i = 0; i < data_fields.length; i++) {
-          data_fields[i].classList.remove('active');
-        }
-        this.classList.add('active');
-        this.getElementsByClassName('canvas_data_field')[0].classList.add('active');
-        refreshAll();
-      };
-
-      for (var i = 0; i < tableRows.length; i++) {
-        tableRows[i].addEventListener('click', markRequestRow, false);
-      }
+  if (canvas_fields.length == 0 && ro_canvas_fields.length == 0) {
+    return;
+  }
+  if (data_fields.length == 0) {
+    console.log('No Data Field found. Please add canvas_data_field in your code!');
+    for (o = 0; o < canvas_table.length; o++) {
+      document.getElementsByClassName('canvas_table')[o].style.display = 'none';
+    }
+    for (o = 0; o < canvas_fields.length; o++) {
+      document.getElementsByClassName('canvas_fields')[o].style.display = 'none';
     }
+    for (o = 0; o < ro_canvas_fields.length; o++) {
+      document.getElementsByClassName('ro_canvas_fields')[o].style.display = 'none';
+    }
+    return;
   }
-}, false);
+
+  for (o = 0; o < canvas_fields.length; o++) {
+    var canvas = canvas_fields[o];
+    canvas.width = canvas.dataset.width;
+    canvas.height = canvas.dataset.height;
+    var context = canvas.getContext('2d');
+    var points = [];
+    if (canvas.dataset.leftActive == 'true') {
+      canvas.addEventListener('click', function() {
+        isPixelCollision(this, event)
+      }, false);
+    }
+    if (canvas.dataset.middleActive == 'true') {
+      canvas.addEventListener('auxclick', function() {
+        isPixelCollision(this, event)
+      }, false);
+    }
+    if (canvas.dataset.rightActive == 'true') {
+      canvas.addEventListener('contextmenu', function() {
+        isPixelCollision(this, event)
+      }, false);
+    }
+    initCircles(canvas, context, points);
+
+    handle_data_table(data_fields, canvas, context, points);
+  }
+
+  for (o = 0; o < ro_canvas_fields.length; o++) {
+    var canvas = ro_canvas_fields[o];
+    canvas.width = canvas.dataset.width;
+    canvas.height = canvas.dataset.height;
+    var context = canvas.getContext('2d');
+    var points = [];
+    initCircles(canvas, context, points);
+
+    handle_data_table(data_fields, canvas, context, points);
+  }
+};
+
+if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
+  start_with_canvas_fields();
+} else {
+  document.addEventListener("DOMContentLoaded", start_with_canvas_fields);
+}

data/app/assets/stylesheets/ajax_canvas_field.css

@@ -1,8 +1,4 @@
-#canvas_field {
-  border: 1px groove lightgrey;
-}
-
-.canvas_field {
+.canvas_field, .ro_canvas_field {
   border: 1px groove lightgrey;
 }
 

data/app/helpers/canvas_field_helper.rb

@@ -10,15 +10,15 @@ module CanvasFieldHelper
     background_url = options[:background_url].blank? ? '' : "url(#{options[:background_url]})"
     background = "background: #fff #{background_url} no-repeat center top"
     failure_message = 'Your browser does not support the canvas element.'
-
-    content_tag :canvas, failure_message, id: :canvas_field, data: collect_data(url, options), style: background
+    additional_classes = options[:class] || ''
+    content_tag :canvas, failure_message, class: "#{additional_classes} canvas_field", id: options[:id],
+                                          data: collect_data(url, options), style: background
   end
 
   def canvas_data_field(active = false, options = {})
     klass = active ? 'active' : ''
-    data = { additional_data: options[:additional_data].to_json,
-             initial_data: options[:initial_data].to_json,
-             content: options[:content] || '' }
+    data = { additional_data: options[:additional_data].to_json, initial_data: options[:initial_data].to_json,
+             content: options[:content] || '', for: options[:for] }
     content_tag(:span, '', class: "#{klass} canvas_data_field", data: data)
   end
 
@@ -43,8 +43,10 @@ module CanvasFieldHelper
       background += "; background-size: #{data[:width]}px #{data[:height]}px"
     end
     failure_message = 'Your browser does not support the canvas element.'
+    additional_classes = options[:class] || ''
 
-    content_tag :canvas, failure_message, data: data, style: background, class: 'canvas_field'
+    content_tag :canvas, failure_message, class: "#{additional_classes} ro_canvas_field",
+                                          id: options[:id], data: data, style: background
   end
 
   private

data/lib/ajax_canvas_field/config.rb

@@ -22,7 +22,7 @@ module AjaxCanvasField
   # Configure through yaml file
   def self.configure_with(path_to_yaml_file)
     begin
-      config = YAML.safe_load(IO.read(path_to_yaml_file))
+      config = YAML.load(IO.read(path_to_yaml_file))
     rescue Errno::ENOENT
       log(:warning, "YAML configuration file couldn't be found. Using defaults."); return
     rescue Psych::SyntaxError

data/lib/ajax_canvas_field/rails/engine.rb

@@ -1,11 +1,13 @@
+# frozen_string_literal: true
+
 module AjaxCanvasField #:nodoc:
   module Rails #:nodoc:
     class Engine < ::Rails::Engine
       initializer 'ajax_canvas_field.assets.precompile' do |app|
-        %w(stylesheets javascripts images).each do |sub|
+        %w[stylesheets javascripts images].each do |sub|
           app.config.assets.paths << root.join('app/assets', sub).to_s
         end
-        app.config.assets.precompile += %w( mouse_left.png mouse_right.png mouse_middle.png )
+        app.config.assets.precompile += %w[mouse_left.png mouse_right.png mouse_middle.png]
       end
     end
   end

data/lib/ajax_canvas_field/rails/version.rb

@@ -1,5 +1,5 @@
 module AjaxCanvasField #:nodoc:
   module Rails #:nodoc:
-    VERSION = "0.0.5"
+    VERSION = "0.0.6"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ajax_canvas_field
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
 platform: ruby
 authors:
 - datyv
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-11-23 00:00:00.000000000 Z
+date: 2018-01-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -53,7 +53,6 @@ files:
 - app/assets/images/mouse_middle.png
 - app/assets/images/mouse_right.png
 - app/assets/javascripts/ajax_canvas_field.js
-- app/assets/javascripts/ro_canvas_field.js
 - app/assets/stylesheets/ajax_canvas_field.css
 - app/helpers/canvas_field_helper.rb
 - app/views/ajax_canvas_field/_canvas_legend.html.haml
@@ -86,7 +85,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.2
+rubygems_version: 2.6.13
 signing_key: 
 specification_version: 4
 summary: HTML5 CanvasField Support

data/app/assets/javascripts/ro_canvas_field.js

@@ -1,42 +0,0 @@
-var canvases = document.getElementsByClassName('canvas_field');
-if (canvases) {
-  for (o = 0; o < canvases.length; o++) {
-    var canvas = canvases[o];
-    canvas.width = canvas.dataset.width;
-    canvas.height = canvas.dataset.height;
-    var context = canvas.getContext('2d');
-    var points = [];
-
-    function initCircles() {
-      var initialData = JSON.parse(canvas.dataset.initialData);
-      for (i = 0; i < initialData.length; i++) {
-        var point = buildCircle(initialData[i][1], initialData[i][2], initialData[i][3]);
-        point.database_id = initialData[i][0];
-        points.push(point);
-      }
-      redrawAllCircles();
-    }
-
-    function buildCircle(x, y, e) {
-      var c = new Path2D(),
-        offset = 3.5;
-
-      c.arc(x - offset, y - offset, 7, 0, Math.PI * 2);
-      c.color = (typeof e === 'string') ? e : '#ff0000'
-      c.x = x;
-      c.y = y;
-      return c;
-    }
-
-    function redrawAllCircles() {
-      context.clearRect(0, 0, canvas.width, canvas.height);
-      for (i = 0; i < points.length; i++) {
-        context.fillStyle = points[i].color;
-        context.fill(points[i], 'nonzero');
-        context.stroke(points[i], 'nonzero');
-      }
-    }
-
-    initCircles();
-  }
-}