awesome_tooltip 0.1.8 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +78 -6
  3. data/app/assets/javascripts/awesome_tooltip/tooltip.js +30 -17
  4. data/app/assets/stylesheets/awesome_tooltip/tooltip.scss +1 -0
  5. data/lib/awesome_tooltip/version.rb +1 -1
  6. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ad56b9c747234bcfdb64b653c06a5399dc453e99c3607de98af13ee0fe8ff563
4
- data.tar.gz: 526fc5d7161bdeaafd7511e94f967d89d14d66bb96c818474e6339758cedf295
3
+ metadata.gz: ae0d1b35d3564bddc81e74963281f6819b0229f3ea8365c18e2bd674b127e3cc
4
+ data.tar.gz: 48a4177555c21e2cce0a23b41e1668e1c0511494e58faa4e51c328bdbc961dac
5
5
  SHA512:
6
- metadata.gz: 207e008b33b5f9aced25abab3da44252280844d197457a17664f8dd4070851629a85b79f6ccdce035a91e2f2f32f1c51220b61b6a4aa000be84bc52e6815e560
7
- data.tar.gz: ca4141e4fb24c9cde3f91ff47dce83d93c05d51a18cfac6a817546ce5cbaeb2599f9af0493c52225d6b1787a5594274e857708c23b1ef312304f7dca46ed276b
6
+ metadata.gz: b2ee119e5169fda2654956d4e4ebe96450832a58291b33c56b07f406cde3d32a820feea45b317a3464c3c80bcf94256596265da4cf526fd85a669303479eb3ee
7
+ data.tar.gz: 44c0e3dd3e282f7df96b83d28aed8dadf183347db79fd6e48755d63dcb4905d391be67b93a393d726e10303e35ae4019e53bca095c5677193cf8b22c471aa517
data/README.md CHANGED
@@ -2,10 +2,7 @@
2
2
  [![Build Status](https://travis-ci.com/BogdanBusko/awesome_tooltip.svg?branch=master)](https://travis-ci.com/BogdanBusko/awesome_tooltip)
3
3
  [![Maintainability](https://api.codeclimate.com/v1/badges/13a8f6106b17b50e9943/maintainability)](https://codeclimate.com/github/BogdanBusko/awesome_tooltip/maintainability)
4
4
 
5
- Short description and motivation.
6
-
7
- ## Usage
8
- How to use my plugin.
5
+ Lightwer get for loading tooltips on your page without preloading this data on page. With this gem you can load static template and templates with data from database.
9
6
 
10
7
  ## Installation
11
8
  Add this line to your application's Gemfile:
@@ -19,11 +16,86 @@ And then execute:
19
16
  $ bundle
20
17
  ```
21
18
 
22
- Or install it yourself as:
19
+ ## Configuration
20
+
21
+ 1. Mount AwesomeTooltip routes in to your config/routes.rb
22
+ ```ruby
23
+ mount AwesomeTooltip::Engine => '/', as: 'awesome_tooltip'
24
+ ```
25
+
26
+ 2. Require AwesomeTooltip javascript in to your application.js. If you are using Rails 6 with webpack you must create folder javascripts with file application.js in your assets folder and require javascript there.
27
+ ```javascript
28
+ //= require awesome_tooltip/tootlip
29
+ ```
30
+
31
+ 3. Require AwesomeTooltip styles
32
+ ```css
33
+ /*
34
+ *= require awesome_tooltip/tooltip
35
+ */
36
+ ```
37
+
38
+ 4. Create folder for you tooltip templates
39
+ ```bash
40
+ $ mkdir app/awesome_tooltips
41
+ ```
42
+
43
+ 5. Add template.
23
44
  ```bash
24
- $ gem install awesome_tooltip
45
+ $ echo '<h1>This is your tooltip with static template</h1>' > template.html.erb
46
+ ```
47
+
48
+ 6. Add code below on your page
49
+ ```html
50
+ <div class="awesome_tooltip" data-template="template">Element with tooltip</div>
51
+ ```
52
+
53
+ ## Usage
54
+ For example if you want tooltip with some external info for user you can create tooltip template with this info in folder app/awesome_tooltips/user_info.html.erb
55
+ ```html
56
+ <div class="user-info">
57
+ <div class="user-fullname">
58
+ <%= @user.full_name %>
59
+ </div>
60
+ <div class="email">
61
+ <%= @user.email %>
62
+ </div>
63
+ </div>
64
+ ```
65
+
66
+ After that add code below on your page
67
+ ```html
68
+ <div class="awesome_tooltip" data-template="user_info" data-object="#{@user.class.downcase}-#{@user.id}"><%= @user.full_name %></div>
69
+ ```
70
+
71
+ ## Configuration
72
+ **HTML attributes**
73
+ | Option | Description | Value example | Optional |
74
+ |--------|-------------|---------------|----------|
75
+ | **data-template** | Path to your template(root dir for template is app/awesome_tooltips) | project | false |
76
+ | **data-object** | Model name and object id separated by dash | project-1 | true |
77
+ | **data-location** | Tooltip location | bottom | true |
78
+
79
+ If you want to update some js configuration following code to your js file
80
+ ```javascript
81
+ AwesomeTooltip({
82
+ tooltipPath: '/your/custom/path/',
83
+ delay: 2000,
84
+ location: 'bottom'
85
+ });
25
86
  ```
26
87
 
88
+ | Option | Default value | Type |
89
+ |--------|---------------|------|
90
+ | **tooltipPath** | /tooltip/ | String |
91
+ | **hideDelay** | 1500 | Integer |
92
+ | **location** | top(also available bottom) | String |
93
+
94
+ ## TODO:
95
+ - Add generators
96
+ - Add configs
97
+ - Add ability to place tooltip on the left and right side
98
+
27
99
  ## Contributing
28
100
  Contribution directions go here.
29
101
 
data/app/assets/javascripts/awesome_tooltip/tooltip.js CHANGED
@@ -1,13 +1,14 @@
1
1
  (function (W, D) {
2
2
  var loadType;
3
- var timerId;
3
+ var hideDelayTimeId;
4
+ var showDelayTimeId;
4
5
  var config = {
5
6
  tooltipPath: "/tooltip/",
6
- delay: 1500,
7
+ hideDelay: 1500,
7
8
  location: "top"
8
9
  };
9
10
 
10
- if(typeof(Turbolinks) !== undefined) {
11
+ if(typeof(Turbolinks) !== "undefined") {
11
12
  loadType = "turbolinks:load";
12
13
  } else {
13
14
  loadType = "DOMContentLoaded";
@@ -15,22 +16,30 @@
15
16
 
16
17
  function handleMouseEnter(element) {
17
18
  element.addEventListener("mouseenter", function(e) {
18
- clearTimeout(timerId);
19
+ var element = e.currentTarget;
19
20
 
20
- if(e.currentTarget.getAttribute("data-template") && !e.currentTarget.querySelector(".awesome-tooltip")) {
21
- fetchData(e.currentTarget);
22
- }
21
+ clearTimeout(hideDelayTimeId);
22
+
23
+ showDelayTimeId = setTimeout(function() {
24
+ if(element.getAttribute("data-template") && !element.querySelector(".awesome-tooltip")) {
25
+ fetchData(element);
26
+ }
27
+ }, 500);
23
28
  });
24
29
  }
25
30
 
26
31
  function handleMouseLeave(element) {
27
32
  element.addEventListener("mouseleave", function(e){
28
- var tooltip = e.currentTarget.querySelector("." + e.currentTarget.className.split(" ").join(".") + " .awesome-tooltip");
33
+ var element = e.currentTarget;
34
+ var tooltip = element.querySelector("." + element.className.split(" ").join(".") + " .awesome-tooltip");
29
35
 
30
- timerId = setTimeout(function() {
31
- if(tooltip)
36
+ clearTimeout(showDelayTimeId);
37
+
38
+ hideDelayTimeId = setTimeout(function() {
39
+ if(tooltip) {
32
40
  tooltip.remove();
33
- }, config.delay);
41
+ }
42
+ }, config.hideDelay);
34
43
  });
35
44
  }
36
45
 
@@ -39,10 +48,14 @@
39
48
  var tooltipTriangle = tooltip.querySelector(".content-wrapper .triangle");
40
49
  var elementRects = element.getClientRects()[0];
41
50
 
42
- var leftEnoughSpace = tooltip.offsetWidth / 2 + element.offsetWidth / 2 < elementRects.left;
43
- var rightEnoughSpace = tooltip.offsetWidth / 2 < D.body.offsetWidth - elementRects.right;
44
- var bottomEnoughSpace = tooltip.offsetHeight < W.outerHeight - elementRects.bottom;
45
- var topEnoughSpace = tooltip.offsetHeight + tooltipTriangle.offsetHeight < elementRects.top;
51
+ var tHeight = tooltip.offsetHeight;
52
+ var tWidth = tooltip.offsetWidth;
53
+ var eWidth = element.offsetWidth;
54
+
55
+ var leftEnoughSpace = tWidth / 2 + eWidth / 2 < elementRects.left;
56
+ var rightEnoughSpace = tWidth / 2 < D.body.offsetWidth - elementRects.right;
57
+ var bottomEnoughSpace = tHeight < W.outerHeight - elementRects.bottom;
58
+ var topEnoughSpace = tHeight + tooltipTriangle.offsetHeight < elementRects.top;
46
59
 
47
60
  if(leftEnoughSpace && rightEnoughSpace && topEnoughSpace && bottomEnoughSpace) {
48
61
  tooltip.style.cssText = "left: " + ((elementRects.width / 2) - (tooltip.getClientRects()[0].width / 2)) + "px;";
@@ -71,8 +84,8 @@
71
84
 
72
85
  if(!leftEnoughSpace || !rightEnoughSpace) {
73
86
  if(W.innerWidth / 2 > elementRects.right) {
74
- tooltip.style.cssText = "left: -" + (elementRects.right - element.offsetWidth) + "px;";
75
- tooltipTriangle.style.cssText = "left: " + (elementRects.right - element.offsetWidth + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";
87
+ tooltip.style.cssText = "left: -" + (elementRects.right - eWidth) + "px;";
88
+ tooltipTriangle.style.cssText = "left: " + (elementRects.right - eWidth + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";
76
89
  } else {
77
90
  tooltip.style.cssText = "right: -" + (D.body.offsetWidth - elementRects.right) + "px;";
78
91
  tooltipTriangle.style.cssText = "right: " + (D.body.offsetWidth - elementRects.right + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";
data/app/assets/stylesheets/awesome_tooltip/tooltip.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  .awesome-tooltip-wrapper {
2
2
  position: relative;
3
3
  display: inline-block;
4
+ cursor: pointer;
4
5
 
5
6
  .awesome-tooltip {
6
7
  position: absolute;
data/lib/awesome_tooltip/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module AwesomeTooltip
2
- VERSION = '0.1.8'
2
+ VERSION = '0.1.14'
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: awesome_tooltip
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.8
4
+ version: 0.1.14
5
5
  platform: ruby
6
6
  authors:
7
7
  - Busko Bogdan
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-02-20 00:00:00.000000000 Z
11
+ date: 2020-02-21 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails