chylex/TweetDuck
1
0
Fork 0
mirror of https://github.com/chylex/TweetDuck.git synced 2025-04-18 06:15:49 +02:00
Code

Rewrite clear-columns plugin to work w/o reload & fix broken Clear icon

Browse Source
This commit is contained in:
chylex 2018-07-08 08:09:29 +02:00
parent 9d2089a8ce
commit 6841a78556
1 changed files with 66 additions and 40 deletions

106
Resources/Plugins/clear-columns/browser.js
View File

@ -1,11 +1,4 @@
constructor(){
super({
requiresPageReload: true
});
}
enabled(){ enabled(){
// prepare variables and functions
const clearColumn = (columnName) => { const clearColumn = (columnName) => {
TD.controller.columnManager.get(columnName).clear(); TD.controller.columnManager.get(columnName).clear();
TD.controller.stats.columnActionClick("clear"); TD.controller.stats.columnActionClick("clear");
@ -38,10 +31,17 @@ enabled(){
} }
}; };
// prepare event handlers // event handlers
this.eventClickSingle = function(e){
let name = $(this).closest(".js-column").attr("data-column"); this.eventClickOneCapture = function(e){
e.shiftKey ? resetColumn(name) : clearColumn(name); if (e.target.getAttribute("data-action") === "td-clearcolumns-dosingle"){
let name = $(e.target).closest(".js-column").attr("data-column");
e.shiftKey ? resetColumn(name) : clearColumn(name);
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}
}; };
this.eventClickAll = function(e){ this.eventClickAll = function(e){
@ -74,59 +74,85 @@ enabled(){
} }
}; };
// setup clear all button this.eventKeyboardShortcuts = function(e){
$(".keyboard-shortcut-list").first().append(`
<dd class="keyboard-shortcut-definition" style="white-space:nowrap">
<span class="text-like-keyboard-key">1</span> … <span class="text-like-keyboard-key">9</span> + <span class="text-like-keyboard-key">Del</span> Clear column 1－9
</dd>
<dd class="keyboard-shortcut-definition">
<span class="text-like-keyboard-key">Alt</span> + <span class="text-like-keyboard-key">Del</span> Clear all columns
</dd>`);
};
// update UI
this.btnClearAllHTML = ` this.btnClearAllHTML = `
<a class="clear-columns-btn-all-parent js-header-action link-clean cf app-nav-link padding-h--10" data-title="Clear columns (hold Shift to restore)" data-action="td-clearcolumns-doall"> <a class="clear-columns-btn-all-parent js-header-action link-clean cf app-nav-link padding-h--10" data-title="Clear columns (hold Shift to restore)" data-action="td-clearcolumns-doall">
<div class="obj-left margin-l--2"><i class="icon icon-medium icon-clear-timeline"></i></div> <div class="obj-left margin-l--2"><i class="icon icon-medium icon-clear-timeline"></i></div>
<div class="clear-columns-btn-all nbfc padding-ts hide-condensed txt-size--16 app-nav-link-text">Clear columns</div> <div class="clear-columns-btn-all nbfc padding-ts hide-condensed txt-size--16 app-nav-link-text">Clear columns</div>
</a>`; </a>`;
// add column buttons and keyboard shortcut info to UI this.btnClearOneHTML = `
window.TDPF_injectMustache("column/column_header.mustache", "prepend", "<a data-testid=\"optionsToggle\"", `
<a class="js-action-header-button column-header-link" href="#" data-action="td-clearcolumns-dosingle"> <a class="js-action-header-button column-header-link" href="#" data-action="td-clearcolumns-dosingle">
<i class="icon icon-clear-timeline js-show-tip" data-placement="bottom" data-original-title="Clear column (hold Shift to restore)"></i> <i class="icon icon-clear-timeline js-show-tip" data-placement="bottom" data-original-title="Clear column (hold Shift to restore)" data-action="td-clearcolumns-dosingle"></i>
</a>`); </a>`;
window.TDPF_injectMustache("keyboard_shortcut_list.mustache", "prepend", "</dl> <dl", ` this.prevNavMenuMustache = TD.mustaches["menus/column_nav_menu.mustache"];
<dd class="keyboard-shortcut-definition" style="white-space:nowrap"> window.TDPF_injectMustache("menus/column_nav_menu.mustache", "replace", "{{_i}}Add column{{/i}}</div> </a> </div>", `{{_i}}Add column{{/i}}</div></a>${this.btnClearAllHTML}</div>`);
<span class="text-like-keyboard-key">1</span> … <span class="text-like-keyboard-key">9</span> + <span class="text-like-keyboard-key">Del</span> Clear column 1－9
</dd><dd class="keyboard-shortcut-definition">
<span class="text-like-keyboard-key">Alt</span> + <span class="text-like-keyboard-key">Del</span> Clear all columns
</dd>`);
window.TDPF_injectMustache("menus/column_nav_menu.mustache", "replace", "{{_i}}Add column{{/i}}</div> </a> </div>", `{{_i}}Add column{{/i}}</div></a>${this.btnClearAllHTML}</div>`) this.prevColumnHeaderMustache = TD.mustaches["column/column_header.mustache"];
window.TDPF_injectMustache("column/column_header.mustache", "prepend", "<a data-testid=\"optionsToggle\"", this.btnClearOneHTML);
// load custom style if (TD.ready){
let css = window.TDPF_createCustomStyle(this); $("a[data-testid='optionsToggle']", ".js-column-header").before(this.btnClearOneHTML);
css.insert(".js-app-add-column.is-hidden + .clear-columns-btn-all-parent { display: none; }"); }
css.insert(".column-header-links { min-width: 51px !important; }");
css.insert("[data-td-icon='icon-message'] .column-header-links { min-width: 110px !important; }"); // styles
css.insert(".column-navigator-overflow .clear-columns-btn-all-parent { display: none !important; }");
css.insert(".column-navigator-overflow { bottom: 224px !important; }"); this.css = window.TDPF_createCustomStyle(this);
css.insert("[data-action='td-clearcolumns-dosingle'] { padding: 3px 0 !important; }"); this.css.insert(".js-app-add-column.is-hidden + .clear-columns-btn-all-parent { display: none; }");
css.insert("[data-action='clear'].btn-options-tray { display: none !important; }"); this.css.insert(".column-header-links { min-width: 51px !important; }");
css.insert("[data-td-icon='icon-schedule'] .td-clear-column-shortcut { display: none; }"); this.css.insert("[data-td-icon='icon-message'] .column-header-links { min-width: 110px !important; }");
css.insert("[data-td-icon='icon-custom-timeline'] .td-clear-column-shortcut { display: none; }"); this.css.insert(".column-navigator-overflow .clear-columns-btn-all-parent { display: none !important; }");
this.css.insert(".column-navigator-overflow { bottom: 224px !important; }");
this.css.insert("[data-action='td-clearcolumns-dosingle'] { padding: 3px 0 !important; }");
this.css.insert("[data-action='clear'].btn-options-tray { display: none !important; }");
this.css.insert("[data-td-icon='icon-schedule'] .td-clear-column-shortcut { display: none; }");
this.css.insert("[data-td-icon='icon-custom-timeline'] .td-clear-column-shortcut { display: none; }");
} }
ready(){ ready(){
// setup events document.addEventListener("click", this.eventClickOneCapture, true);
$(document).on("click", "[data-action='td-clearcolumns-dosingle']", this.eventClickSingle);
$(document).on("click", "[data-action='td-clearcolumns-doall']", this.eventClickAll); $(document).on("click", "[data-action='td-clearcolumns-doall']", this.eventClickAll);
$(document).on("keydown", this.eventKeyDown); $(document).on("keydown", this.eventKeyDown);
$(document).on("keyup", this.eventKeyUp); $(document).on("keyup", this.eventKeyUp);
$(document).on("uiShowKeyboardShortcutList", this.eventKeyboardShortcuts);
// setup clear all button for nav overflow
$(".js-app-add-column").first().after(this.btnClearAllHTML); $(".js-app-add-column").first().after(this.btnClearAllHTML);
// setup tooltip handling // fix tooltip
let tooltipEvents = $._data($(".js-header-action")[0], "events"); let tooltipEvents = $._data($(".js-header-action")[0], "events");
if (tooltipEvents.mouseover && tooltipEvents.mouseover.length && tooltipEvents.mouseout && tooltipEvents.mouseout.length){ if (tooltipEvents.mouseover && tooltipEvents.mouseover.length && tooltipEvents.mouseout && tooltipEvents.mouseout.length){
$(".clear-columns-btn-all-parent").on("mouseover", tooltipEvents.mouseover[0].handler).on("mouseout", tooltipEvents.mouseout[0].handler); $(".clear-columns-btn-all-parent").on({
mouseover: tooltipEvents.mouseover[0].handler,
mouseout: tooltipEvents.mouseout[0].handler
});
} }
} }
disabled(){ disabled(){
// not needed, plugin reloads the page when enabled or disabled this.css.remove();
document.removeEventListener("click", this.eventClickOneCapture);
$(document).off("click", "[data-action='td-clearcolumns-doall']", this.eventClickAll);
$(document).off("keydown", this.eventKeyDown);
$(document).off("keyup", this.eventKeyUp);
$(document).off("uiShowKeyboardShortcutList", this.eventKeyboardShortcuts);
TD.mustaches["menus/column_nav_menu.mustache"] = this.prevNavMenuMustache;
TD.mustaches["column/column_header.mustache"] = this.prevColumnHeaderMustache;
$("[data-action^='td-clearcolumns-']").remove();
} }