json_input_bootstrap_rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 9564cb6dcca12cc51b43c0592c3517d763198417
+  data.tar.gz: ab880c7d0c4d0f5c8726ef209de236097a079001
+SHA512:
+  metadata.gz: 2dd828dbb38ac9cc3d53ee33212f1123f1913a78f1036b17ad86986b7238cf6f16bfc524b1fd83eb3a2997a0d048786c66f167c33a5817b6b02b7846b192e1e5
+  data.tar.gz: 177b29300690807b31fd19092437b6ed147a38e560c60bd5d0332b94e9c0e8282bc78fd5045645121879c565de96ff1c52a25ed648ef7eac6d2548533045c93b

data/Gemfile

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

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/app/assets/javascripts/json_input_bootstrap_rails.js

@@ -0,0 +1,66 @@
+$(document).ready(function() {
+
+  if ($('.json-input-bootstrap-rails').length > 0) {
+    $("body").append('<div id="json-input-modal" class="modal fade" aria-labelledby="JsonInputModal" role="dialog"><div class="modal-dialog modal-lg"><div id="json-input-modal-content" class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 id="json-title" class="modal-title">JSON Input</h4></div><form id="json-form"><div id="json-rows" class="modal-body"><div class="row json-header-row"><label id="json-header-key" class="control-label col-xs-5">key</label><label class="control-label col-xs-1">:</label><label id="json-header-value" class="control-label col-xs-5">value</label></div></div><div class="modal-footer"><div class="row"><div class="col-xs-11"></div><div class="btn-area col-xs-1"><button id="add-row" type="button" class="btn btn-success">+</button></div></div></div></form></div></div></div>');
+
+    var modal = $("#json-input-modal");
+    var json_form = $("#json-form");
+    var json_rows = $("#json-rows");
+
+    var new_row = '<div class="row json-row"><div class="form-group"><div class="key-field col-xs-5"><input class="form-control"></div><div class="colon-field col-xs-1"><span>:</span></div><div class="value-field col-xs-5"><input class="form-control"></div><div class="delete-area btn-area col-xs-1"><button class="delete-button btn btn-danger" type="button">x</button></div></div></div>';
+
+    $(document).on('click', ".json-input-bootstrap-rails", function(e) {
+      json_form.attr("data", this.id);
+      var text_area = $(e.target);
+      var current_text = "";
+      var keyLabel = text_area.attr('data-key-label');
+      if (typeof keyLabel !== typeof undefined && keyLabel !== false) {
+        $('#json-header-key').text(keyLabel);
+      }
+      var valueLabel = text_area.attr('data-value-label');
+      if (typeof valueLabel !== typeof undefined && valueLabel !== false){
+        $('#json-header-value').text(valueLabel);
+      }
+      var title = text_area.attr('data-title');
+      if (typeof title !== typeof undefined && title !== false) {
+        $('#json-title').text(title);
+      } else {
+        $('#json-title').text(text_area.attr('name'));
+      }
+
+      if (this.value == "") {
+        $(".json-row").remove();
+        json_rows.append(new_row);
+      } else {
+        current_text = JSON.parse(this.value);
+        $(".json-row").remove();
+        $.each(current_text, function(key, val){
+          json_rows.append('<div class="row json-row"><div class="form-group"><div class="key-field col-xs-5"><input class="key-data form-control" value="' + key + '"></div><div class="colon-holder col-xs-1"><span>:</span></div><div class="value-field col-xs-5"><input class="value-data form-control" value="' + val + '"></div><div class="delete-area btn-area col-xs-1"><button class="delete-button btn btn-danger" type="button">x</button></div></div></div>');
+        })
+        json_rows.append(new_row);
+      }
+      modal.modal('show');
+    })
+
+    $(document).on('click', '#json-input-modal #add-row', function(){
+      $("#json-rows").append(new_row);
+    });
+
+    $(document).on('click', '#json-input-modal .delete-button', function() {
+      this.parentElement.parentElement.remove();
+    });
+
+    $(document).on('hidden.bs.modal', '#json-input-modal', function () {
+      var values = [];
+      var pairs = {};
+      $("#json-form input").each(function(index, data){ values.push($(this).val()) });
+      values = values.filter(function(n){ return n != "" });
+      for (var i=0; i < values.length; i = i+2) {
+        pairs[values[i]] = values[i+1];
+      }
+      var json = JSON.stringify(pairs);
+      $('[id='+ json_form.attr("data") +']').val(json);
+      modal.modal('hide');
+    })
+  }
+});

data/app/assets/stylesheets/json_input_bootstrap_rails.css

@@ -0,0 +1,11 @@
+#json-input-modal label, #json-input-modal .colon-field {
+  text-align: center;
+}
+
+#json-input-modal .json-row {
+  margin-bottom: 20px;
+}
+
+#json-input-modal .btn-area button {
+  width: 100%;
+}

data/app/sample.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>json_input_bootstrap_rails</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <link rel="stylesheet" href="./assets/stylesheets/json_input_bootstrap_rails.css">
+  </head>
+  <body>
+    <h2>Sample JSON Payload</h2>
+    <br>
+    <div class="container">
+      <div class="row">
+        <div id="payload-params">
+          <label class="control-label">Text Area 1</label>
+          <textarea id="text-area-1" class="json-input-bootstrap-rails form-control"></textarea>
+          <br>
+          <label class="control-label">Text Area 2</label>
+          <textarea id="text-area-2" class="json-input-bootstrap-rails form-control"></textarea>
+        </div>
+      </div>
+    </div>
+  </body>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+  <script src="./assets/javascripts/json_input_bootstrap_rails.js"></script>
+</html>

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "json_input_bootstrap_rails"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/json_input_bootstrap_rails.gemspec

