From 66c6a259410c1af2c12cac79e64618d71725823f Mon Sep 17 00:00:00 2001 From: Yassine Guedidi Date: Sun, 23 Feb 2025 22:25:25 +0100 Subject: [PATCH 01/27] Install Stimulus --- assets/bootstrap.js | 11 +++++++++++ assets/controllers.json | 4 ++++ assets/index.js | 2 ++ package.json | 4 +++- webpack.config.js | 1 + yarn.lock | 32 +++++++++++++++++++++++++++++++- 6 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 assets/bootstrap.js create mode 100644 assets/controllers.json diff --git a/assets/bootstrap.js b/assets/bootstrap.js new file mode 100644 index 000000000..c91af8043 --- /dev/null +++ b/assets/bootstrap.js @@ -0,0 +1,11 @@ +import { startStimulusApp } from '@symfony/stimulus-bridge'; + +// Registers Stimulus controllers from controllers.json and in the controllers/ directory +export default startStimulusApp(require.context( + '@symfony/stimulus-bridge/lazy-controller-loader!./controllers', + true, + /\.[jt]sx?$/, +)); + +// register any custom, 3rd party controllers here +// app.register('some_controller_name', SomeImportedController); diff --git a/assets/controllers.json b/assets/controllers.json new file mode 100644 index 000000000..a1c6e90cf --- /dev/null +++ b/assets/controllers.json @@ -0,0 +1,4 @@ +{ + "controllers": [], + "entrypoints": [] +} diff --git a/assets/index.js b/assets/index.js index a8cfc4877..314750dd8 100755 --- a/assets/index.js +++ b/assets/index.js @@ -1,3 +1,5 @@ +import './bootstrap'; + import $ from 'jquery'; /* Materialize imports */ diff --git a/package.json b/package.json index 5ecdbc7af..8c294d54a 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,9 @@ "@fontsource/eb-garamond": "^5.2.5", "@fontsource/montserrat": "^5.2.5", "@fontsource/oswald": "^5.2.5", + "@hotwired/stimulus": "^3.2.2", "@materializecss/materialize": "^1.2.2", + "@symfony/stimulus-bridge": "^4.0.0", "annotator": "wallabag/annotator#master", "clipboard": "^2.0.11", "hammerjs": "^2.0.8", @@ -100,7 +102,7 @@ "build:dev": "encore dev", "watch": "encore dev --watch", "build:prod": "encore production --progress", - "lint:js": "eslint assets/*.js assets/js/*.js assets/js/**/*.js", + "lint:js": "eslint assets/*.js assets/js/*.js assets/js/**/*.js assets/controllers/*.js", "lint:scss": "stylelint assets/scss/*.scss assets/scss/**/*.scss" } } diff --git a/webpack.config.js b/webpack.config.js index 80358deaa..8b30d68b2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -10,6 +10,7 @@ Encore .addEntry('main', './assets/index.js') .addEntry('public', './assets/share.js') .splitEntryChunks() + .enableStimulusBridge('./assets/controllers.json') .enableSingleRuntimeChunk() .cleanupOutputBeforeBuild() .enableBuildNotifications() diff --git a/yarn.lock b/yarn.lock index 949496d57..f7cc27cac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -911,6 +911,16 @@ resolved "https://registry.yarnpkg.com/@fontsource/oswald/-/oswald-5.2.5.tgz#01ef5b61fae44542eb22330255d32b728ee45b0c" integrity sha512-Sw8ayEYCoOzG2ISw5HaX3d5ILt3OEG2VFX2nzHaGywYD9p0WvVfO4SBK5/y9JGuOty3jA6OhptxOYZgwjTTPLQ== +"@hotwired/stimulus-webpack-helpers@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@hotwired/stimulus-webpack-helpers/-/stimulus-webpack-helpers-1.0.1.tgz#4cd74487adeca576c9865ac2b9fe5cb20cef16dd" + integrity sha512-wa/zupVG0eWxRYJjC1IiPBdt3Lruv0RqGN+/DTMmUWUyMAEB27KXmVY6a8YpUVTM7QwVuaLNGW4EqDgrS2upXQ== + +"@hotwired/stimulus@^3.2.2": + version "3.2.2" + resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608" + integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A== + "@humanwhocodes/config-array@^0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748" @@ -1056,6 +1066,16 @@ resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e" integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA== +"@symfony/stimulus-bridge@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@symfony/stimulus-bridge/-/stimulus-bridge-4.0.0.tgz#dbd352a373f8ff323f2895e0bb29f22b9abcc122" + integrity sha512-BfeXHAyNtE2hFJtTKFS8vLW2ElqNyzUZJJ4TMeUhrjBjYVt4/myeQxpLidy995l+TEzryE7YrnShqLviBr3pAg== + dependencies: + "@hotwired/stimulus-webpack-helpers" "^1.0.1" + "@types/webpack-env" "^1.16.4" + loader-utils "^2.0.0 || ^3.0.0" + schema-utils "^3.0.0 || ^4.0.0" + "@symfony/webpack-encore@^5.1.0": version "5.1.0" resolved "https://registry.yarnpkg.com/@symfony/webpack-encore/-/webpack-encore-5.1.0.tgz#d5664153136959e3baf3e248c9b55350c2c81a6d" @@ -1149,6 +1169,11 @@ resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901" integrity sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA== +"@types/webpack-env@^1.16.4": + version "1.18.8" + resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.18.8.tgz#71f083718c094204d7b64443701d32f1db3989e3" + integrity sha512-G9eAoJRMLjcvN4I08wB5I7YofOb/kaJNd5uoCMX+LbKXTPCF+ZIHuqTnFaK9Jz1rgs035f9JUPUhNFtqgucy/A== + "@types/yargs-parser@*": version "21.0.3" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz#815e30b786d2e8f0dcd85fd5bcf5e1a04d008f15" @@ -3481,6 +3506,11 @@ loader-utils@^2.0.0: emojis-list "^3.0.0" json5 "^2.1.2" +"loader-utils@^2.0.0 || ^3.0.0": + version "3.3.1" + resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-3.3.1.tgz#735b9a19fd63648ca7adbd31c2327dfe281304e5" + integrity sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg== + locate-path@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0" @@ -4680,7 +4710,7 @@ schema-utils@^3.0.0: ajv "^6.12.5" ajv-keywords "^3.5.2" -schema-utils@^4.0.0, schema-utils@^4.2.0, schema-utils@^4.3.0: +"schema-utils@^3.0.0 || ^4.0.0", schema-utils@^4.0.0, schema-utils@^4.2.0, schema-utils@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.3.0.tgz#3b669f04f71ff2dfb5aba7ce2d5a9d79b35622c0" integrity sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g== From 1f76184d02d5928056dbaa2de61d10bf386a174e Mon Sep 17 00:00:00 2001 From: Yassine Guedidi Date: Sat, 1 Mar 2025 00:05:31 +0100 Subject: [PATCH 02/27] Extract Materialize Sidenav controller --- .../materialize/sidenav_controller.js | 24 +++++++++++++++++++ assets/index.js | 10 -------- templates/Entry/entries.html.twig | 4 ++-- templates/Entry/entry.html.twig | 4 ++-- templates/layout.html.twig | 2 +- 5 files changed, 29 insertions(+), 15 deletions(-) create mode 100644 assets/controllers/materialize/sidenav_controller.js diff --git a/assets/controllers/materialize/sidenav_controller.js b/assets/controllers/materialize/sidenav_controller.js new file mode 100644 index 000000000..c5c9fbd26 --- /dev/null +++ b/assets/controllers/materialize/sidenav_controller.js @@ -0,0 +1,24 @@ +import { Controller } from '@hotwired/stimulus'; +import M from '@materializecss/materialize'; + +const mobileMaxWidth = 993; + +export default class extends Controller { + static values = { + edge: { type: String, default: 'left' }, + }; + + connect() { + this.instance = M.Sidenav.init(this.element, { edge: this.edgeValue }); + } + + close() { + if (window.innerWidth < mobileMaxWidth) { + this.instance.close(); + } + } + + disconnect() { + this.instance.destroy(); + } +} diff --git a/assets/index.js b/assets/index.js index 314750dd8..a5351033a 100755 --- a/assets/index.js +++ b/assets/index.js @@ -39,8 +39,6 @@ import './js/shortcuts/entry'; /* Theme style */ import './scss/index.scss'; -const mobileMaxWidth = 993; - /* ========================================================================== Annotations & Remember position ========================================================================== */ @@ -274,11 +272,6 @@ const articleScroll = () => { }; $(document).ready(() => { - // sidenav - document.querySelectorAll('.sidenav').forEach((element) => { - $(element).sidenav({ edge: element.getAttribute('data-edge') ?? 'left' }); - }); - $('select').formSelect(); $('.collapsible[data-collapsible="accordion"]').collapsible(); $('.collapsible[data-collapsible="expandable"]').collapsible({ @@ -309,9 +302,6 @@ $(document).ready(() => { $('#nav-btn-add-tag').on('click', () => { $('.nav-panel-add-tag').toggle(); $('.nav-panel-menu').addClass('hidden'); - if (window.innerWidth < mobileMaxWidth) { - $('.sidenav').sidenav('close'); - } $('#tag_label').focus(); return false; }); diff --git a/templates/Entry/entries.html.twig b/templates/Entry/entries.html.twig index a3dc3fe8a..d6805027f 100644 --- a/templates/Entry/entries.html.twig +++ b/templates/Entry/entries.html.twig @@ -114,7 +114,7 @@ {% if has_exports and is_granted('EXPORT_ENTRIES') %} -
+
{% set current_tag = null %} {% if tag is defined %} {% set current_tag = tag.slug %} @@ -140,7 +140,7 @@ {% if has_filters %} -
+

