awesome_tooltip 0.1.8 → 0.1.14

Sign up to get free protection for your applications and to get access to all the features.
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