Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update search.js polish, bugs fixed, remember/restore last search query and position. #2201

Merged
merged 23 commits into from
Apr 27, 2024
Merged

Update search.js polish, bugs fixed, remember/restore last search query and position. #2201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
8f8ab69
Update search.js keydown is redundant, input handles same case
raszpl Apr 23, 2024
7919c69
Update search.js clean variable mess
raszpl Apr 23, 2024
fe5fc40
Update search.js text_field was always broken
raszpl Apr 23, 2024
6505298
Update satus.js removing redundant addEventListener
raszpl Apr 24, 2024
b889499
Update satus.js respect storage: false on text-field elements
raszpl Apr 24, 2024
b3fbb03
Update satus.js propagate manual change 'text-field' value
raszpl Apr 24, 2024
0678de8
Update satus.js more graceful handling of clicking outside of modal d…
raszpl Apr 24, 2024
3b510d3
Update search.js phantom style set
raszpl Apr 24, 2024
2e8ef8b
Update satus.js stop adding storage component to storage: false elements
raszpl Apr 24, 2024
e61348e
Update satus.js make ok() cancel() optional for modal.confirm simplif…
raszpl Apr 24, 2024
e5f25ee
Update search.js remember last search query and search_results scroll…
raszpl Apr 24, 2024
d5ca18a
Update skeleton.js search restore variables
raszpl Apr 24, 2024
c29e706
Update satus.js listener on wrong element
raszpl Apr 24, 2024
8938d72
Update satus.js parentObject is not an event type, skip it when creat…
raszpl Apr 24, 2024
0df99de
Update satus.js clean selectionchange listener after use
raszpl Apr 25, 2024
220d429
Update satus.js component: 'slider' is storage: false, respect that
raszpl Apr 25, 2024
169f5ac
Update satus.js colorPicker is a modal popup, dont put it on layers (…
raszpl Apr 26, 2024
cb32368
Update satus.js new modal variant: 'shortcut'
raszpl Apr 26, 2024
80ee19a
Update satus.js better handling of clicking outside modal
raszpl Apr 26, 2024
fdf3d80
Update satus.js include buttons in search
raszpl Apr 26, 2024
3413619
Update appearance.js solves double use of same element name
raszpl Apr 26, 2024
65647f8
Update search.js hide search results when clicking on result that is…
raszpl Apr 26, 2024
3b3c8df
Update satus.js leftover from debugging
raszpl Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 115 additions & 73 deletions menu/satus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -562,6 +562,10 @@ satus.toIndex = function(index, child, parent) {
satus.on = function(element, listeners) {
if (listeners) {
for (var type in listeners) {
if (type == 'parentObject') {
continue;
}

var listener = listeners[type];

if (type === 'selectionchange') {
Expand Down Expand Up @@ -742,52 +746,53 @@ satus.render = function(skeleton, container, property, childrenOnly, prepend, sk
this.properties(element, skeleton.properties);
this.on(element, skeleton.on);

element.storage = (function() {
var parent = element,
key = skeleton.storage || property || false,
value;

if (satus.isFunction(key)) {
key = key();
}

if (skeleton.storage !== false) {
if (key) {
value = satus.storage.get(key);
}

if (skeleton.hasOwnProperty('value') && value === undefined) {
value = skeleton.value;
// dont add storage component to storage: false elements
if (skeleton.storage != false) {
element.storage = (function() {
var parent = element,
key = skeleton.storage || property || false,
value;

if (satus.isFunction(key)) {
key = key();
}
}

return Object.defineProperties({}, {
key: {
get: function() {
return key;
},
set: function(string) {
key = string;

if (skeleton.storage !== false) {
if (key) {
value = satus.storage.get(key);
}
},
value: {
get: function() {
return value;

if (skeleton.hasOwnProperty('value') && value === undefined) {
value = skeleton.value;
}
}

return Object.defineProperties({}, {
key: {
get: function() {
return key;
},
set: function(string) {
key = string;
}
},
set: function(val) {
value = val;

if (satus.storage.get(key) != val) {
if (skeleton.storage !== false) {
value: {
get: function() {
return value;
},
set: function(val) {
value = val;

if (satus.storage.get(key) != val) {
satus.storage.set(key, val);

parent.dispatchEvent(new CustomEvent('change'));
}

parent.dispatchEvent(new CustomEvent('change'));
}
}
}
});
}());
});
}());
}

if (this.components[camelizedTagName]) {
this.components[camelizedTagName](element, skeleton);
Expand Down Expand Up @@ -1119,11 +1124,36 @@ satus.components.modal = function(component, skeleton) {
};

component.scrim.addEventListener('click', function() {
// this is someone clicking outside of modal dialog, try cancel() first if default modal.confirm
if (skeleton.cancel && satus.isFunction(skeleton.cancel)) {
skeleton.cancel();
// this is someone clicking outside of modal dialog
switch (skeleton.variant) {
case 'confirm':
if (skeleton.buttons?.cancel) {
// modal.confirm.buttons variant have own closing mechanism, lets try to click cancel button
if (skeleton.buttons.cancel?.rendered?.click && satus.isFunction(skeleton.buttons.cancel.rendered.click)) {
skeleton.buttons.cancel.rendered.click();
} else {
// cant find cancel button, just force close it
this.parentNode.close();
}
} else {
// modal.confirm simplified variant, try optional cancel() then close()
if (skeleton.cancel && satus.isFunction(skeleton.cancel)) {
skeleton.cancel();
}
this.parentNode.close();
}
break;

case 'vertical-menu':
this.parentNode.close();
break;

case 'shortcut':
case 'color-picker':
// click cancel button
skeleton.actions.cancel.rendered.click();
break;
}
this.parentNode.close();
});

if (satus.isset(skeleton.content)) {
Expand Down Expand Up @@ -1169,9 +1199,10 @@ satus.components.modal.confirm = function(component, skeleton) {
},
on: {
click: function() {
// no listeners for this Event currently exist in the codebase
this.modalProvider.dispatchEvent(new CustomEvent('cancel'));
this.modalProvider.skeleton.cancel();
// cancel() is optional in modal.confirm simplified variant
if (this.modalProvider.skeleton.cancel && satus.isFunction(this.modalProvider.skeleton.cancel)) {
this.modalProvider.skeleton.cancel();
}
this.modalProvider.close();
}
}
Expand All @@ -1184,9 +1215,10 @@ satus.components.modal.confirm = function(component, skeleton) {
},
on: {
click: function() {
// no listeners for this Event currently exist in the codebase
this.modalProvider.dispatchEvent(new CustomEvent('confirm'));
this.modalProvider.skeleton.ok();
// ok() is optional in modal.confirm simplified variant
if (this.modalProvider.skeleton.ok && satus.isFunction(this.modalProvider.skeleton.ok)) {
this.modalProvider.skeleton.ok();
}
this.modalProvider.close();
}
}
Expand Down Expand Up @@ -1303,13 +1335,19 @@ satus.components.textField = function(component, skeleton) {
},
set: function(value) {
this.input.value = value;

this.dispatchEvent(new CustomEvent('change'));
}
});

if (skeleton.syntax) {
component.syntax.set(skeleton.syntax);
}

if (component.skeleton.storage) {
component.value = component.storage.value;
}

selection.setAttribute('disabled', '');

line_numbers.update = function() {
Expand Down Expand Up @@ -1409,16 +1447,25 @@ satus.components.textField = function(component, skeleton) {
component.hiddenValue.textContent = '';
};

document.addEventListener('selectionchange', function(event) {
// global listener, make sure we remove when element no longer exists
function selectionchange(event) {
if (!document.body.contains(component)) {
document.removeEventListener('selectionchange', selectionchange);
return;
}
component.lineNumbers.update();
component.pre.update();
component.cursor.update();
});
};

document.addEventListener('selectionchange', selectionchange);

input.addEventListener('input', function() {
var component = this.parentNode.parentNode;

component.storage.value = this.value;
if (component.skeleton.storage) {
component.storage.value = this.value;
}

component.lineNumbers.update();
component.pre.update();
Expand All @@ -1442,21 +1489,11 @@ satus.components.textField = function(component, skeleton) {
this.cursor.update();
});

component.value = component.storage.value || '';

component.addEventListener('render', function() {
component.lineNumbers.update();
component.pre.update();
component.cursor.update();
});

if (skeleton.on) {
for (var type in skeleton.on) {
input.addEventListener(type, function(event) {
this.parentNode.parentNode.dispatchEvent(new Event(event.type));
});
}
}
};
/*--------------------------------------------------------------
>>> CHART
Expand Down Expand Up @@ -1871,7 +1908,7 @@ satus.components.colorPicker = function(component, skeleton) {
var modal = this.skeleton.parentSkeleton.parentSkeleton,
hsl = modal.value;

hsl[0] = this.storage.value;
hsl[0] = this.value;

this.previousSibling.style.backgroundColor = 'hsl(' + hsl[0] + 'deg,' + hsl[1] + '%, ' + hsl[2] + '%)';
this.parentNode.previousSibling.style.backgroundColor = 'hsl(' + hsl[0] + 'deg, 100%, 50%)';
Expand Down Expand Up @@ -1923,7 +1960,7 @@ satus.components.colorPicker = function(component, skeleton) {
}
}
}
}, this.baseProvider.layers[0]);
}, this.baseProvider);
});
};
/*--------------------------------------------------------------
Expand Down Expand Up @@ -1986,13 +2023,12 @@ satus.components.slider = function(component, skeleton) {
input.min = skeleton.min || 0;
input.max = skeleton.max || 1;
input.step = skeleton.step || 1;
input.value = component.storage.value || skeleton.value || 0;
input.value = component.storage?.value || skeleton.value || 0;

text_input.addEventListener('blur', function() {
var component = this.parentNode.parentNode;

component.input.value = Number(this.value.replace(/[^0-9.]/g, ''));
component.storage.value = Number(component.input.value);

component.update();
});
Expand All @@ -2002,7 +2038,6 @@ satus.components.slider = function(component, skeleton) {
var component = this.parentNode.parentNode;

component.input.value = Number(this.value.replace(/[^0-9.]/g, ''));
component.storage.value = Number(component.input.value);

component.update();
}
Expand All @@ -2011,7 +2046,7 @@ satus.components.slider = function(component, skeleton) {
input.addEventListener('input', function() {
var component = this.parentNode.parentNode;

component.storage.value = Number(this.value);
component.value = Number(this.value);

component.update();
});
Expand Down Expand Up @@ -2245,6 +2280,7 @@ satus.components.shortcut = function(component, skeleton) {
component.addEventListener('click', function() {
satus.render({
component: 'modal',
variant: 'shortcut',
properties: {
parent: this
},
Expand Down Expand Up @@ -3131,7 +3167,7 @@ satus.user.device.connection = function() {
--------------------------------------------------------------*/

satus.search = function(query, object, callback) {
var elements = ['switch', 'select', 'slider', 'shortcut', 'radio', 'color-picker', 'label'],
var elements = ['switch', 'select', 'slider', 'shortcut', 'radio', 'color-picker', 'label', 'button'],
threads = 0,
results = {},
excluded = [
Expand All @@ -3150,12 +3186,18 @@ satus.search = function(query, object, callback) {
function parse(items, parent) {
threads++;

for (var key in items) {
if (excluded.indexOf(key) === -1) {
for (const key in items) {
if (!excluded.includes(key)) {
var item = items[key];

if (item.component && item.text && elements.indexOf(item.component) !== -1
&& (satus.locale.data[item.text] ? satus.locale.data[item.text] : item.text).toLowerCase().indexOf(query) !== -1) {
if (item.component && item.text
// list of elements we allow search on
&& elements.includes(item.component)
// only pass buttons whose parents are variant: 'card' or special case 'appearance' (this one abuses variant tag for CSS)
&& (item.component != 'button' || item.parentObject?.variant == "card" || item.parentObject?.variant == "appearance")
// try to match query against localized description, fallback on component name
&& (satus.locale.data[item.text] ? satus.locale.data[item.text] : item.text).toLowerCase().includes(query)) {
// plop matching results in array - this means we cant have two elements with same name in results
results[key] = Object.assign({}, item);
}

Expand Down
3 changes: 2 additions & 1 deletion menu/skeleton-parts/appearance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -683,9 +683,10 @@ extension.skeleton.main.layers.section.appearance.on.click.comments = {
component: "section",
variant: "card",

comments: {
comments_show: {
component: "select",
text: "comments",
storage: 'comments',

options: [{
text: "normal",
Expand Down
Loading