{{ 'entry.filters.title'|trans }}

diff --git a/templates/Entry/entry.html.twig b/templates/Entry/entry.html.twig index 101e9aabc..33e0b5dcf 100644 --- a/templates/Entry/entry.html.twig +++ b/templates/Entry/entry.html.twig @@ -42,7 +42,7 @@
-
    +
    • arrow_back @@ -105,7 +105,7 @@ {% endif %}
    • - + label_outline {{ 'entry.view.left_menu.add_a_tag'|trans }} diff --git a/templates/layout.html.twig b/templates/layout.html.twig index 9ceb4a32e..debb71ac9 100644 --- a/templates/layout.html.twig +++ b/templates/layout.html.twig @@ -43,7 +43,7 @@ {% block menu %}
- + live_help
diff --git a/templates/Entry/entries.html.twig b/templates/Entry/entries.html.twig index d6805027f..59027431f 100644 --- a/templates/Entry/entries.html.twig +++ b/templates/Entry/entries.html.twig @@ -24,21 +24,21 @@ {% block nav_panel_extra_actions %} {% if active_route %}
  • - + casino
    • {% endif %} {% if has_filters %}
  • - + filter_list
    • {% endif %} {% if has_exports %}
  • - + file_download
    • @@ -61,7 +61,7 @@ {% if list_mode == 0 %}view_list{% else %}view_module{% endif %} {% endif %} {% if entries.count > 0 and is_granted('EDIT_ENTRIES') %} - + {% endif %} {% if app.user.config.feedToken %} {% include "Entry/_feed_link.html.twig" %} diff --git a/templates/layout.html.twig b/templates/layout.html.twig index debb71ac9..172dab47a 100644 --- a/templates/layout.html.twig +++ b/templates/layout.html.twig @@ -90,18 +90,18 @@
    • - + add
    • - + search
      • {% block nav_panel_extra_actions '' %}
    • - + account_circle
      • From a69ea4694579db1620bca28e773227e97da5e59b Mon Sep 17 00:00:00 2001 From: Yassine Guedidi Date: Sat, 1 Mar 2025 00:35:24 +0100 Subject: [PATCH 05/27] Extract Materialize Collapsible controller --- .../materialize/collapsible_controller.js | 16 ++++++++++++++++ assets/index.js | 4 ---- templates/Developer/index.html.twig | 2 +- templates/Entry/entry.html.twig | 2 +- 4 files changed, 18 insertions(+), 6 deletions(-) create mode 100644 assets/controllers/materialize/collapsible_controller.js diff --git a/assets/controllers/materialize/collapsible_controller.js b/assets/controllers/materialize/collapsible_controller.js new file mode 100644 index 000000000..b9e60f38c --- /dev/null +++ b/assets/controllers/materialize/collapsible_controller.js @@ -0,0 +1,16 @@ +import { Controller } from '@hotwired/stimulus'; +import M from '@materializecss/materialize'; + +export default class extends Controller { + static values = { + accordion: { type: Boolean, default: true }, + }; + + connect() { + this.instance = M.Collapsible.init(this.element, { accordion: this.accordionValue }); + } + + disconnect() { + this.instance.destroy(); + } +} diff --git a/assets/index.js b/assets/index.js index 675db5dab..7d53241c3 100755 --- a/assets/index.js +++ b/assets/index.js @@ -273,10 +273,6 @@ const articleScroll = () => { $(document).ready(() => { $('select').formSelect(); - $('.collapsible[data-collapsible="accordion"]').collapsible(); - $('.collapsible[data-collapsible="expandable"]').collapsible({ - accordion: false, - }); $('.dropdown-trigger').dropdown({ hover: false }); $('.dropdown-trigger[data-covertrigger="false"][data-constrainwidth="false"]').dropdown({ diff --git a/templates/Developer/index.html.twig b/templates/Developer/index.html.twig index fa437d0ae..69cb0498d 100644 --- a/templates/Developer/index.html.twig +++ b/templates/Developer/index.html.twig @@ -25,7 +25,7 @@

      {{ 'developer.existing_clients.title'|trans }}

      {% if clients %} -
        +
          {% for client in clients %}
        • {{ client.name }} - #{{ client.id }}
          diff --git a/templates/Entry/entry.html.twig b/templates/Entry/entry.html.twig index 33e0b5dcf..20a88e7b8 100644 --- a/templates/Entry/entry.html.twig +++ b/templates/Entry/entry.html.twig @@ -42,7 +42,7 @@
    - -
    +
    {{ form_start(form.config) }} {{ form_errors(form.config) }} @@ -121,7 +121,7 @@
    {{ form_errors(form.config.font) }} - {{ form_widget(form.config.font) }} + {{ form_widget(form.config.font, {attr: {'data-config-target': 'font', 'data-action': 'config#updatePreview'}}) }} {{ form_label(form.config.font) }}
    @@ -132,7 +132,7 @@
    {{ form_errors(form.config.lineHeight) }} - {{ form_widget(form.config.lineHeight) }} + {{ form_widget(form.config.lineHeight, {attr: {'data-config-target': 'lineHeight', 'data-action': 'config#updatePreview'}}) }} {{ form_label(form.config.lineHeight, null, {'label_attr': {'class': 'settings-range-label'}}) }}
    @@ -145,7 +145,7 @@
    {{ form_errors(form.config.fontsize) }} - {{ form_widget(form.config.fontsize) }} + {{ form_widget(form.config.fontsize, {attr: {'data-config-target': 'fontSize', 'data-action': 'config#updatePreview'}}) }} {{ form_label(form.config.fontsize, null, {'label_attr': {'class': 'settings-range-label'}}) }}
    @@ -156,7 +156,7 @@
    {{ form_errors(form.config.maxWidth) }} - {{ form_widget(form.config.maxWidth) }} + {{ form_widget(form.config.maxWidth, {attr: {'data-config-target': 'maxWidth', 'data-action': 'config#updatePreview'}}) }} {{ form_label(form.config.maxWidth, null, {'label_attr': {'class': 'settings-range-label'}}) }}
    @@ -168,8 +168,8 @@
    -
    -
    +
    +
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    From 1fd861078d93606f3ce6f6c97b7b868f78d76cca Mon Sep 17 00:00:00 2001 From: Yassine Guedidi Date: Sat, 8 Mar 2025 02:26:26 +0100 Subject: [PATCH 17/27] Extract Fake Radio controller --- assets/controllers/fake_radio_controller.js | 13 +++++++++++++ assets/index.js | 18 ------------------ templates/User/edit.html.twig | 6 +++--- 3 files changed, 16 insertions(+), 21 deletions(-) create mode 100644 assets/controllers/fake_radio_controller.js diff --git a/assets/controllers/fake_radio_controller.js b/assets/controllers/fake_radio_controller.js new file mode 100644 index 000000000..a9426a189 --- /dev/null +++ b/assets/controllers/fake_radio_controller.js @@ -0,0 +1,13 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + static targets = ['emailTwoFactor', 'googleTwoFactor']; + + uncheckGoogle() { + this.googleTwoFactorTarget.checked = false; + } + + uncheckEmail() { + this.emailTwoFactorTarget.checked = false; + } +} diff --git a/assets/index.js b/assets/index.js index 2b3e6a976..c6aac7bc0 100755 --- a/assets/index.js +++ b/assets/index.js @@ -43,24 +43,6 @@ $(document).ready(() => { } }; }); - - // mimic radio button because emailTwoFactor is a boolean - $('#update_user_googleTwoFactor').on('change', () => { - $('#update_user_emailTwoFactor').prop('checked', false); - }); - - $('#update_user_emailTwoFactor').on('change', () => { - $('#update_user_googleTwoFactor').prop('checked', false); - }); - - // same mimic for super admin - $('#user_googleTwoFactor').on('change', () => { - $('#user_emailTwoFactor').prop('checked', false); - }); - - $('#user_emailTwoFactor').on('change', () => { - $('#user_googleTwoFactor').prop('checked', false); - }); }); (function darkTheme() { diff --git a/templates/User/edit.html.twig b/templates/User/edit.html.twig index 9c3edeefa..475472d50 100644 --- a/templates/User/edit.html.twig +++ b/templates/User/edit.html.twig @@ -48,16 +48,16 @@
    -
    +
    From e438b5e63f7fad0fb3fbcd93fa4139bf698ebfb2 Mon Sep 17 00:00:00 2001 From: Yassine Guedidi Date: Sat, 8 Mar 2025 03:04:16 +0100 Subject: [PATCH 18/27] Extract Tag controller --- assets/controllers/tag_controller.js | 12 ++++++++++++ assets/index.js | 21 --------------------- assets/scss/_cards.scss | 9 +++++++++ templates/Tag/tags.html.twig | 13 +++++++------ 4 files changed, 28 insertions(+), 27 deletions(-) create mode 100644 assets/controllers/tag_controller.js diff --git a/assets/controllers/tag_controller.js b/assets/controllers/tag_controller.js new file mode 100644 index 000000000..3f2b6c054 --- /dev/null +++ b/assets/controllers/tag_controller.js @@ -0,0 +1,12 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + static targets = ['link', 'edit', 'form', 'input']; + + showForm() { + this.formTarget.classList.remove('hidden'); + this.editTarget.classList.add('hidden'); + this.linkTarget.classList.add('hidden'); + this.inputTarget.focus(); + } +} diff --git a/assets/index.js b/assets/index.js index c6aac7bc0..c02bf3740 100755 --- a/assets/index.js +++ b/assets/index.js @@ -24,27 +24,6 @@ import './js/shortcuts/entry'; /* Theme style */ import './scss/index.scss'; -$(document).ready(() => { - document.querySelectorAll('[data-handler=tag-rename]').forEach((item) => { - const current = item; - current.wallabag_edit_mode = false; - current.onclick = (event) => { - const target = event.currentTarget; - - if (target.wallabag_edit_mode === false) { - $(target.parentNode.querySelector('[data-handle=tag-link]')).addClass('hidden'); - $(target.parentNode.querySelector('[data-handle=tag-rename-form]')).removeClass('hidden'); - target.parentNode.querySelector('[data-handle=tag-rename-form] input').focus(); - target.querySelector('.material-icons').innerHTML = 'done'; - - target.wallabag_edit_mode = true; - } else { - target.parentNode.querySelector('[data-handle=tag-rename-form]').submit(); - } - }; - }); -}); - (function darkTheme() { const rootEl = document.querySelector('html'); const themeDom = { diff --git a/assets/scss/_cards.scss b/assets/scss/_cards.scss index b63fad649..6ae2b8e9b 100644 --- a/assets/scss/_cards.scss +++ b/assets/scss/_cards.scss @@ -186,6 +186,14 @@ a.original:not(.waves-effect) { color: #fff; } +.card-tag-labels button { + background: transparent; + border: none; + font-weight: normal; + color: #fff; + cursor: pointer; +} + .card-tag-link { width: calc(100% - 24px); line-height: 1.3; @@ -196,6 +204,7 @@ a.original:not(.waves-effect) { .card-tag-form { display: flex; + align-items: center; min-width: 100px; flex-grow: 1; } diff --git a/templates/Tag/tags.html.twig b/templates/Tag/tags.html.twig index 882fe0e9b..180a910a0 100644 --- a/templates/Tag/tags.html.twig +++ b/templates/Tag/tags.html.twig @@ -19,18 +19,19 @@ {% for tagWithNbEntries in allTagsWithNbEntries %} {% set tag = tagWithNbEntries.tag %} {% set nbEntries = tagWithNbEntries.nbEntries %} -
  • - +
  • + {{ tag.label }} ({{ nbEntries }}) {% if renameForms is defined and renameForms[tag.id] is defined and is_granted('EDIT', tag) %} - - {{ form_widget(renameForms[tag.id].label, {'attr': {'value': tag.label}}) }} + + {{ form_widget(renameForms[tag.id].label, {'attr': {'value': tag.label, 'data-tag-target': 'input'}}) }} {{ form_rest(renameForms[tag.id]) }} + - + {% endif %} {% if is_granted('DELETE', tag) %} From f7c8466231b74527bfb7f1ea40a8fd2f9365baca Mon Sep 17 00:00:00 2001 From: Yassine Guedidi Date: Sat, 8 Mar 2025 13:47:46 +0100 Subject: [PATCH 19/27] Extract Batch Edit controller --- assets/controllers/batch_edit_controller.js | 15 +++++++++++++++ assets/index.js | 19 ------------------- templates/Entry/Card/_mass_checkbox.html.twig | 2 +- templates/Entry/entries.html.twig | 8 ++++---- 4 files changed, 20 insertions(+), 24 deletions(-) create mode 100644 assets/controllers/batch_edit_controller.js diff --git a/assets/controllers/batch_edit_controller.js b/assets/controllers/batch_edit_controller.js new file mode 100644 index 000000000..e15fc41c5 --- /dev/null +++ b/assets/controllers/batch_edit_controller.js @@ -0,0 +1,15 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + static targets = ['item', 'tagAction']; + + toggleSelection(e) { + this.itemTargets.forEach((item) => { + item.checked = e.currentTarget.checked; // eslint-disable-line no-param-reassign + }); + } + + tagSelection() { + this.element.requestSubmit(this.tagActionTarget); + } +} diff --git a/assets/index.js b/assets/index.js index c02bf3740..089afd604 100755 --- a/assets/index.js +++ b/assets/index.js @@ -173,23 +173,4 @@ $(document).ready(() => { $('.nav-panel-actions').show(); return false; }); - - const mainCheckboxes = document.querySelectorAll('[data-js="checkboxes-toggle"]'); - if (mainCheckboxes.length) { - [...mainCheckboxes].forEach((el) => { - el.addEventListener('click', () => { - const checkboxes = document.querySelectorAll(el.dataset.toggle); - [...checkboxes].forEach((checkbox) => { - const checkboxClone = checkbox; - checkboxClone.checked = el.checked; - }); - }); - }); - } - $('form[name="form_mass_action"] input[name="tags"]').on('keydown', (e) => { - if (e.key === 'Enter') { - e.preventDefault(); - $('form[name="form_mass_action"] button[name="tag"]').trigger('click'); - } - }); }); diff --git a/templates/Entry/Card/_mass_checkbox.html.twig b/templates/Entry/Card/_mass_checkbox.html.twig index 5e4fe8f6d..e972f5695 100644 --- a/templates/Entry/Card/_mass_checkbox.html.twig +++ b/templates/Entry/Card/_mass_checkbox.html.twig @@ -1,3 +1,3 @@ diff --git a/templates/Entry/entries.html.twig b/templates/Entry/entries.html.twig index 59027431f..783e4abb1 100644 --- a/templates/Entry/entries.html.twig +++ b/templates/Entry/entries.html.twig @@ -53,7 +53,7 @@ {% if current_route == 'homepage' %} {% set current_route = 'unread' %} {% endif %} -
    +
    {{ 'entry.list.number_on_the_page'|trans({'%count%': entries.count}) }} @@ -77,15 +77,15 @@
    - +
    - - + +
    From 2054be7bd459209af3b67ac5f3435f10067cdd47 Mon Sep 17 00:00:00 2001 From: Yassine Guedidi Date: Sat, 8 Mar 2025 14:43:33 +0100 Subject: [PATCH 20/27] Extract Topbar controller --- assets/controllers/topbar_controller.js | 31 +++++++++++++++++++++++++ assets/index.js | 28 ---------------------- templates/Entry/new_form.html.twig | 6 ++--- templates/Entry/search_form.html.twig | 6 ++--- templates/layout.html.twig | 8 +++---- 5 files changed, 41 insertions(+), 38 deletions(-) create mode 100644 assets/controllers/topbar_controller.js diff --git a/assets/controllers/topbar_controller.js b/assets/controllers/topbar_controller.js new file mode 100644 index 000000000..e200893ad --- /dev/null +++ b/assets/controllers/topbar_controller.js @@ -0,0 +1,31 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + static targets = ['addUrl', 'addUrlInput', 'search', 'searchInput', 'actions']; + + showAddUrl() { + this.actionsTarget.style.display = 'none'; + this.addUrlTarget.style.display = 'flex'; + this.searchTarget.style.display = 'none'; + this.addUrlInputTarget.focus(); + } + + submittingUrl(e) { + e.currentTarget.disabled = true; + this.addUrlInputTarget.readOnly = true; + this.addUrlInputTarget.blur(); + } + + showSearch() { + this.actionsTarget.style.display = 'none'; + this.addUrlTarget.style.display = 'none'; + this.searchTarget.style.display = 'flex'; + this.searchInputTarget.focus(); + } + + showActions() { + this.actionsTarget.style.display = 'flex'; + this.addUrlTarget.style.display = 'none'; + this.searchTarget.style.display = 'none'; + } +} diff --git a/assets/index.js b/assets/index.js index 089afd604..a7652e4ad 100755 --- a/assets/index.js +++ b/assets/index.js @@ -139,38 +139,10 @@ const stickyNav = () => { $(document).ready(() => { stickyNav(); - const toggleNav = (toShow, toFocus) => { - $('.nav-panel-actions').hide(); - $(toShow).show(); - $(toFocus).focus(); - }; - $('#nav-btn-add-tag').on('click', () => { $('.nav-panel-add-tag').toggle(); $('.nav-panel-menu').addClass('hidden'); $('#tag_label').focus(); return false; }); - - $('#nav-btn-add').on('click', () => { - toggleNav('.nav-panel-add', '#entry_url'); - return false; - }); - - const materialAddForm = $('.nav-panel-add'); - materialAddForm.on('submit', () => { - materialAddForm.addClass('disabled'); - $('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur'); - }); - - $('#nav-btn-search').on('click', () => { - toggleNav('.nav-panel-search', '#search_entry_term'); - return false; - }); - - $('.close').on('click', (e) => { - $(e.target).parent('.nav-panel-item').hide(); - $('.nav-panel-actions').show(); - return false; - }); }); diff --git a/templates/Entry/new_form.html.twig b/templates/Entry/new_form.html.twig index e572d9f50..39741c113 100644 --- a/templates/Entry/new_form.html.twig +++ b/templates/Entry/new_form.html.twig @@ -1,4 +1,4 @@ - + {% if form_errors(form) %} {{ form_errors(form) }} {% endif %} @@ -8,8 +8,8 @@ {{ form_errors(form.url) }} {% endif %} - {{ form_widget(form.url, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.new.placeholder'}}) }} - + {{ form_widget(form.url, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.new.placeholder', 'data-topbar-target': 'addUrlInput'}}) }} + {{ form_rest(form) }} diff --git a/templates/Entry/search_form.html.twig b/templates/Entry/search_form.html.twig index 451a1f8ba..090ae9a8e 100644 --- a/templates/Entry/search_form.html.twig +++ b/templates/Entry/search_form.html.twig @@ -1,4 +1,4 @@ - diff --git a/templates/layout.html.twig b/templates/layout.html.twig index a0c7b11e7..641bb13e3 100644 --- a/templates/layout.html.twig +++ b/templates/layout.html.twig @@ -79,8 +79,8 @@
    • {% endif %} -
    -
    +
    +
    menu

    @@ -90,12 +90,12 @@

    • - + add
    • - + search
      • From c9cfae11f70bed06280fc8415937e96819900f3d Mon Sep 17 00:00:00 2001 From: Yassine Guedidi Date: Sat, 8 Mar 2025 14:56:53 +0100 Subject: [PATCH 21/27] Extract Sticky Nav controller --- assets/controllers/materialize/fab_controller.js | 4 ++++ assets/controllers/sticky_nav_controller.js | 7 +++++++ assets/index.js | 9 --------- templates/Entry/entry.html.twig | 4 ++-- 4 files changed, 13 insertions(+), 11 deletions(-) create mode 100644 assets/controllers/sticky_nav_controller.js diff --git a/assets/controllers/materialize/fab_controller.js b/assets/controllers/materialize/fab_controller.js index 2bf24e9fa..1d11f38bd 100644 --- a/assets/controllers/materialize/fab_controller.js +++ b/assets/controllers/materialize/fab_controller.js @@ -22,6 +22,10 @@ export default class extends Controller { } } + click() { + this.dispatch('click'); + } + disconnect() { this.instance.destroy(); } diff --git a/assets/controllers/sticky_nav_controller.js b/assets/controllers/sticky_nav_controller.js new file mode 100644 index 000000000..12b405b0e --- /dev/null +++ b/assets/controllers/sticky_nav_controller.js @@ -0,0 +1,7 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + toggle() { + this.element.classList.toggle('entry-nav-top--sticky'); + } +} diff --git a/assets/index.js b/assets/index.js index a7652e4ad..054c04cff 100755 --- a/assets/index.js +++ b/assets/index.js @@ -129,16 +129,7 @@ import './scss/index.scss'; addDarkThemeListeners(); }()); -const stickyNav = () => { - const nav = $('.js-entry-nav-top'); - $('[data-toggle="actions"]').click(() => { - nav.toggleClass('entry-nav-top--sticky'); - }); -}; - $(document).ready(() => { - stickyNav(); - $('#nav-btn-add-tag').on('click', () => { $('.nav-panel-add-tag').toggle(); $('.nav-panel-menu').addClass('hidden'); diff --git a/templates/Entry/entry.html.twig b/templates/Entry/entry.html.twig index a42a0723d..666871dec 100644 --- a/templates/Entry/entry.html.twig +++ b/templates/Entry/entry.html.twig @@ -10,7 +10,7 @@
      -
    {% if is_granted('TAG', entry) %} -
    • - + add
    • - + search
      • From b266d6ca2fbff6dad3447f482cab5e6a5467664f Mon Sep 17 00:00:00 2001 From: Yassine Guedidi Date: Sun, 9 Mar 2025 00:14:55 +0100 Subject: [PATCH 25/27] Fix esc shortcut after opening add url or search --- assets/controllers/shortcuts_controller.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/assets/controllers/shortcuts_controller.js b/assets/controllers/shortcuts_controller.js index 3d5c44fb5..eecefeb68 100644 --- a/assets/controllers/shortcuts_controller.js +++ b/assets/controllers/shortcuts_controller.js @@ -100,5 +100,16 @@ export default class extends Controller { e.preventDefault(); this.showActionsTarget.click(); }); + + const originalStopCallback = Mousetrap.prototype.stopCallback; + + Mousetrap.prototype.stopCallback = (e, element, combo) => { + // allow esc key to be used in input fields of topbar + if (combo === 'esc' && element.dataset.topbarTarget !== undefined) { + return false; + } + + return originalStopCallback(e, element); + }; } } From e28e1bddb4b898349502449f4cb79f69b5bd388a Mon Sep 17 00:00:00 2001 From: Yassine Guedidi Date: Sun, 9 Mar 2025 21:04:34 +0100 Subject: [PATCH 26/27] Extract Entries Navigation controller --- .../entries_navigation_controller.js | 58 ++++++++++++++ assets/controllers/shortcuts_controller.js | 26 +++++++ assets/index.js | 3 - assets/js/shortcuts/main.js | 77 ------------------- package.json | 2 +- templates/Entry/entries.html.twig | 6 +- templates/base.html.twig | 2 +- 7 files changed, 89 insertions(+), 85 deletions(-) create mode 100644 assets/controllers/entries_navigation_controller.js delete mode 100644 assets/js/shortcuts/main.js diff --git a/assets/controllers/entries_navigation_controller.js b/assets/controllers/entries_navigation_controller.js new file mode 100644 index 000000000..52bbb1138 --- /dev/null +++ b/assets/controllers/entries_navigation_controller.js @@ -0,0 +1,58 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + static targets = ['card', 'paginationWrapper']; + + connect() { + this.pagination = this.paginationWrapperTarget.querySelector('.pagination'); + + this.cardIndex = 0; + this.lastCardIndex = this.cardTargets.length - 1; + + /* If we come from next page */ + if (window.location.hash === '#prev') { + this.cardIndex = this.lastCardIndex; + } + + this.currentCard = this.cardTargets[this.cardIndex]; + + this.currentCard.classList.add('z-depth-4'); + } + + selectRightCard() { + if (this.cardIndex >= 0 && this.cardIndex < this.lastCardIndex) { + this.currentCard.classList.remove('z-depth-4'); + this.cardIndex += 1; + this.currentCard = this.cardTargets[this.cardIndex]; + this.currentCard.classList.add('z-depth-4'); + + return; + } + + if (this.pagination && this.pagination.querySelector('a[rel="next"]')) { + window.location.href = this.pagination.querySelector('a[rel="next"]').href; + } + } + + selectLeftCard() { + if (this.cardIndex > 0 && this.cardIndex <= this.lastCardIndex) { + this.currentCard.classList.remove('z-depth-4'); + this.cardIndex -= 1; + this.currentCard = this.cardTargets[this.cardIndex]; + this.currentCard.classList.add('z-depth-4'); + + return; + } + + if (this.pagination && this.pagination.querySelector('a[rel="prev"]')) { + window.location.href = `${this.pagination.querySelector('a[rel="prev"]').href}#prev`; + } + } + + selectCurrentCard() { + const url = this.currentCard.querySelector('a.card-title').href; + if (url) { + window.location.href = url; + } + } +} diff --git a/assets/controllers/shortcuts_controller.js b/assets/controllers/shortcuts_controller.js index eecefeb68..921395fca 100644 --- a/assets/controllers/shortcuts_controller.js +++ b/assets/controllers/shortcuts_controller.js @@ -4,6 +4,8 @@ import Mousetrap from 'mousetrap'; export default class extends Controller { static targets = ['openOriginal', 'markAsFavorite', 'markAsRead', 'deleteEntry', 'showAddUrl', 'showSearch', 'showActions']; + static outlets = ['entries-navigation']; + connect() { /* Go to */ Mousetrap.bind('g u', () => { @@ -111,5 +113,29 @@ export default class extends Controller { return originalStopCallback(e, element); }; + + Mousetrap.bind('right', () => { + if (!this.hasEntriesNavigationOutlet) { + return; + } + + this.entriesNavigationOutlet.selectRightCard(); + }); + + Mousetrap.bind('left', () => { + if (!this.hasEntriesNavigationOutlet) { + return; + } + + this.entriesNavigationOutlet.selectLeftCard(); + }); + + Mousetrap.bind('enter', () => { + if (!this.hasEntriesNavigationOutlet) { + return; + } + + this.entriesNavigationOutlet.selectCurrentCard(); + }); } } diff --git a/assets/index.js b/assets/index.js index 04b76a01f..dbbd06fdc 100755 --- a/assets/index.js +++ b/assets/index.js @@ -15,8 +15,5 @@ import '@fontsource/eb-garamond'; import '@fontsource/montserrat'; import '@fontsource/oswald'; -/* Import shortcuts */ -import './js/shortcuts/main'; - /* Theme style */ import './scss/index.scss'; diff --git a/assets/js/shortcuts/main.js b/assets/js/shortcuts/main.js deleted file mode 100644 index 2cf96dba9..000000000 --- a/assets/js/shortcuts/main.js +++ /dev/null @@ -1,77 +0,0 @@ -import Mousetrap from 'mousetrap'; -import $ from 'jquery'; - -function toggleFocus(cardToToogleFocus) { - if (cardToToogleFocus) { - $(cardToToogleFocus).toggleClass('z-depth-4'); - } -} - -$(document).ready(() => { - const cards = $('#content').find('.card'); - const cardNumber = cards.length; - let cardIndex = 0; - /* If we come from next page */ - if (window.location.hash === '#prev') { - cardIndex = cardNumber - 1; - } - let card = cards[cardIndex]; - const pagination = $('.pagination'); - - /* Show nothing on quickstart */ - if ($('#content > div.quickstart').length > 0) { - return; - } - - /* Show nothing on login/register page */ - if ($('#username').length > 0 || $('#fos_user_registration_form_username').length > 0) { - return; - } - - /* Show nothing on login/register page */ - if ($('#username').length > 0 || $('#fos_user_registration_form_username').length > 0) { - return; - } - - /* Focus current card */ - toggleFocus(card); - - /* Select right card. If there's a next page, go to next page */ - Mousetrap.bind('right', () => { - if (cardIndex >= 0 && cardIndex < cardNumber - 1) { - toggleFocus(card); - cardIndex += 1; - card = cards[cardIndex]; - toggleFocus(card); - return; - } - if (pagination.length > 0 && pagination.find('li.next:not(.disabled)').length > 0 && cardIndex === cardNumber - 1) { - window.location.href = window.location.origin + $(pagination).find('li.next a').attr('href'); - } - }); - - /* Select previous card. If there's a previous page, go to next page */ - Mousetrap.bind('left', () => { - if (cardIndex > 0 && cardIndex < cardNumber) { - toggleFocus(card); - cardIndex -= 1; - card = cards[cardIndex]; - toggleFocus(card); - return; - } - if (pagination.length > 0 && $(pagination).find('li.prev:not(.disabled)').length > 0 && cardIndex === 0) { - window.location.href = `${window.location.origin + $(pagination).find('li.prev a').attr('href')}#prev`; - } - }); - - Mousetrap.bind('enter', () => { - if (typeof card !== 'object') { - return; - } - - const url = $(card).find('.card-title a').attr('href'); - if (typeof url === 'string' && url.length > 0) { - window.location.href = window.location.origin + url; - } - }); -}); diff --git a/package.json b/package.json index ff7916697..e2d0f9058 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "build:dev": "encore dev", "watch": "encore dev --watch", "build:prod": "encore production --progress", - "lint:js": "eslint assets/*.js assets/js/**/*.js assets/controllers/*.js", + "lint:js": "eslint assets/*.js assets/controllers/*.js", "lint:scss": "stylelint assets/scss/*.scss assets/scss/**/*.scss" } } diff --git a/templates/Entry/entries.html.twig b/templates/Entry/entries.html.twig index 783e4abb1..ac3c580a7 100644 --- a/templates/Entry/entries.html.twig +++ b/templates/Entry/entries.html.twig @@ -53,8 +53,8 @@ {% if current_route == 'homepage' %} {% set current_route = 'unread' %} {% endif %} -
      -
      + +
      {{ 'entry.list.number_on_the_page'|trans({'%count%': entries.count}) }} {% if entries.count > 0 %} @@ -92,7 +92,7 @@
        {% for entry in entries %} -
      1. +
      2. {% if list_mode == 1 %} {% include "Entry/_card_list.html.twig" with {'entry': entry, 'currentRoute': current_route, 'routes': entries_with_archived_class_routes} only %} {% elseif not entry.previewPicture is null and entry.mimetype starts with 'image/' %} diff --git a/templates/base.html.twig b/templates/base.html.twig index 382e3b3f3..43d75fc9f 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -4,7 +4,7 @@ - + {% block head %} From e4fb100163d8db3946494b9fa84cb859495364d3 Mon Sep 17 00:00:00 2001 From: Yassine Guedidi Date: Sun, 9 Mar 2025 21:12:33 +0100 Subject: [PATCH 27/27] Remove jQuery --- package.json | 2 -- webpack.config.js | 3 +-- yarn.lock | 6 ------ 3 files changed, 1 insertion(+), 10 deletions(-) diff --git a/package.json b/package.json index e2d0f9058..c2675b005 100644 --- a/package.json +++ b/package.json @@ -88,8 +88,6 @@ "hammerjs": "^2.0.8", "highlight.js": "^11.11.1", "icomoon-free-npm": "^0.0.0", - "jquery": "^3.7.1", - "jquery.cookie": "^1.4.1", "jr-qrcode": "^1.2.1", "material-design-icons-iconfont": "^6.7.0", "mathjax": "^3.2.2", diff --git a/webpack.config.js b/webpack.config.js index 8b30d68b2..b8958354b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -22,7 +22,6 @@ Encore config.corejs = '3.23'; }) .enableSassLoader() - .enablePostCssLoader() - .autoProvidejQuery(); + .enablePostCssLoader(); module.exports = Encore.getWebpackConfig(); diff --git a/yarn.lock b/yarn.lock index f7cc27cac..d01300290 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1396,7 +1396,6 @@ ajv@^8.0.0, ajv@^8.0.1, ajv@^8.9.0: annotator@wallabag/annotator#master: version "2.0.0-alpha.4" - uid "082069d777ed0fe5080392e85675ef3a519c7886" resolved "https://codeload.github.com/wallabag/annotator/tar.gz/082069d777ed0fe5080392e85675ef3a519c7886" dependencies: backbone-extend-standalone "^0.1.2" @@ -3378,11 +3377,6 @@ jiti@^1.20.0: resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d" integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q== -jquery.cookie@^1.4.1: - version "1.4.1" - resolved "https://registry.yarnpkg.com/jquery.cookie/-/jquery.cookie-1.4.1.tgz#d63dce209eab691fe63316db08ca9e47e0f9385b" - integrity sha512-c/hZOOL+8VSw/FkTVH637gS1/6YzMSCROpTZ2qBYwJ7s7sHajU7uBkSSiE5+GXWwrfCCyO+jsYjUQ7Hs2rIxAA== - jquery@^3.7.1: version "3.7.1" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"