Skip to content
Snippets Groups Projects
Commit 904c374a authored by Moritz Strohm's avatar Moritz Strohm
Browse files

removed tooltip.js files

parent be9a55e8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/assets/javascripts/bootstrap/tooltip.js deleted 100644 → 0
+ 0
− 9
View file @ be9a55e8
// Attach global hover handler for tooltips.
// Applies to all elements having a "data-tooltip" attribute.
// Tooltip may be provided in the data-attribute itself or by
// defining a title attribute. The latter is preferred due to
// the obvious accessibility issues.
var timeout = null;
STUDIP.Tooltip.threshold = 6;
resources/assets/javascripts/entry-base.js
+ 0
− 1
View file @ 904c374a
......@@ -55,7 +55,6 @@ import "./bootstrap/article.js"
import "./bootstrap/copyable_links.js"
import "./bootstrap/selection.js"
import "./bootstrap/data_secure.js"
import "./bootstrap/tooltip.js"
import "./bootstrap/lightbox.js"
import "./bootstrap/application.js"
import "./bootstrap/global_search.js"
......
resources/assets/javascripts/lib/tooltip.js deleted 100644 → 0
+ 0
− 227
View file @ be9a55e8
import CSS from './css.js';
/**
* Tooltip library for Stud.IP
*
* @author Jan-Hendrik Willms <tleilax+studip@gmail.com>
* @copyright Stud.IP Core Group 2014
* @license GPL2 or any later version
* @since Stud.IP 3.1
*/
let count = 0;
let threshold = 0;
class Tooltip {
static get count() {
return count;
}
static set count(value) {
count = value;
}
// Threshold used for "edge detection" (imagine a padding along the edges)
static get threshold() {
return threshold;
}
static set threshold(value) {
threshold = value;
}
/**
* Returns a new unique id of a tooltip.
*
* @return {string} Unique id
* @static
*/
static getId() {
const id = `studip-tooltip-${Tooltip.count}`;
Tooltip.count += 1;
return id;
}
/**
* Constructs a new tooltip at given location with given content.
* The applied css class may be changed by the fourth parameter.
*
* @class
* @classdesc Stud.IP tooltips provide an improved layout and handling
* of contents (including html) than the browser's default
* tooltip through title attribute would
*
* @param {int} x - Horizontal position of the tooltip
* @param {int} y - Vertical position of the tooltip
* @param {string} content - Content of the tooltip (may be html)
* @param {string} css_class - Optional name of the applied css class /
* defaults to 'studip-tooltip'
*/
constructor(x, y, content, css_class) {
// Obtain unique id of the tooltip
this.id = Tooltip.getId();
// Create dom element of the tooltip, apply id and class and attach
// to dom
this.element = $('<div>');
this.element.addClass(css_class || 'studip-tooltip');
this.element.attr('id', this.id);
this.element.attr('role', 'tooltip');
this.element.appendTo('body');
// Set position and content and paint the tooltip
this.position(x, y);
this.update(content);
this.paint();
}
/**
* Translates the arrow(s) under a tooltip using css3 translate
* transforms. This is needed at the edges of the screen.
* This implies that a current browser is used. The translation could
* also be achieved by adjusting margins but that way we would need
* to hardcode values into this function since it's a struggle to
* obtain the neccessary values from the CSS pseudo selectors in JS.
*
* Internal, css rules are dynamically created and applied to the current
* document by using the methods provided in the file studip-css.js.
*
* @param {int} x - Horizontal offset
* @param {int} y - Vertical offset
*/
translateArrows(x, y, left_arrow = false) {
CSS.removeRule(`#${this.id}::before`);
CSS.removeRule(`#${this.id}::after`);
if (x !== 0 || y !== 0) {
let before_rule = {
transform: `translate(${x}px, ${y}px);`
};
if (left_arrow) {
before_rule.transform = `translate(${x}px, ${y}px) rotate(90deg);`;
}
let after_rule = before_rule;
if (left_arrow) {
after_rule['border-width'] = '9px';
}
CSS.addRule(`#${this.id}::before`, before_rule, ['-ms-', '-webkit-']);
CSS.addRule(`#${this.id}::after`, after_rule, ['-ms-', '-webkit-']);
}
}
/**
* Updates the position of the tooltip.
*
* @param {int} x - Horizontal position of the tooltip
* @param {int} y - Vertical position of the tooltip
*/
position(x, y) {
this.x = x;
this.y = y;
}
/**
* Updates the contents of the tooltip.
*
* @param {string} content - Content of the tooltip (may be html)
*/
update(content) {
this.element.html(content);
}
/**
* "Paints" the tooltip. This method actually computes the dimensions of
* the tooltips, checks for screen edges and calculates the actual offset
* in the current document.
* This method is neccessary due to the fact that position and content
* can be changed apart from each other.
* Thus: Don't forget to repaint after adjusting any of the two.
*/
paint() {
const width = this.element.outerWidth(true);
const height = this.element.outerHeight(true);
const maxWidth = $(document).width();
const maxHeight = $(document).height();
let x = this.x - width / 2;
let y = this.y - height;
//The arrow offset is the offset from the bottom right corner of
//the tooltip "frame".
let arrow_offset_x = 0;
let arrow_offset_y = 0;
let left_arrow = false;
if (y < 0) {
y = 0;
x = this.x + 20;
//Put the arrow on the left side and move the tooltip,
//if there is still enough place left on the right.
left_arrow = true;
arrow_offset_y = -height + this.y + 10;
if (arrow_offset_y > -20) {
y+= arrow_offset_y + 20;
arrow_offset_y = -20;
}
arrow_offset_x = -width / 2 - 8;
} else if (y + height > maxHeight) {
y = maxHeight - height;
}
if (x < 0) {
arrow_offset_x = 0;
x = 0;
} else if (x + width > maxWidth) {
arrow_offset_x = x + width - maxWidth;
x = maxWidth - width;
}
this.translateArrows(arrow_offset_x, arrow_offset_y, left_arrow);
this.element.css({
left: x,
top: y
});
}
/**
* Toggles the visibility of the tooltip. If no state is provided,
* the tooltip will be hidden if visible and vice versa. Pretty straight
* forward and no surprises here.
* This method implicitely calls paint before a tooltip is shown (in case
* it was forgotten).
*
* @param {bool} visible - Optional visibility parameter to set the
* tooltip to a certain state
*/
toggle(visible) {
if (visible) {
this.paint();
}
this.element.toggle(visible);
}
/**
* Reveals the tooltip.
*
* @see Tooltip.toggle
*/
show() {
this.toggle(true);
}
/**
* Hides the tooltip.
*
* @see Tooltip.toggle
*/
hide() {
this.toggle(false);
}
/**
* Removes the tooltip
*/
remove() {
this.element.remove();
}
}
export default Tooltip;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment