highlight-within-textarea-rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: fca4600b2958b37492eefd322d3eccbbaef6d568
+  data.tar.gz: 769b20b03f15f7df573be62a25dedcdacdd9d99f
+SHA512:
+  metadata.gz: '01228d403dfbb99b0e471e2f6905a8f6953022b7c0c5368e0bed5069053396eb06a171568940e82e550b15a5e320eff1543063054f45d1624344f84ad1ebc47b'
+  data.tar.gz: f14ba7338a1c2ad920185232736decc7d9ab02f73966d56f13ceafb9928efb03c5418a79048b12c8b6a3d8567c018cec5c0aa3b3da8b27b37b5e6df68af4e744

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/Gemfile

@@ -0,0 +1,6 @@
+source "https://rubygems.org"
+
+git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
+
+# Specify your gem's dependencies in highlight-within-textarea-rails.gemspec
+gemspec

data/README.md

@@ -0,0 +1,47 @@
+# Highlight::Within::Textarea::Rails
+
+## What is this?
+
+A gemified version of **highlight-within-textarea** (jQuery plugin for highlighting bits of text within a textarea).
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'highlight-within-textarea-rails'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install highlight-within-textarea-rails
+
+## Usage
+
+Add the following line to `app/assets/javascripts/application.js`:
+
+```javascript
+//= require jquery.highlight-within-textarea.js
+```
+
+and `app/assets/stylesheets/application.css`:
+
+```css
+*= require jquery.highlight-within-textarea.css
+```
+
+and then [RTFM](https://github.com/lonekorean/highlight-within-textarea).
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. 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/ukazap/highlight-within-textarea-rails.

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "highlight/within/textarea/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(__FILE__)

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/highlight-within-textarea-rails.gemspec

@@ -0,0 +1,25 @@
+# coding: utf-8
+lib = File.expand_path("../lib", __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require "highlight/within/textarea/rails/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "highlight-within-textarea-rails"
+  spec.version       = Highlight::Within::Textarea::Rails::VERSION
+  spec.authors       = ["Ukaza Perdana"]
+  spec.email         = ["hello@ukazap.space"]
+
+  spec.summary       = "Gemified version of highlight-within-textarea"
+  spec.description   = "jQuery plugin for highlighting bits of text within a textarea."
+  spec.homepage      = "https://github.com/ukazap/highlight-within-textarea-rails"
+
+  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.15"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

data/lib/highlight/within/textarea/rails.rb

@@ -0,0 +1,12 @@
+require "highlight/within/textarea/rails/version"
+
+module Highlight
+  module Within
+    module Textarea
+      module Rails
+        class Engine < ::Rails::Engine
+        end
+      end
+    end
+  end
+end

data/lib/highlight/within/textarea/rails/version.rb

@@ -0,0 +1,9 @@
+module Highlight
+  module Within
+    module Textarea
+      module Rails
+        VERSION = "0.1.0"
+      end
+    end
+  end
+end

data/vendor/assets/javascripts/jquery.highlight-within-textarea.js

@@ -0,0 +1,380 @@
+/*
+ * highlight-within-textarea
+ *
+ * @author  Will Boyd
+ * @github  https://github.com/lonekorean/highlight-within-textarea
+ */
+
+(function($) {
+  let ID = 'hwt';
+
+  let HighlightWithinTextarea = function($el, config) {
+    this.init($el, config);
+  };
+
+  HighlightWithinTextarea.prototype = {
+    init: function($el, config) {
+      this.$el = $el;
+
+      // backwards compatibility with v1 (deprecated)
+      if (this.getType(config) === 'function') {
+        config = { highlight: config };
+      }
+
+      if (this.getType(config) === 'custom') {
+        this.highlight = config;
+        this.generate();
+      } else {
+        console.error('valid config object not provided');
+      }
+    },
+
+    // returns identifier strings that aren't necessarily "real" JavaScript types
+    getType: function(instance) {
+      let type = typeof instance;
+      if (!instance) {
+        return 'falsey';
+      } else if (Array.isArray(instance)) {
+        if (instance.length === 2 && typeof instance[0] === 'number' && typeof instance[1] === 'number') {
+          return 'range';
+        } else {
+          return 'array';
+        }
+      } else if (type === 'object') {
+        if (instance instanceof RegExp) {
+          return 'regexp';
+        } else if (instance.hasOwnProperty('highlight')) {
+          return 'custom';
+        }
+      } else if (type === 'function' || type === 'string') {
+        return type;
+      }
+
+      return 'other';
+    },
+
+    generate: function() {
+      this.$el
+        .addClass(ID + '-input ' + ID + '-content')
+        .on('input.' + ID, this.handleInput.bind(this))
+        .on('scroll.' + ID, this.handleScroll.bind(this));
+
+      this.$highlights = $('<div>', { class: ID + '-highlights ' + ID + '-content' });
+
+      this.$backdrop = $('<div>', { class: ID + '-backdrop' })
+        .append(this.$highlights);
+
+      this.$container = $('<div>', { class: ID + '-container' })
+        .insertAfter(this.$el)
+        .append(this.$backdrop, this.$el) // moves $el into $container
+        .on('scroll', this.blockContainerScroll.bind(this));
+
+      this.browser = this.detectBrowser();
+      switch (this.browser) {
+        case 'firefox':
+          this.fixFirefox();
+          break;
+        case 'ios':
+          this.fixIOS();
+          break;
+      }
+
+      // plugin function checks this for success
+      this.isGenerated = true;
+
+      // trigger input event to highlight any existing input
+      this.handleInput();
+    },
+
+    // browser sniffing sucks, but there are browser-specific quirks to handle
+    // that are not a matter of feature detection
+    detectBrowser: function() {
+      let ua = window.navigator.userAgent.toLowerCase();
+      if (ua.indexOf('firefox') !== -1) {
+        return 'firefox';
+      } else if (!!ua.match(/msie|trident\/7|edge/)) {
+        return 'ie';
+      } else if (!!ua.match(/ipad|iphone|ipod/) && ua.indexOf('windows phone') === -1) {
+        // Windows Phone flags itself as "like iPhone", thus the extra check
+        return 'ios';
+      } else {
+        return 'other';
+      }
+    },
+
+    // Firefox doesn't show text that scrolls into the padding of a textarea, so
+    // rearrange a couple box models to make highlights behave the same way
+    fixFirefox: function() {
+      // take padding and border pixels from highlights div
+      let padding = this.$highlights.css([
+        'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
+      ]);
+      let border = this.$highlights.css([
+        'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
+      ]);
+      this.$highlights.css({
+        'padding': '0',
+        'border-width': '0'
+      });
+
+      this.$backdrop
+        .css({
+          // give padding pixels to backdrop div
+          'margin-top': '+=' + padding['padding-top'],
+          'margin-right': '+=' + padding['padding-right'],
+          'margin-bottom': '+=' + padding['padding-bottom'],
+          'margin-left': '+=' + padding['padding-left'],
+        })
+        .css({
+          // give border pixels to backdrop div
+          'margin-top': '+=' + border['border-top-width'],
+          'margin-right': '+=' + border['border-right-width'],
+          'margin-bottom': '+=' + border['border-bottom-width'],
+          'margin-left': '+=' + border['border-left-width'],
+        });
+    },
+
+    // iOS adds 3px of (unremovable) padding to the left and right of a textarea,
+    // so adjust highlights div to match
+    fixIOS: function() {
+      this.$highlights.css({
+        'padding-left': '+=3px',
+        'padding-right': '+=3px'
+      });
+    },
+
+    handleInput: function() {
+      let input = this.$el.val();
+      let ranges = this.getRanges(input, this.highlight);
+      let unstaggeredRanges = this.removeStaggeredRanges(ranges);
+      let boundaries = this.getBoundaries(unstaggeredRanges);
+      this.renderMarks(boundaries);
+    },
+
+    getRanges: function(input, highlight) {
+      let type = this.getType(highlight);
+      switch (type) {
+        case 'array':
+          return this.getArrayRanges(input, highlight);
+        case 'function':
+          return this.getFunctionRanges(input, highlight);
+        case 'regexp':
+          return this.getRegExpRanges(input, highlight);
+        case 'string':
+          return this.getStringRanges(input, highlight);
+        case 'range':
+          return this.getRangeRanges(input, highlight);
+        case 'custom':
+          return this.getCustomRanges(input, highlight);
+        default:
+          if (!highlight) {
+            // do nothing for falsey values
+            return [];
+          } else {
+            console.error('unrecognized highlight type');
+          }
+      }
+    },
+
+    getArrayRanges: function(input, arr) {
+      let ranges = arr.map(this.getRanges.bind(this, input));
+      return Array.prototype.concat.apply([], ranges);
+    },
+
+    getFunctionRanges: function(input, func) {
+      return this.getRanges(input, func(input));
+    },
+
+    getRegExpRanges: function(input, regex) {
+      let ranges = [];
+      let match;
+      while (match = regex.exec(input), match !== null) {
+        ranges.push([match.index, match.index + match[0].length]);
+        if (!regex.global) {
+          // non-global regexes do not increase lastIndex, causing an infinite loop,
+          // but we can just break manually after the first match
+          break;
+        }
+      }
+      return ranges;
+    },
+
+    getStringRanges: function(input, str) {
+      let ranges = [];
+      let inputLower = input.toLowerCase();
+      let strLower = str.toLowerCase();
+      let index = 0;
+      while (index = inputLower.indexOf(strLower, index), index !== -1) {
+        ranges.push([index, index + strLower.length]);
+        index += strLower.length;
+      }
+      return ranges;
+    },
+
+    getRangeRanges: function(input, range) {
+      return [range];
+    },
+
+    getCustomRanges: function(input, custom) {
+      let ranges = this.getRanges(input, custom.highlight);
+      if (custom.className) {
+        ranges.forEach(function(range) {
+          // persist class name as a property of the array
+          if (range.className) {
+            range.className = custom.className + ' ' + range.className;
+          } else {
+            range.className = custom.className;
+          }
+        });
+      }
+      return ranges;
+    },
+
+    // prevent staggered overlaps (clean nesting is fine)
+    removeStaggeredRanges: function(ranges) {
+      let unstaggeredRanges = [];
+      ranges.forEach(function(range) {
+        let isStaggered = unstaggeredRanges.some(function(unstaggeredRange) {
+          let isStartInside = range[0] > unstaggeredRange[0] && range[0] < unstaggeredRange[1];
+          let isStopInside = range[1] > unstaggeredRange[0] && range[1] < unstaggeredRange[1];
+          return isStartInside !== isStopInside; // xor
+        });
+        if (!isStaggered) {
+          unstaggeredRanges.push(range);
+        }
+      });
+      return unstaggeredRanges;
+    },
+
+    getBoundaries: function(ranges) {
+      let boundaries = [];
+      ranges.forEach(function(range) {
+        boundaries.push({
+          type: 'start',
+          index: range[0],
+          className: range.className
+        });
+        boundaries.push({
+          type: 'stop',
+          index: range[1]
+        });
+      });
+
+      this.sortBoundaries(boundaries);
+      return boundaries;
+    },
+
+    sortBoundaries: function(boundaries) {
+      // backwards sort (since marks are inserted right to left)
+      boundaries.sort(function(a, b) {
+        if (a.index !== b.index) {
+          return b.index - a.index;
+        } else if (a.type === 'stop' && b.type === 'start') {
+          return 1;
+        } else if (a.type === 'start' && b.type === 'stop') {
+          return -1;
+        } else {
+          return 0;
+        }
+      });
+    },
+
+    renderMarks: function(boundaries) {
+      let input = this.$el.val();
+      boundaries.forEach(function(boundary, index) {
+        let markup;
+        if (boundary.type === 'start') {
+          markup = '{{hwt-mark-start|' + index + '}}';
+        } else {
+          markup = '{{hwt-mark-stop}}';
+        }
+        input = input.slice(0, boundary.index) + markup + input.slice(boundary.index);
+      });
+
+      // this keeps scrolling aligned when input ends with a newline
+      input = input.replace(/\n(\{\{hwt-mark-stop\}\})?$/, '\n\n$1');
+
+      // encode HTML entities
+      input = input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+      if (this.browser === 'ie') {
+        // IE/Edge wraps whitespace differently in a div vs textarea, this fixes it
+        input = input.replace(/ /g, ' <wbr>');
+      }
+
+      // replace start tokens with opening <mark> tags with class name
+      input = input.replace(/\{\{hwt-mark-start\|(\d+)\}\}/g, function(match, submatch) {
+        var className = boundaries[+submatch].className;
+        if (className) {
+          return '<mark class="' + className + '">';
+        } else {
+          return '<mark>';
+        }
+      });
+
+      // replace stop tokens with closing </mark> tags
+      input = input.replace(/\{\{hwt-mark-stop\}\}/g, '</mark>');
+
+      this.$highlights.html(input);
+    },
+
+    handleScroll: function() {
+      let scrollTop = this.$el.scrollTop();
+      this.$backdrop.scrollTop(scrollTop);
+
+      // Chrome and Safari won't break long strings of spaces, which can cause
+      // horizontal scrolling, this compensates by shifting highlights by the
+      // horizontally scrolled amount to keep things aligned
+      let scrollLeft = this.$el.scrollLeft();
+      this.$backdrop.css('transform', (scrollLeft > 0) ? 'translateX(' + -scrollLeft + 'px)' : '');
+    },
+
+    // in Chrome, page up/down in the textarea will shift stuff within the
+    // container (despite the CSS), this immediately reverts the shift
+    blockContainerScroll: function() {
+      this.$container.scrollLeft(0);
+    },
+
+    destroy: function() {
+      this.$backdrop.remove();
+      this.$el
+        .unwrap()
+        .removeClass(ID + '-text ' + ID + '-input')
+        .off(ID)
+        .removeData(ID);
+    },
+  };
+
+  // register the jQuery plugin
+  $.fn.highlightWithinTextarea = function(options) {
+    return this.each(function() {
+      let $this = $(this);
+      let plugin = $this.data(ID);
+
+      if (typeof options === 'string') {
+        if (plugin) {
+          switch (options) {
+            case 'update':
+              plugin.handleInput();
+              break;
+            case 'destroy':
+              plugin.destroy();
+              break;
+            default:
+              console.error('unrecognized method string');
+          }
+        } else {
+          console.error('plugin must be instantiated first');
+        }
+      } else {
+        if (plugin) {
+          plugin.destroy();
+        }
+        plugin = new HighlightWithinTextarea($this, options);
+        if (plugin.isGenerated) {
+          $this.data(ID, plugin);
+        }
+      }
+    });
+  };
+})(jQuery);

data/vendor/assets/stylesheets/jquery.highlight-within-textarea.css

@@ -0,0 +1,48 @@
+.hwt-container {
+  display: inline-block;
+  position: relative;
+  overflow: hidden !important;
+  -webkit-text-size-adjust: none !important;
+}
+
+.hwt-backdrop {
+  position: absolute !important;
+  top: 0 !important;
+  right: -99px !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  padding-right: 99px !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+}
+
+.hwt-highlights {
+  width: auto !important;
+  height: auto !important;
+  border-color: transparent !important;
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  color: transparent !important;
+  overflow: hidden !important;
+}
+
+.hwt-input {
+  display: block !important;
+  position: relative !important;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  font: inherit;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+}
+
+.hwt-content {
+  border: 1px solid;
+  background: none transparent !important;
+}
+
+.hwt-content mark {
+  padding: 0 !important;
+  color: inherit;
+}

metadata

@@ -0,0 +1,82 @@
+--- !ruby/object:Gem::Specification
+name: highlight-within-textarea-rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Ukaza Perdana
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2017-11-03 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: jQuery plugin for highlighting bits of text within a textarea.
+email:
+- hello@ukazap.space
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- highlight-within-textarea-rails.gemspec
+- lib/highlight/within/textarea/rails.rb
+- lib/highlight/within/textarea/rails/version.rb
+- vendor/assets/javascripts/jquery.highlight-within-textarea.js
+- vendor/assets/stylesheets/jquery.highlight-within-textarea.css
+homepage: https://github.com/ukazap/highlight-within-textarea-rails
+licenses: []
+metadata: {}
+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.6.11
+signing_key: 
+specification_version: 4
+summary: Gemified version of highlight-within-textarea
+test_files: []