ajax_canvas_field 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: b6473159e106c84c7d22f88082f09673881e75ba
+  data.tar.gz: 19c2ded0fa28248bad6827bd640ad08d3d1b45ba
+SHA512:
+  metadata.gz: 7a1804d70527ba1bab761106cbcf05b240d70909bba0b8a181b40c64ec39d30e4f131c86039ea899e019facac4fac3460f476c64cc51636d0ac06f722f250f78
+  data.tar.gz: 8a1b0af731180d5698822a7ed7321a8ed92fefa640ecafffd8abf1508dde7b3115355e5592f6a64dadcc2c64f0c36b357cc2af016fa0580b4a8f10f409688b30

data/Gemfile

@@ -0,0 +1,4 @@
+source "https://rubygems.org"
+
+# Specify your gem's dependencies in ajax_canvas_field.gemspec
+gemspec

data/README.md

@@ -0,0 +1,84 @@
+# AjaxCanvasField
+
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'ajax_canvas_field'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install ajax_canvas_field
+
+## Usage
+There are three tasks you can execute.
+
+### ATTENTION: Use at your own risk! Back your shit up, before using this!
+Each will ask you for the file   
+If this gem is installed inside a Rails-Application you just have to written
+e.g.:
+```
+'en' -> for en.yml   
+'de' -> for de.yml   
+...
+```
+One will be the master-file (this one will not be changed)   
+and   
+One will be the slave-file (this one will be changed)
+
+#### Script 1: Interactive
+```bash
+rake lit:interactive   
+```   
+This script will ask you for the missing value.   
+It will find every difference and will ask you to fill every hole... yeah.   
+After everything is filled out it will merge the data back into your File.
+
+#### Script 2: Recent
+```bash
+rake lit:recent
+```   
+REQUIRED: Connection to Git
+This script will ask you for the missing value.  
+It will find everything you changed in your master-file since you last pushed commit.   
+After everything is filled out it will merge the data back into your File.
+
+#### Script 3: Cleanup (Deletes something!)
+```bash
+rake lit:cleanup  
+```   
+This script will find every key/value inside your slave-file that isn´t present in your master-file.   
+And it will be deleted!!!!
+
+#### Sometimes the Rake tasks aren't working
+In this case you can use the Rails-Console and the Class -LostInTranslation-.
+
+```bash
+rails c
+```
+```
+LostInTranslation.interactive
+or
+LostInTranslation.recent
+or
+LostInTranslation.cleanup
+```
+
+#### Yet to come
+I am planning on an integration of Translation APIs.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/datyv/lost_in_translation. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/ajax_canvas_field.gemspec

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'ajax_canvas_field/rails/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = 'ajax_canvas_field'
+  spec.version       = AjaxCanvasField::Rails::VERSION
+  spec.authors       = ['datyv']
+  spec.email         = ['yvesgoizet@gmail.com']
+
+  spec.summary       = 'HTML5 CanvasField Support'
+  spec.description   = 'Add a CanvasField to point out errors in three different colors'
+  spec.homepage      = 'https://github.com/Datyv/ajax_canvas_field'
+  spec.license       = 'MIT'
+
+  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
+  # to allow pushing to a single host or delete this section to allow pushing to any host.
+  if spec.respond_to?(:metadata)
+    spec.metadata['allowed_push_host'] = 'https://rubygems.org'
+  else
+    raise 'RubyGems 2.0 or newer is required to protect against public gem pushes.'
+  end
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = %w[app lib]
+
+  spec.add_development_dependency 'bundler', '~> 1.15'
+  spec.add_development_dependency 'rake', '~> 10.0'
+end

data/app/assets/javascripts/ajax_canvas_field.js

@@ -0,0 +1,192 @@
+document.addEventListener('DOMContentLoaded', function(){
+  var canvas = document.getElementById('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);
+      }
+
+      canvas.addEventListener('click', isPixelCollision, false);
+      canvas.addEventListener('auxclick', isPixelCollision, false);
+      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);
+      }
+    }
+  }
+}, false);

data/app/assets/javascripts/ro_canvas_field.js

@@ -0,0 +1,42 @@
+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();
+  }
+}

data/app/assets/stylesheets/ajax_canvas_field.css

