EZP-29266: Content item seems to be always bookmarked (#509)

* EZP-29266: Fixed bookmark icon on a location page; now JS dynamically adds propser CSS class on bookmark form wrapper; small adjustments in CSS styles were added.

* EZP-29266: Enforced bootstrap markup in bookmark form; small improvements in JS.

* EZP-29266: Deleted empty line in JS.

src/bundle/Resources/public/js/scripts/admin.location.bookmark.js

@@ -2,6 +2,8 @@
     const SELECTOR_FORM = 'form[name="location_update_bookmark"]';
     const SELECTOR_BOOKMARK_CHECKBOX = '#location_update_bookmark_bookmarked';
     const SELECTOR_BOOKMARK_LOCATION_INPUT = '#location_update_bookmark_location';
+    const SELECTOR_BOOKMARK_WRAPPER = '.ez-add-to-bookmarks';
+    const CLASS_BOOKMARK_CHECKED = 'ez-add-to-bookmarks--checked';
 
     const updateBookmarkLocationInput = doc.querySelector(SELECTOR_BOOKMARK_LOCATION_INPUT);
     const currentLocationId = parseInt(updateBookmarkLocationInput.value, 10);
@@ -15,14 +17,26 @@
     const isCurrentLocation = (locationId) => {
         return parseInt(locationId, 10) === currentLocationId;
     };
+    const toggleBookmarkIconState = (isBookmarked) => {
+        const wrapper = doc.querySelector(SELECTOR_BOOKMARK_WRAPPER);
+
+        wrapper.classList.toggle(CLASS_BOOKMARK_CHECKED, isBookmarked);
+    };
     const updateBookmarkForm = (event) => {
         const { bookmarked, locationId } = event.detail;
 
         if (isCurrentLocation(locationId)) {
             updateBookmarkCheckbox(bookmarked);
+            toggleBookmarkIconState(bookmarked);
         }
     };
+    const updateBookmarkIconState = (event) => {
+        const checked = event.target.checked;
+
+        toggleBookmarkIconState(checked);
+    };
 
     doc.body.addEventListener('ez-bookmark-change', updateBookmarkForm, false);
     doc.querySelector(SELECTOR_BOOKMARK_CHECKBOX).addEventListener('change', submitBookmarkForm, false);
+    doc.querySelector(SELECTOR_BOOKMARK_CHECKBOX).addEventListener('change', updateBookmarkIconState, false);
 })(window, document);

src/bundle/Resources/public/scss/_add-to-bookmarks.scss

@@ -34,7 +34,7 @@
         }
     }
 
-    &__checkbox:checked + &__label {
+    &--checked &__label {
         &::after {
             background-color: #fff;
             animation: background-to-white .25s ease-in;
@@ -49,8 +49,8 @@
         z-index: 2;
     }
 
-    &__checkbox:checked + &__label &__icon-wrapper--add,
-    &__checkbox:not(:checked) + &__label &__icon-wrapper--remove {
+    &--checked &__label &__icon-wrapper--add,
+    &:not(.ez-add-to-bookmarks--checked) &__label &__icon-wrapper--remove {
         opacity: 0;
         transform: scale(0);
     }

src/bundle/Resources/views/parts/form/location_bookmark.html.twig

@@ -1,6 +1,7 @@
 {% trans_default_domain 'locationview' %}
+{% form_theme form _self '@EzPlatformAdminUi/form_fields.html.twig'  %}
 
-<div class="ez-add-to-bookmarks">
+<div class="ez-add-to-bookmarks {{ form.vars.data.bookmarked ? 'ez-add-to-bookmarks--checked'}}">
     {{ form_start(form, {'action': path('ezplatform.location.update_bookmark')}) }}
         {{ form_widget(form.bookmarked, {'attr': {'class': 'ez-add-to-bookmarks__checkbox'}}) }}
         <label class="ez-add-to-bookmarks__label" for="{{ form.bookmarked.vars.id}}">