awesome_tooltip 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: bbfdec35a56aaf49f1fcfb538a16b48847bd6d13b92fff6f408373e83729b0ea
+  data.tar.gz: 26d65c37724f84882a20eaf6377b68b25cc1afa0a73be717163ce84fb168a16f
+SHA512:
+  metadata.gz: 43be165f360c59ecf5faf1b19035f88b9f2d8dc4334d3b51cf6c7ea94f59ff0ec8f609a72e57864fb8e8be927275923864ccd283405e69138a5d6710794c2a1b
+  data.tar.gz: 48be87c03ea8f7ffb28145629efeceae8884d7f4628fa5d03e8b182c8977536e04c4f8edf34a59ad6de8d0c46a03ce969a067c235aa241564149c033e6441410

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2019 Busko Bogdan
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,31 @@
+# AwesomeTooltip
+[![Build Status](https://travis-ci.com/BogdanBusko/awesome_tooltip.svg?branch=master)](https://travis-ci.com/BogdanBusko/awesome_tooltip)
+[![Maintainability](https://api.codeclimate.com/v1/badges/13a8f6106b17b50e9943/maintainability)](https://codeclimate.com/github/BogdanBusko/awesome_tooltip/maintainability)
+
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'awesome_tooltip'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install awesome_tooltip
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,27 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'AwesomeTooltip'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/javascripts/awesome_tooltip/tooltip.js

@@ -0,0 +1,148 @@
+(function (W, D) {
+  var loadType;
+  var timerId;
+  var config = {
+    tooltipPath: "/tooltip/",
+    delay: 1500,
+    location: "top"
+  };
+
+  if(typeof(Turbolinks) !== undefined) {
+    loadType = "turbolinks:load";
+  } else {
+    loadType = "DOMContentLoaded";
+  }
+
+  function handleMouseEnter(element) {
+    element.addEventListener("mouseenter", function(e) {
+      clearTimeout(timerId);
+
+      if(e.currentTarget.getAttribute("data-template") && !e.currentTarget.querySelector(".awesome-tooltip")) {
+        fetchData(e.currentTarget);
+      }
+    });
+  }
+
+  function handleMouseLeave(element) {
+    element.addEventListener("mouseleave", function(e){
+      var tooltip = e.currentTarget.querySelector("." + e.currentTarget.className.split(" ").join(".") + " .awesome-tooltip");
+
+      timerId = setTimeout(function() {
+        if(tooltip)
+          tooltip.remove();
+      }, config.delay);
+    });
+  }
+
+  function tooltipPosition(element) {
+    var tooltip         = element.querySelector(".awesome-tooltip");
+    var tooltipTriangle = tooltip.querySelector(".content-wrapper .triangle");
+    var elementRects    = element.getClientRects()[0];
+
+    var leftEnoughSpace   = tooltip.offsetWidth / 2 < elementRects.left;
+    var rightEnoughSpace  = tooltip.offsetWidth / 2  < D.body.offsetWidth - elementRects.right;
+    var bottomEnoughSpace = tooltip.offsetHeight < W.height - elementRects.bottom;
+    var topEnoughSpace    = tooltip.offsetHeight < elementRects.top;
+
+
+    if(leftEnoughSpace && rightEnoughSpace && topEnoughSpace && bottomEnoughSpace) {
+      tooltip.style.cssText = "left: " + ((elementRects.width / 2) - (tooltip.getClientRects()[0].width / 2)) + "px;";
+      tooltipTriangle.style.cssText = "left: calc(50% - " + (tooltipTriangle.offsetWidth / 2) + "px);";
+      return;
+    }
+
+    switch(element.getAttribute("data-location") || config.location) {
+    case "top":
+    case "bottom":
+      if(!topEnoughSpace && leftEnoughSpace && rightEnoughSpace) {
+        display(element, tooltipTriangle, "bottom");
+        break;
+      }
+
+      if(!bottomEnoughSpace && leftEnoughSpace && rightEnoughSpace) {
+        display(element, tooltipTriangle, "top");
+        break;
+      }
+
+      if(!topEnoughSpace) {
+        toggleLocation(tooltip, "bottom");
+      } else if(!bottomEnoughSpace) {
+        toggleLocation(tooltip, "top");
+      }
+
+      if(!leftEnoughSpace || !rightEnoughSpace) {
+        if(W.innerWidth / 2 > elementRects.right) {
+          tooltip.style.cssText = "left: -" + (elementRects.right - elementRects.left) + "px;";
+          tooltipTriangle.style.cssText = "left: " + (elementRects.right - elementRects.left + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";
+        } else {
+          tooltip.style.cssText = "right: -" + (D.body.offsetWidth - elementRects.right) + "px;";
+          tooltipTriangle.style.cssText = "right: " + (D.body.offsetWidth - elementRects.right + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";
+        }
+      }
+    }
+  }
+
+  function display(element, tooltipTriangle, location) {
+    var tooltip = element.querySelector(".awesome-tooltip");
+
+    toggleLocation(element, location);
+    tooltip.style.cssText = "left: " + ((element.getClientRects()[0].width / 2) - (tooltip.getClientRects()[0].width / 2)) + "px;";
+    tooltipTriangle.style.cssText = "left: calc(50% - " + (tooltipTriangle.offsetWidth / 2) + "px);";
+  }
+
+  function toggleLocation(element, location) {
+    element.className.replace(/top|bottom|left|right/gi, "").trim();
+    element.className += " " + location;
+    element.className.trim();
+  }
+
+  function tooltipTemplate(element, text) {
+    var elementLocation = element.getAttribute("data-location") || config.location;
+
+    element.insertAdjacentHTML("beforeend",
+      "<div class=\"awesome-tooltip " + elementLocation + "\">" +
+        "<div class=\"content-wrapper\">" +
+          "<div class=\"awesome-tooltip-text\">" + text + "</div>" +
+          "<div class=\"triangle\">" +
+        "</div>" +
+      "</div>"
+    );
+
+    tooltipPosition(element);
+  }
+
+  function fetchData(element) {
+    var url = W.location.origin;
+    var object = element.getAttribute("data-object") || "";
+    var tooltipPath = config.tooltipPath;
+
+    var req = new XMLHttpRequest();
+    req.open("GET", url + tooltipPath + element.getAttribute("data-template") + "/" + object);
+    req.onload = function() {
+      tooltipTemplate(element, req.response);
+    }
+    req.send();
+  }
+
+  D.addEventListener(loadType, function() {
+    var tooltips = D.querySelectorAll("[data-awesome-tooltip]");
+
+    tooltips.forEach(function(element) {
+      element.className += element.className.length < 1 ? "awesome-tooltip-wrapper" : " awesome-tooltip-wrapper";
+
+      handleMouseEnter(element);
+      handleMouseLeave(element);
+    });
+  });
+
+  function mergeConfigs(obj1, obj2){
+      var obj3 = {};
+      for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
+      for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
+      return obj3;
+  }
+
+  W.AwesomeTooltip = function(conf) {
+    config = mergeConfigs(config, conf);
+  }
+})(window, document)

data/app/assets/stylesheets/awesome_tooltip/tooltip.scss

@@ -0,0 +1,70 @@
+.awesome-tooltip-wrapper {
+  position: relative;
+
+  .awesome-tooltip {
+    position: absolute;
+    background-color: #fff;
+
+    &.hidden {
+      display: none;
+    }
+
+    &.top {
+      bottom: calc(100% + 15px);
+
+      .content-wrapper .triangle {
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 10px solid #fff;
+        top: 100%;
+      }
+    }
+
+    &.bottom {
+      top: calc(100% + 15px);
+
+      .content-wrapper .triangle {
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-bottom: 10px solid #fff;
+        bottom: 100%;
+      }
+    }
+
+    &.left {
+      right: calc(100% + 15px);
+
+      .content-wrapper .triangle {
+        border-bottom: 10px solid transparent;
+        border-top: 10px solid transparent;
+        border-left: 10px solid #fff;
+        left: 100%;
+      }
+    }
+
+    &.right {
+      left: calc(100% + 15px);
+
+      .content-wrapper .triangle {
+        border-bottom: 10px solid transparent;
+        border-top: 10px solid transparent;
+        border-right: 10px solid #fff;
+        right: 100%;
+      }
+    }
+
+    .content-wrapper {
+      position: relative;
+      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
+      padding: 5px 10px;
+      border-radius: 5px;
+
+      .triangle {
+        position: absolute;
+        width: 0;
+        height: 0;
+        z-index: 3;
+      }
+    }
+  }
+}

data/app/controllers/awesome_tooltip/application_controller.rb

@@ -0,0 +1,2 @@
+class AwesomeTooltip::ApplicationController < ActionController::Base
+end

data/app/controllers/awesome_tooltip/tooltips_controller.rb

@@ -0,0 +1,21 @@
+class AwesomeTooltip::TooltipsController < ApplicationController
+  prepend_view_path(Rails.root.join('app', 'awesome_tooltips'))
+
+  def show
+    render template: params[:template], locals: { object: record }, layout: false
+  end
+
+  private
+
+  def attrs
+    params[:object].split('-')
+  end
+
+  def model
+    attrs[0].classify.constantize
+  end
+
+  def record
+    model.find(attrs[1]) if params[:object].present?
+  end
+end

data/config/routes.rb

@@ -0,0 +1,3 @@
+AwesomeTooltip::Engine.routes do
+  get '/tooltip/:template/(:object)' => 'tooltips#show', as: :tooltip
+end

data/lib/awesome_tooltip.rb

@@ -0,0 +1,5 @@
+require 'awesome_tooltip/railtie'
+require 'awesome_tooltip/engine'
+
+module AwesomeTooltip
+end

data/lib/awesome_tooltip/engine.rb

@@ -0,0 +1,16 @@
+module AwesomeTooltip
+  class Engine < ::Rails::Engine
+    isolate_namespace AwesomeTooltip
+
+    initializer 'awesome_tooltip.assets_precompile', group: :all do |app|
+      app.config.assets.precompile += [
+        'awesome_tooltip/tooltip.js',
+        'awesome_tooltip/tooltip.scss'
+      ]
+    end
+
+    initializer "sample_engine.factories", after: "factory_bot.set_factory_paths" do
+      FactoryBot.definition_file_paths << File.expand_path('../../../spec/factories', __FILE__) if defined?(FactoryBot)
+    end
+  end
+end

data/lib/awesome_tooltip/railtie.rb

@@ -0,0 +1,4 @@
+module AwesomeTooltip
+  class Railtie < ::Rails::Railtie
+  end
+end

data/lib/awesome_tooltip/version.rb

@@ -0,0 +1,3 @@
+module AwesomeTooltip
+  VERSION = '0.1.0'
+end

metadata

@@ -0,0 +1,153 @@
+--- !ruby/object:Gem::Specification
+name: awesome_tooltip
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Busko Bogdan
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2020-02-19 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sass-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: turbolinks
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: pry
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: font-awesome-sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Server-side tooltips for your Ruby on Rails application with Vanila JS
+email:
+- busko.bogdan@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/javascripts/awesome_tooltip/tooltip.js
+- app/assets/stylesheets/awesome_tooltip/tooltip.scss
+- app/controllers/awesome_tooltip/application_controller.rb
+- app/controllers/awesome_tooltip/tooltips_controller.rb
+- config/routes.rb
+- lib/awesome_tooltip.rb
+- lib/awesome_tooltip/engine.rb
+- lib/awesome_tooltip/railtie.rb
+- lib/awesome_tooltip/version.rb
+homepage: https://github.com/BogdanBusko/awesome_tooltip
+licenses:
+- MIT
+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: []
+rubygems_version: 3.0.6
+signing_key: 
+specification_version: 4
+summary: Server-side tooltips for your Ruby on Rails application with Vanila JS
+test_files: []