@@ -0,0 +1,35 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'json_input_bootstrap_rails/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "json_input_bootstrap_rails"
+  spec.version       = JsonInputBootstrapRails::VERSION
+  spec.authors       = ["Dave Wexler"]
+  spec.email         = ["dave@xapix.io", "oliver@xapix.io"]
+  spec.license       = 'MIT'
+  spec.summary       = %q{A gem that takes form entries in key-value form and converts to a JSON string.}
+  spec.description   = %q{A gem that will pop up a modal with a form when you click on a textarea in which you want a stringified JSON object. Simply fill in the form's keys and values and click save, and it will populate the corresponding textarea with a stringified JSON object. Ideal for quick preparation of JSON payload params for POST requests.}
+  spec.homepage      = "https://github.com/xapix-io/json-input-bootstrap-rails"
+
+  # 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").reject do |f|
+    f.match(%r{^(test|spec|features)/})
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.13"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "rspec", "~> 3.0"
+end

data/lib/json_input_bootstrap_rails.rb

@@ -0,0 +1,6 @@
+require "json_input_bootstrap_rails/version"
+
+module JsonInputBootstrapRails
+  class Engine < Rails::Engine
+  end
+end

data/lib/json_input_bootstrap_rails/version.rb

@@ -0,0 +1,3 @@
+module JsonInputBootstrapRails
+  VERSION = "0.1.0"
+end

data/readme.md

@@ -0,0 +1,72 @@
+# json_input_bootstrap_rails 0.1.0
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'json_input_bootstrap_rails'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install json_input_bootstrap_rails
+
+## Usage
+
+## JSON-Helper 0.1.0
+
+### What it does
+
+This gem will add Javascript and CSS to a rails project to let JSONified text get made for you simply by entering in key-value fields in a pop-up form within a modal. No more having to write out all those squigly-brackets, quotation marks, and colons; this will do it for you.
+
+The functionality is very basic right now, as this is really just meant as a handy shortcut if you need, for example, payload params in a POST request to be quickly converted to JSON.
+
+### Contents
+
+There are four files in this package, including this README.
+
+The others are:
+
+#### sample.html
+This file has a sample html file which includes two text areas with the proper class for the javascript/css to work. Things to note in this file are that:
+
+1. When the page loads, a custom modal is appended to the end of the body section. It's unlikely, but if your IDs/classes match the names of stuff in this modal, it'll stop working.
+2. Each text area has an ID attribute. This is required so that the script knows where to put your stringified JSON when you click save. It'll add the final output JSON to the textarea with the ID in which you clicked to open the modal. The ID can be anything you like--there is no required convention for this part--it just needs to be there.
+3. Each text area that you want to trigger the script for needs to have a class of "json-input-bootstrap-rails".
+
+#### json_input_bootstrap_rails.css
+This file has the CSS to style elements of the modal. Feel free to edit the style as you like, just be careful about renaming the pre-given non-bootstrap classes, as they might mess with the Javascript if you change them.
+
+Also, there are some Twitter Bootstrap classes included too, so if you're using that you've got extra built-in styling shortcuts. These are discardable/changeable if you like.
+
+#### json_input_bootstrap_rails.js
+This is where all the javascript lives, including functions to append the modal upon document ready and opening it when you click in a textarea you want JSONified, adding and deleting rows from the form, and the conversion upon hitting the save button.
+
+## Don't change these classes!
+
+These are the classes and IDs you need to make the Javascript (as currently written) work:
+
+1. Textareas: must have an ID (of anything you want to name it) and a class of "json-input-bootstrap-rails"
+2. Modal: must have an ID of "json-input-modal"
+3. Button to add a row in the form: ID of "add-row"
+4. Delete a row button (looks like an 'X'): class of "delete-button"
+5. Cancel button (just closes/hides the modal): ID of "cancel-button"
+6. Save button: ID of "save-button"
+7. The form within the modal content: ID of "json-form"
+
+That's it I think. Enjoy your auto-JSONified text!
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/json_input_bootstrap_rails.

metadata

@@ -0,0 +1,102 @@
+--- !ruby/object:Gem::Specification
+name: json_input_bootstrap_rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Dave Wexler
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2017-01-30 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.13'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.13'
+- !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'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+description: A gem that will pop up a modal with a form when you click on a textarea
+  in which you want a stringified JSON object. Simply fill in the form's keys and
+  values and click save, and it will populate the corresponding textarea with a stringified
+  JSON object. Ideal for quick preparation of JSON payload params for POST requests.
+email:
+- dave@xapix.io
+- oliver@xapix.io
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- Gemfile
+- Rakefile
+- app/assets/javascripts/json_input_bootstrap_rails.js
+- app/assets/stylesheets/json_input_bootstrap_rails.css
+- app/sample.html
+- bin/console
+- bin/setup
+- json_input_bootstrap_rails.gemspec
+- lib/json_input_bootstrap_rails.rb
+- lib/json_input_bootstrap_rails/version.rb
+- readme.md
+homepage: https://github.com/xapix-io/json-input-bootstrap-rails
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+post_install_message: 
+rdoc_options: []
+require_paths:
+- 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.4.5.1
+signing_key: 
+specification_version: 4
+summary: A gem that takes form entries in key-value form and converts to a JSON string.
+test_files: []