Skip to content

Commit 443d3a7

Browse files
devvaannshdevvaannsh
committed
refactor: improve code readability
1 parent a006fea commit 443d3a7

File tree

1 file changed

+51
-45
lines changed

1 file changed

+51
-45
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 51 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,54 @@ function RemoteFunctions(config = {}) {
3434
// given to internal elements like info box, options box, image gallery and all other phcode internal elements
3535
// to distinguish between phoenix internal vs user created elements
3636
PHCODE_INTERNAL_ATTR: "data-phcode-internal-c15r5a9",
37+
3738
DATA_BRACKETS_ID_ATTR: "data-brackets-id", // data attribute used to track elements for live preview operations
38-
HIGHLIGHT_CLASSNAME: "__brackets-ld-highlight" // CSS class name used for highlighting elements in live preview
39+
40+
HIGHLIGHT_CLASSNAME: "__brackets-ld-highlight", // CSS class name used for highlighting elements in live preview
41+
42+
// auto scroll is when the user drags an element to the top/bottom of the viewport
43+
AUTO_SCROLL_SPEED: 12, // pixels per scroll
44+
AUTO_SCROLL_EDGE_SIZE: 0.05, // 5% of viewport height (either top/bottom)
45+
46+
// CSS class names for drop markers
47+
DROP_MARKER_CLASSNAME: "__brackets-drop-marker-horizontal",
48+
DROP_MARKER_VERTICAL_CLASSNAME: "__brackets-drop-marker-vertical",
49+
DROP_MARKER_INSIDE_CLASSNAME: "__brackets-drop-marker-inside",
50+
DROP_MARKER_ARROW_CLASSNAME: "__brackets-drop-marker-arrow",
51+
52+
// image ribbon gallery cache, to store the last query and its results
53+
CACHE_EXPIRY_TIME: 168 * 60 * 60 * 1000, // 7 days
54+
CACHE_MAX_IMAGES: 50 // max number of images that we store in the localStorage
3955
};
4056

57+
let _localHighlight;
58+
let _hoverHighlight;
59+
let _clickHighlight;
60+
let _nodeInfoBox;
61+
let _nodeMoreOptionsBox;
62+
let _moreOptionsDropdown;
63+
let _aiPromptBox;
64+
let _imageRibbonGallery;
65+
let _hyperlinkEditor;
66+
let _currentRulerLines;
67+
let _setup = false;
68+
let _hoverLockTimer = null;
69+
4170
// this will store the element that was clicked previously (before the new click)
4271
// we need this so that we can remove click styling from the previous element when a new element is clicked
4372
let previouslyClickedElement = null;
4473

4574
// we store references to interaction blocker event handlers so we can remove them when switching modes
4675
let _interactionBlockerHandlers = null;
4776