@@ -0,0 +1,24 @@
+#canvas_field {
+  border: 1px groove lightgrey;
+}
+
+.canvas_field {
+  border: 1px groove lightgrey;
+}
+
+.canvas_data_field {
+  display: none;
+}
+
+.canvas_legend_sub {
+  height: 30px;
+  font-weight: 600;
+  padding-top: 9px;
+  text-align: center;
+}
+
+tr.active {
+  -webkit-box-shadow: 0px 0px 25px -2px #967474 inset;
+  -moz-box-shadow: 0px 0px 25px -2px #967474 inset;
+  box-shadow: 0px 0px 25px -2px #967474 inset;
+}

data/app/helpers/canvas_field_helper.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module CanvasFieldHelper
+  def canvas_field(options = {})
+    url = '/'
+    url += options[:namespace].to_s + '/' if options[:namespace]
+    url += options[:controller] || 'canvas_fields'
+
+    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
+  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] || '' }
+    content_tag(:span, '', class: "#{klass} canvas_data_field", data: data)
+  end
+
+  def canvas_legend_field(options = {})
+    locals = {
+      left_text: options[:left_text] || '',
+      middle_text: options[:middle_text] || '',
+      right_text: options[:right_text] || '',
+      left_color: options[:left_color] || '#ff0000',
+      middle_color: options[:middle_color] || '#00ff00',
+      right_color: options[:right_color] || '#0000ff',
+      no_icon: options[:no_icon] || false,
+      no_header: options[:no_header] || false
+    }
+    render partial: 'ajax_canvas_field/canvas_legend', locals: locals
+  end
+
+  def ro_canvas_field(options = {})
+    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, data: collect_ro_data(options), style: background, class: 'canvas_field'
+  end
+
+  private
+
+  def collect_data(url, options)
+    { url: url,
+      strong_param: options[:param] || options[:controller]&.singularize || 'canvas_field',
+      token: options[:token],
+      width: options[:width] || AjaxCanvasField.config[:default_width],
+      height: options[:height] || AjaxCanvasField.config[:default_height],
+      left_color: options[:left_color] || '#ff0000',
+      middle_color: options[:middle_color] || '#00ff00',
+      right_color: options[:right_color] || '#0000ff' }
+  end
+
+  def collect_ro_data(options)
+    { width: options[:width] || AjaxCanvasField.config[:default_width],
+      height: options[:height] || AjaxCanvasField.config[:default_height],
+      left_color: options[:left_color] || '#ff0000',
+      middle_color: options[:middle_color] || '#00ff00',
+      right_color: options[:right_color] || '#0000ff',
+      initial_data: options[:initial_data].to_json }
+  end
+end

data/app/views/ajax_canvas_field/_canvas_legend.html.haml

@@ -0,0 +1,21 @@
+%table
+  - unless no_header
+    %thead
+      %tr
+        %th.canvas_legend_sub Linke Maustaste
+        %th.canvas_legend_sub Mittlere Maustaste
+        %th.canvas_legend_sub Rechte Maustaste
+  %tbody
+    - unless no_icon
+      %tr
+        %td.canvas_legend_sub= image_tag('mouse_left.png', size: '50x50')
+        %td.canvas_legend_sub= image_tag('mouse_middle.png', size: '50x50')
+        %td.canvas_legend_sub= image_tag('mouse_right.png', size: '50x50')
+    %tr
+      %td.canvas_legend_sub= left_text
+      %td.canvas_legend_sub= middle_text
+      %td.canvas_legend_sub= right_text
+    %tr
+      %td.canvas_legend_sub{ style: "background-color: #{left_color}" }
+      %td.canvas_legend_sub{ style: "background-color: #{middle_color}" }
+      %td.canvas_legend_sub{ style: "background-color: #{right_color}" }

data/assets/javascripts/ajax_canvas_field.js

@@ -0,0 +1,192 @@
+document.addEventListener('DOMContentLoaded', function(){
+  var canvas = document.getElementById('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);
+      }
+
+      canvas.addEventListener('click', isPixelCollision, false);
+      canvas.addEventListener('auxclick', isPixelCollision, false);
+      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);
+      }
+    }
+  }
+}, false);

data/assets/javascripts/ro_canvas_field.js

