diff --git a/src/gui/favorite.js b/src/gui/favorite.js index 8a0447090154abb12f96f1ae2810b1eca1864cb4..97204b9bfee948bfe41e1ca34b93cc7e60ef0036 100644 --- a/src/gui/favorite.js +++ b/src/gui/favorite.js @@ -1,14 +1,19 @@ /** Render a link that toggles the slave's favorite status * @param {App.Entity.SlaveState} slave + * @param {function():void} [handler] * @returns {HTMLAnchorElement} */ -App.UI.favoriteToggle = function(slave) { +App.UI.favoriteToggle = function(slave, handler) { function favLink() { const linkID = `fav-link-${slave.ID}`; if (V.favorites.includes(slave.ID)) { const link = App.UI.DOM.link(String.fromCharCode(0xe800), () => { V.favorites.delete(slave.ID); $(`#${linkID}`).replaceWith(favLink()); + + if (handler) { + handler(); + } }); link.classList.add("icons", "favorite"); link.id = linkID; @@ -17,6 +22,10 @@ App.UI.favoriteToggle = function(slave) { const link = App.UI.DOM.link(String.fromCharCode(0xe801), () => { V.favorites.push(slave.ID); $(`#${linkID}`).replaceWith(favLink()); + + if (handler) { + handler(); + } }); link.classList.add("icons", "not-favorite"); link.id = linkID; diff --git a/src/interaction/siNavigation.js b/src/interaction/siNavigation.js index 7cacbeb93065dfdbcdf78cb1e166d66643b3b26a..210a8d8c0936389ffcab8d4316382664219dec80 100644 --- a/src/interaction/siNavigation.js +++ b/src/interaction/siNavigation.js @@ -21,7 +21,6 @@ App.UI.SlaveInteract.navigation = function(slave) { const previous = App.UI.DOM.makeElement("span", null, ['adjacent-slave', 'margin-right']); const next = App.UI.DOM.makeElement("span", null, ['adjacent-slave', 'margin-left']); const name = App.UI.DOM.makeElement("h1", slave.slaveName, ['slave-name']); - const favorite = App.UI.DOM.makeElement("span", App.UI.favoriteToggle(slave), ['margin-left']); name.style.display = 'inline-block'; @@ -40,12 +39,25 @@ App.UI.SlaveInteract.navigation = function(slave) { App.UI.DOM.makeElement("span", App.UI.Hotkeys.hotkeys("next-slave"), ['hotkey']), ); - div.append( - previous, - name, - favorite, - next, - ); + function content() { + const frag = new DocumentFragment(); + + frag.append( + previous, + App.UI.DOM.makeElement("span", App.UI.favoriteToggle(slave, () => { + App.UI.DOM.replace(div, content()); + }), ['margin-right']), + name, + App.UI.DOM.makeElement("span", App.UI.favoriteToggle(slave, () => { + App.UI.DOM.replace(div, content()); + }), ['margin-left']), + next, + ); + + return frag; + } + + div.append(content()); return p; };