77+
// auto-scroll variables to auto scroll the live preview when an element is dragged to the top/bottom
78+
let _autoScrollTimer = null;
79+
let _isAutoScrolling = false; // to disable highlights when auto scrolling
80+
81+
// initialized from config, defaults to true if not set
82+
let imageGallerySelected = config.imageGalleryState !== undefined ? config.imageGalleryState : true;
83+
84+
4885
var req, timeout;
4986
var animateHighlight = function (time) {
5087
if(req) {
@@ -64,23 +101,14 @@ function RemoteFunctions(config = {}) {
64101
*/
65102
var _editHandler;
66103

67-
// auto-scroll variables to auto scroll the live preview when an element is dragged to the top/bottom
68-
let _autoScrollTimer = null;
69-
let _isAutoScrolling = false; // to disable highlights when auto scrolling
70-
const AUTO_SCROLL_SPEED = 12; // pixels per scroll
71-
const AUTO_SCROLL_EDGE_SIZE = 0.05; // 5% of viewport height (either top/bottom)
72-
73-
// initialized from config, defaults to true if not set
74-
let imageGallerySelected = config.imageGalleryState !== undefined ? config.imageGalleryState : true;
75-
76104
/**
77105
* this function is responsible to auto scroll the live preview when
78106
* dragging an element to the viewport edges
79107
* @param {number} clientY - curr mouse Y position
80108
*/
81109
function _handleAutoScroll(clientY) {
82110
const viewportHeight = window.innerHeight;
83-
const scrollEdgeSize = viewportHeight * AUTO_SCROLL_EDGE_SIZE;
111+
const scrollEdgeSize = viewportHeight * GLOBALS.AUTO_SCROLL_EDGE_SIZE;
84112

85113
// Clear existing timer
86114
if (_autoScrollTimer) {
@@ -92,10 +120,10 @@ function RemoteFunctions(config = {}) {
92120

93121
// check if near top edge (scroll up)
94122
if (clientY <= scrollEdgeSize) {
95-
scrollDirection = -AUTO_SCROLL_SPEED;
123+
scrollDirection = -GLOBALS.AUTO_SCROLL_SPEED;
96124
} else if (clientY >= viewportHeight - scrollEdgeSize) {
97125
// check if near bottom edge (scroll down)
98-
scrollDirection = AUTO_SCROLL_SPEED;
126+
scrollDirection = GLOBALS.AUTO_SCROLL_SPEED;
99127
}
100128

101129
// Start scrolling if needed
@@ -511,12 +539,6 @@ function RemoteFunctions(config = {}) {
511539
delete element._originalDragOpacity;
512540
}
513541

514-
// CSS class names for drop markers
515-
let DROP_MARKER_CLASSNAME = "__brackets-drop-marker-horizontal";
516-
let DROP_MARKER_VERTICAL_CLASSNAME = "__brackets-drop-marker-vertical";
517-
let DROP_MARKER_INSIDE_CLASSNAME = "__brackets-drop-marker-inside";
518-
let DROP_MARKER_ARROW_CLASSNAME = "__brackets-drop-marker-arrow";
519-
520542
/**
521543
* This function is responsible to determine whether to show vertical/horizontal indicators
522544
*
@@ -941,9 +963,9 @@ function RemoteFunctions(config = {}) {
941963

942964
// Set marker class based on drop zone
943965
if (dropZone === "inside") {
944-
marker.className = DROP_MARKER_INSIDE_CLASSNAME;
966+
marker.className = GLOBALS.DROP_MARKER_INSIDE_CLASSNAME;
945967
} else {
946-
marker.className = indicatorType === "vertical" ? DROP_MARKER_VERTICAL_CLASSNAME : DROP_MARKER_CLASSNAME;
968+
marker.className = indicatorType === "vertical" ? GLOBALS.DROP_MARKER_VERTICAL_CLASSNAME : GLOBALS.DROP_MARKER_CLASSNAME;
947969
}
948970

949971
let rect = element.getBoundingClientRect();
@@ -954,7 +976,7 @@ function RemoteFunctions(config = {}) {
954976

955977
// for the arrow indicator
956978
let arrow = window.document.createElement("div");
957-
arrow.className = DROP_MARKER_ARROW_CLASSNAME;
979+
arrow.className = GLOBALS.DROP_MARKER_ARROW_CLASSNAME;
958980
arrow.style.position = "fixed";
959981
arrow.style.zIndex = "2147483647";
960982
arrow.style.pointerEvents = "none";
@@ -1051,10 +1073,10 @@ function RemoteFunctions(config = {}) {
10511073
*/
10521074
function _clearDropMarkers() {
10531075
// Clear all types of markers
1054-
let horizontalMarkers = window.document.querySelectorAll("." + DROP_MARKER_CLASSNAME);
1055-
let verticalMarkers = window.document.querySelectorAll("." + DROP_MARKER_VERTICAL_CLASSNAME);
1056-
let insideMarkers = window.document.querySelectorAll("." + DROP_MARKER_INSIDE_CLASSNAME);
1057-
let arrows = window.document.querySelectorAll("." + DROP_MARKER_ARROW_CLASSNAME);
1076+
let horizontalMarkers = window.document.querySelectorAll("." + GLOBALS.DROP_MARKER_CLASSNAME);
1077+
let verticalMarkers = window.document.querySelectorAll("." + GLOBALS.DROP_MARKER_VERTICAL_CLASSNAME);
1078+
let insideMarkers = window.document.querySelectorAll("." + GLOBALS.DROP_MARKER_INSIDE_CLASSNAME);
1079+
let arrows = window.document.querySelectorAll("." + GLOBALS.DROP_MARKER_ARROW_CLASSNAME);
10581080

10591081
for (let i = 0; i < horizontalMarkers.length; i++) {
10601082
if (horizontalMarkers[i].parentNode) {
@@ -2471,9 +2493,6 @@ function RemoteFunctions(config = {}) {
24712493
}
24722494
};
24732495

2474-
// image ribbon gallery cache, to store the last query and its results
2475-
const CACHE_EXPIRY_TIME = 168 * 60 * 60 * 1000; // 7 days, might need to revise this...
2476-
const CACHE_MAX_IMAGES = 50; // max number of images that we store in the localStorage
24772496
const _imageGalleryCache = {
24782497
get currentQuery() {
24792498
const data = this._getFromStorage();
@@ -2532,7 +2551,7 @@ function RemoteFunctions(config = {}) {
25322551
const newData = {
25332552
...current,
25342553
...updates,
2535-
expires: Date.now() + CACHE_EXPIRY_TIME
2554+
expires: Date.now() + GLOBALS.CACHE_EXPIRY_TIME
25362555
};
25372556
window.localStorage.setItem('imageGalleryCache', JSON.stringify(newData));
25382557
} catch (error) {
@@ -2716,8 +2735,8 @@ function RemoteFunctions(config = {}) {
27162735
const currentImages = _imageGalleryCache.allImages || [];
27172736
const newImages = currentImages.concat(data.results);
27182737

2719-
if (newImages.length > CACHE_MAX_IMAGES) {
2720-
_imageGalleryCache.allImages = newImages.slice(0, CACHE_MAX_IMAGES);
2738+
if (newImages.length > GLOBALS.CACHE_MAX_IMAGES) {
2739+
_imageGalleryCache.allImages = newImages.slice(0, GLOBALS.CACHE_MAX_IMAGES);
27212740
} else {
27222741
_imageGalleryCache.allImages = newImages;
27232742
}
@@ -3735,19 +3754,6 @@ function RemoteFunctions(config = {}) {
37353754
}
37363755
};
37373756

3738-
var _localHighlight;
3739-
var _hoverHighlight;
3740-
var _clickHighlight;
3741-
var _nodeInfoBox;
3742-
var _nodeMoreOptionsBox;
3743-
var _moreOptionsDropdown;
3744-
var _aiPromptBox;
3745-
var _imageRibbonGallery;
3746-
var _hyperlinkEditor;
3747-
var _currentRulerLines;
3748-
var _setup = false;
3749-
var _hoverLockTimer = null;
3750-
37513757
const DOWNLOAD_EVENTS = {
37523758
DIALOG_OPENED: 'dialogOpened',
37533759
DIALOG_CLOSED: 'dialogClosed',

0 commit comments

Comments
 (0)