@@ -0,0 +1,42 @@
+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();
+  }
+}

data/assets/stylesheets/ajax_canvas_field.css

@@ -0,0 +1,24 @@
+#canvas_field {
+  border: 1px groove lightgrey;
+}
+
+.canvas_field {
+  border: 1px groove lightgrey;
+}
+
+.canvas_data_field {
+  display: none;
+}
+
+.canvas_legend_sub {
+  height: 30px;
+  font-weight: 600;
+  padding-top: 9px;
+  text-align: center;
+}
+
+tr.active {
+  -webkit-box-shadow: 0px 0px 25px -2px #967474 inset;
+  -moz-box-shadow: 0px 0px 25px -2px #967474 inset;
+  box-shadow: 0px 0px 25px -2px #967474 inset;
+}

data/helpers/canvas_field_helper.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module CanvasFieldHelper
+  def canvas_field(options = {})
+    url = '/'
+    url += options[:namespace].to_s + '/' if options[:namespace]
+    url += options[:controller] || 'canvas_fields'
+
+    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
+  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] || '' }
+    content_tag(:span, '', class: "#{klass} canvas_data_field", data: data)
+  end
+
+  def canvas_legend_field(options = {})
+    locals = {
+      left_text: options[:left_text] || '',
+      middle_text: options[:middle_text] || '',
+      right_text: options[:right_text] || '',
+      left_color: options[:left_color] || '#ff0000',
+      middle_color: options[:middle_color] || '#00ff00',
+      right_color: options[:right_color] || '#0000ff',
+      no_icon: options[:no_icon] || false,
+      no_header: options[:no_header] || false
+    }
+    render partial: 'ajax_canvas_field/canvas_legend', locals: locals
+  end
+
+  def ro_canvas_field(options = {})
+    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, data: collect_ro_data(options), style: background, class: 'canvas_field'
+  end
+
+  private
+
+  def collect_data(url, options)
+    { url: url,
+      strong_param: options[:param] || options[:controller]&.singularize || 'canvas_field',
+      token: options[:token],
+      width: options[:width] || AjaxCanvasField.config[:default_width],
+      height: options[:height] || AjaxCanvasField.config[:default_height],
+      left_color: options[:left_color] || '#ff0000',
+      middle_color: options[:middle_color] || '#00ff00',
+      right_color: options[:right_color] || '#0000ff' }
+  end
+
+  def collect_ro_data(options)
+    { width: options[:width] || AjaxCanvasField.config[:default_width],
+      height: options[:height] || AjaxCanvasField.config[:default_height],
+      left_color: options[:left_color] || '#ff0000',
+      middle_color: options[:middle_color] || '#00ff00',
+      right_color: options[:right_color] || '#0000ff',
+      initial_data: options[:initial_data].to_json }
+  end
+end

data/lib/ajax_canvas_field/config.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+require 'yaml'
+
+module AjaxCanvasField
+  # Configuration defaults
+  @config = {
+    default_height: 470,
+    default_width: 470,
+    default_left_color: '#ff0000',
+    default_middle_color: '#00ff00',
+    default_right_color: '#0000ff'
+  }
+
+  @valid_config_keys = @config.keys
+
+  # Configure through hash
+  def self.configure(opts = {})
+    opts.each { |k, v| @config[k.to_sym] = v if @valid_config_keys.include? k.to_sym }
+  end
+
+  # Configure through yaml file
+  def self.configure_with(path_to_yaml_file)
+    begin
+      config = YAML.safe_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
+      log(:warning, 'YAML configuration file contains invalid syntax. Using defaults.'); return
+    end
+
+    configure(config)
+  end
+
+  def self.config
+    @config
+  end
+end

data/lib/ajax_canvas_field/rails/engine.rb

@@ -0,0 +1,12 @@
+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|
+          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 )
+      end
+    end
+  end
+end

data/lib/ajax_canvas_field/rails/version.rb

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

data/lib/ajax_canvas_field/rails.rb

@@ -0,0 +1,7 @@
+require 'ajax_canvas_field/rails/engine' if ::Rails.version >= '3.1'
+require 'ajax_canvas_field/rails/version'
+
+module AjaxCanvasField #:nodoc:
+  module Rails #:nodoc:
+  end
+end

data/lib/ajax_canvas_field.rb

@@ -0,0 +1,2 @@
+require 'ajax_canvas_field/rails'
+require 'ajax_canvas_field/config'

data/lib/generators/ajax_canvas_field/ajax_canvas_field_generator.rb

@@ -0,0 +1,15 @@
+require 'rails/generators/base'
+
+class AjaxCanvasFieldGenerator < Rails::Generators::Base
+  source_root File.expand_path("../templates", __FILE__)
+
+  desc "Copy the initializer for AjaxCanvasField"
+  def copy_initializer_file
+    copy_file "initializer.rb", "config/initializers/ajax_canvas_field.rb"
+
+    inject_into_file 'app/assets/javascripts/application.js', "//= require ajax_canvas_field\n", before: "//= require_tree ." rescue nil
+    inject_into_file 'app/assets/stylesheets/application.scss', " *= require ajax_canvas_field\n", before: " *= require_tree ." rescue nil
+    inject_into_file 'app/assets/stylesheets/application.scss.erb', " *= require ajax_canvas_field\n", before: " *= require_tree ." rescue nil
+    inject_into_file 'app/assets/stylesheets/application.css.scss', " *= require ajax_canvas_field\n", before: " *= require_tree ." rescue nil
+  end
+end

data/lib/generators/ajax_canvas_field/templates/initializer.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+AjaxCanvasField.configure(default_height: 400,
+                          default_width: 400,
+                          default_left_color: '#ff0000',
+                          default_middle_color: '#00ff00',
+                          default_right_color: '#0000ff')

data/views/ajax_canvas_field/_canvas_legend.html.haml

@@ -0,0 +1,21 @@
+%table
+  - unless no_header
+    %thead
+      %tr
+        %th.canvas_legend_sub Linke Maustaste
+        %th.canvas_legend_sub Mittlere Maustaste
+        %th.canvas_legend_sub Rechte Maustaste
+  %tbody
+    - unless no_icon
+      %tr
+        %td.canvas_legend_sub= image_tag('mouse_left.png', size: '50x50')
+        %td.canvas_legend_sub= image_tag('mouse_middle.png', size: '50x50')
+        %td.canvas_legend_sub= image_tag('mouse_right.png', size: '50x50')
+    %tr
+      %td.canvas_legend_sub= left_text
+      %td.canvas_legend_sub= middle_text
+      %td.canvas_legend_sub= right_text
+    %tr
+      %td.canvas_legend_sub{ style: "background-color: #{left_color}" }
+      %td.canvas_legend_sub{ style: "background-color: #{middle_color}" }
+      %td.canvas_legend_sub{ style: "background-color: #{right_color}" }

metadata

@@ -0,0 +1,101 @@
+--- !ruby/object:Gem::Specification
+name: ajax_canvas_field
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- datyv
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2017-10-19 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.15'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.15'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+description: Add a CanvasField to point out errors in three different colors
+email:
+- yvesgoizet@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- Gemfile
+- README.md
+- Rakefile
+- ajax_canvas_field.gemspec
+- app/assets/images/mouse_left.png
+- 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
+- assets/images/mouse_left.png
+- assets/images/mouse_middle.png
+- assets/images/mouse_right.png
+- assets/javascripts/ajax_canvas_field.js
+- assets/javascripts/ro_canvas_field.js
+- assets/stylesheets/ajax_canvas_field.css
+- helpers/canvas_field_helper.rb
+- lib/ajax_canvas_field.rb
+- lib/ajax_canvas_field/config.rb
+- lib/ajax_canvas_field/rails.rb
+- lib/ajax_canvas_field/rails/engine.rb
+- lib/ajax_canvas_field/rails/version.rb
+- lib/generators/ajax_canvas_field/ajax_canvas_field_generator.rb
+- lib/generators/ajax_canvas_field/templates/initializer.rb
+- views/ajax_canvas_field/_canvas_legend.html.haml
+homepage: https://github.com/Datyv/ajax_canvas_field
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+post_install_message: 
+rdoc_options: []
+require_paths:
+- app
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.2
+signing_key: 
+specification_version: 4
+summary: HTML5 CanvasField Support
+test_files: []