ajax_canvas_field 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b6473159e106c84c7d22f88082f09673881e75ba
-  data.tar.gz: 19c2ded0fa28248bad6827bd640ad08d3d1b45ba
+  metadata.gz: 4522031a4b3b1403d3699fd0601d7fd45284a1bb
+  data.tar.gz: a8ab6ee6b1d44e000f3534dafbe8d0f70e500589
 SHA512:
-  metadata.gz: 7a1804d70527ba1bab761106cbcf05b240d70909bba0b8a181b40c64ec39d30e4f131c86039ea899e019facac4fac3460f476c64cc51636d0ac06f722f250f78
-  data.tar.gz: 8a1b0af731180d5698822a7ed7321a8ed92fefa640ecafffd8abf1508dde7b3115355e5592f6a64dadcc2c64f0c36b357cc2af016fa0580b4a8f10f409688b30
+  metadata.gz: e78fe914a40afafc47e9dd55ae2469466c0ee649609a0060565a59fe00444f71a80f0c82d6c8108560a192f751128d5a2f1b662bd943bf6bae37a53dfbdf1b12
+  data.tar.gz: 21c9a9c8d7d0c184f576a835de18dccfdab90138d3f29fe1ebfca3fcffe450f73b44ae97b24cfc9421baaf46cc94dce855965c95154e30623a3928f5beb9a015

data/README.md

