paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 21:13:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

hotspots.js: Clean up icon positioning code.

Browse Source 
Also will allow more fine-grained positioning.
This commit is contained in:
Rishi Gupta
2017-08-29 14:07:19 -07:00
committed by Tim Abbott
parent fc59647a4a
commit 836a2c502e
2 changed files with 12 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/hotspots.md
View File

@@ -31,19 +31,9 @@ ALL_HOTSPOTS = {
### Step 2: Configure hotspot placement
The target element and visual orientation of each hotspot is specified in
`HOTSPOT_LOCATIONS` of `static/js/hotspots.js`:
`HOTSPOT_LOCATIONS` of `static/js/hotspots.js`.
```
HOTSPOT_LOCATIONS = {
...
new_hotspot_name: {
element: 'css selector string',
icon: TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT, or CENTER
}
}
```
The `icon` property specifies where the pulsing icon is placed *relative to
The `icon_offset` property specifies where the pulsing icon is placed *relative to
the width and height of the target element*.
By default, `popovers.compute_placement` is used to responsively

68
static/js/hotspots.js
View File

@@ -2,13 +2,6 @@ var hotspots = (function () {
var exports = {};
// icon placements (relative to element):
var TOP_LEFT = 'TOP_LEFT';
var TOP_RIGHT = 'TOP_RIGHT';
var BOTTOM_RIGHT = 'BOTTOM_RIGHT';
var BOTTOM_LEFT = 'BOTTOM_LEFT';
var CENTER = 'CENTER';
// popover orientations
var TOP = 'top';
var LEFT = 'left';
@@ -21,15 +14,18 @@ var VIEWPORT_CENTER = 'viewport_center';
var HOTSPOT_LOCATIONS = {
click_to_reply: {
element: '.selected_message .messagebox-content',
icon: CENTER,
offset_x: 0.5,
offset_y: 0.5,
},
new_topic_button: {
element: '#left_bar_compose_stream_button_big',
icon: TOP_LEFT,
offset_x: 0,
offset_y: 0,
},
stream_settings: {
element: '#streams_inline_cog',
icon: CENTER,
offset_x: 0.5,
offset_y: 0.5,
},
};
@@ -59,54 +55,10 @@ function place_icon(hotspot) {
return;
}
var el_width = $(hotspot.location.element).outerWidth();
var el_height = $(hotspot.location.element).outerHeight();
var offset;
switch (hotspot.location.icon) {
case TOP_LEFT:
offset = {
top: 0,
left: 0,
};
break;
case TOP_RIGHT:
offset = {
top: 0,
left: el_width,
};
break;
case BOTTOM_RIGHT:
offset = {
top: el_height,
left: el_width,
};
break;
case BOTTOM_LEFT:
offset = {
top: el_height,
left: 0,
};
break;
case CENTER:
offset = {
top: (el_height / 2),
left: (el_width / 2),
};
break;
default:
blueslip.error(
'Invalid icon placement value for hotspot \'' +
hotspot.name + '\''
);
break;
}
var offset = {
top: $(hotspot.location.element).outerHeight() * hotspot.location.offset_y,
left: $(hotspot.location.element).outerWidth() * hotspot.location.offset_x,
};
var client_rect = $(hotspot.location.element).get(0).getBoundingClientRect();
var placement = {
top: client_rect.top + offset.top,