@@ -10,73 +10,85 @@ gem 'ajax_canvas_field'
 ```
 
 And then execute:
+```shell
+$ bundle
+```
+Or install it yourself as:
+```shell
+$ gem install ajax_canvas_field
+```
 
-    $ bundle
+##### After bundle
+```shell
+$ rails g ajax_canvas_field
+```
+This add the following:
+* `initializers/ajax_canvas_field.rb`
+```ruby
+AjaxCanvasField.configure(default_height: 400,
+                            default_width: 400,
+                            default_left_color: '#ff0000',
+                            default_middle_color: '#00ff00',
+                            default_right_color: '#0000ff')
+```
 
-Or install it yourself as:
+* `assets/javascripts/application.js`
+```js
+//= require ajax_canvas_field
+```
 
-    $ gem install ajax_canvas_field
+* `assets/stylesheets/application.scss`
+  `assets/stylesheets/application.scss.erb`
+  `assets/stylesheets/application.css.scss`
+```sass
+*= require ajax_canvas_field
+```
 
 ## Usage
-There are three tasks you can execute.
+This Gem provides you with some View-Helper for Rails
 
-### 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   
-...
+1. `canvas_field`
+Provides the main canvas_field with id: #canvas_field
+```ruby
+# options
+:namespace # URL Namespace for ajax-POST e.g. 'api/v1'
+:controller # URL Controller for ajax-POST e.g. 'canvas_fields'
+:background_url # File-Path for background image
 ```
-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
+
+1. `canvas_data_field(active)`
+Provides a data-Field for different datasets
+```ruby
+# args
+:active (bool) # Is this the active data field?
+# options
+:additional_data # Additional Data to provide to the AJAX-POST
+:initial_data # The Initial-Data that is loaded
+:content # Symbol that appears in the Dot
 ```
+1. `canvas_legend_field`
+Renders a Legend Table for the Field
+```ruby
+# options
+:left_text # Text for left Click
+:middle_text # Text for middle Click
+:right_text # Text for right Click
+:left_color # Color for left Click e.g. '#ffff00'
+:middle_color # Color for middle Click e.g. '#ffff00'
+:right_color # Color for right Click e.g. '#ffff00'
+:no_icon # Hide Mouse-Icon-Row
+:no_header # Hide Header
 ```
-LostInTranslation.interactive
-or
-LostInTranslation.recent
-or
-LostInTranslation.cleanup
+1. `ro_canvas_field`
+Provides readonly canvas_fields with class: .canvas_field, for showing the results of all datasets on one Page
+```ruby
+# options
+:background_url # File-Path for background image
 ```
 
-#### 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.
+Bug reports and pull requests are welcome on GitHub at https://github.com/datyv/ajax_canvas_field. 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

data/app/assets/javascripts/ajax_canvas_field.js

@@ -166,9 +166,15 @@ document.addEventListener('DOMContentLoaded', function(){
         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);
+      if (canvas.dataset.leftActive) {
+        canvas.addEventListener('click', isPixelCollision, false);
+      }
+      if (canvas.dataset.middleActive) {
+        canvas.addEventListener('auxclick', isPixelCollision, false);
+      }
+      if (canvas.dataset.rightActive) {
+        canvas.addEventListener('contextmenu', isPixelCollision, false);
+      }
       initCircles();
 
       var tableRows = document.getElementsByClassName('request_row');

data/app/assets/stylesheets/ajax_canvas_field.css

@@ -18,7 +18,7 @@
 }
 
 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;
+  -webkit-box-shadow: 0px 0px 46px -2px #ff0000 inset;
+  -moz-box-shadow: 0px 0px 46px -2px #ff0000 inset;
+  box-shadow: 0px 0px 46px -2px #ff0000 inset;
 }

data/app/helpers/canvas_field_helper.rb

@@ -22,25 +22,28 @@ module CanvasFieldHelper
   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
-    }
+    locals = { no_icon: (options[:no_icon] || false), no_header: (options[:no_header] || false) }
+    %w[left middle right].each do |side|
+      locals["#{side}_text".to_sym] = options["#{side}_text"] || ''
+      locals["#{side}_initial".to_sym] = options["#{side}_initial"] || ''
+      locals["#{side}_color".to_sym] = options["#{side}_color"] || '#ff0000'
+      locals["#{side}_active".to_sym] = options["#{side}_active"] || false
+    end
     render partial: 'ajax_canvas_field/canvas_legend', locals: locals
   end
 
   def ro_canvas_field(options = {})
+    data = collect_ro_data(options)
     background_url = options[:background_url].blank? ? '' : "url(#{options[:background_url]})"
     background = "background: #fff #{background_url} no-repeat center top"
+    if options[:half_size]
+      data[:width] = data[:width] / 2
+      data[:height] = data[:height] / 2
+      background += "; background_size: #{data[:width]}px #{data[:height]}px"
+    end
     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'
+    content_tag :canvas, failure_message, data: data, style: background, class: 'canvas_field'
   end
 
   private
@@ -53,7 +56,10 @@ module CanvasFieldHelper
       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' }
+      right_color: options[:right_color] || '#0000ff',
+      left_active: options[:left_active] || false,
+      middle_active: options[:middle_active] || false,
+      right_active: options[:right_active] || false }
   end
 
   def collect_ro_data(options)

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

@@ -12,9 +12,19 @@
         %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
+      %td.canvas_legend_sub
+        = left_text
+        = " (#{left_initial})" unless left_initial.blank?
+      %td.canvas_legend_sub
+        = middle_text
+        = " (#{middle_initial})" unless middle_initial.blank?
+      %td.canvas_legend_sub
+        = right_text
+        = " (#{right_initial})" unless right_initial.blank?
+    %tr
+      %td.canvas_legend_sub= left_active ? 'Aktiviert' : 'Deaktiviert'
+      %td.canvas_legend_sub= middle_active ? 'Aktiviert' : 'Deaktiviert'
+      %td.canvas_legend_sub= right_active ? 'Aktiviert' : 'Deaktiviert'
     %tr
       %td.canvas_legend_sub{ style: "background-color: #{left_color}" }
       %td.canvas_legend_sub{ style: "background-color: #{middle_color}" }

data/lib/ajax_canvas_field/rails/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ajax_canvas_field
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - datyv
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-10-19 00:00:00.000000000 Z
+date: 2017-10-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -57,13 +57,6 @@ files:
 - 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
@@ -71,7 +64,6 @@ files:
 - 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

data/assets/javascripts/ajax_canvas_field.js

@@ -1,192 +0,0 @@
-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

@@ -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();
-  }
-}

data/assets/stylesheets/ajax_canvas_field.css

@@ -1,24 +0,0 @@
-#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

@@ -1,67 +0,0 @@
-# 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/views/ajax_canvas_field/_canvas_legend.html.haml

@@ -1,21 +0,0 @@
-%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}" }