Merge pull request #1 from wedevelopnl/ss-5-wip

Frontend integration

_config/routing.yml

@@ -0,0 +1,8 @@
+---
+Name: admin-toolbar-routes
+After:
+  - '#rootroutes'
+---
+SilverStripe\Control\Director:
+  rules:
+    'admintoolbaraction//$Action/$ID': 'WeDevelop\AdminToolbar\Controllers\AdminToolbarActionController'

client/src/js/app.js

@@ -1,19 +1,63 @@
+import './dialog';
+
 document.addEventListener('DOMContentLoaded', () => {
   const adminToolbar = document.getElementById('admin-toolbar');
+  const adminToolbarToggle = document.querySelector('[data-toggle-admin-toolbar]');
+  const initialAdminToolbarActive = localStorage.getItem('ss-at-admin-toolbar-active');
+  const inactiveClass = 'ss-at-collapse';
 
-  if (!adminToolbar.classList.contains('admin-toolbar-collapsed')) {
-    document.body.classList.add('has-admin-toolbar');
+  if (initialAdminToolbarActive !== 'false') {
+    adminToolbar.querySelector('.admin-toolbar-inner').classList.remove(inactiveClass);
+  } else {
+    adminToolbarToggle.classList.toggle('ss-at-origin-center');
+    adminToolbarToggle.classList.toggle('ss-at-rotate-180');
   }
 
-  const adminToolbarToggle = document.getElementById('admin-toolbar-toggle');
-
   adminToolbarToggle.addEventListener('click', () => {
-    if (adminToolbar.classList.contains('admin-toolbar-collapsed')) {
-      adminToolbar.classList.remove('admin-toolbar-collapsed');
-      document.body.classList.add('has-admin-toolbar');
-    } else {
-      adminToolbar.classList.add('admin-toolbar-collapsed');
-      document.body.classList.remove('has-admin-toolbar');
-    }
+    const toolbar = adminToolbar.querySelector('.admin-toolbar-inner');
+    toolbar.classList.toggle(inactiveClass);
+
+    adminToolbarToggle.classList.toggle('ss-at-origin-center');
+    adminToolbarToggle.classList.toggle('ss-at-rotate-180');
+
+    localStorage.setItem('ss-at-admin-toolbar-active', !toolbar.classList.contains(inactiveClass));
+  });
+
+  const csrfToken = document.querySelector('.admin-toolbar-menu #SecurityID');
+
+  const url = '/admintoolbaraction/pageAction';
+
+  document.querySelectorAll('a[data-action]').forEach((element) => {
+    element.addEventListener('click', (e) => {
+      e.preventDefault();
+      const { pageid, action } = e.target.dataset;
+
+      fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Securityid': csrfToken.value,
+        },
+        body: JSON.stringify({
+          page_id: pageid,
+          action,
+        }),
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          const responseMessageContainer = document.getElementById('response-message');
+          if (responseMessageContainer && data.message) {
+            const messageSpan = responseMessageContainer.querySelector('span');
+            if (messageSpan) {
+              messageSpan.textContent = data.message;
+              responseMessageContainer.classList.remove('ss-at-hidden'); // Toon het message container
+            }
+          }
+        })
+        .catch((error) => {
+          console.error('Error:', error);
+          // Geef hier feedback over de fout aan de gebruiker
+        });
+    });
   });
 });

client/src/js/dialog.js

@@ -0,0 +1,29 @@
+const dialogs = document.querySelectorAll('dialog');
+
+dialogs.forEach((dialog) => {
+  const toggleButtons = document.querySelectorAll(`[data-toggle-dialog="${dialog.id}"]`);
+
+  toggleButtons.forEach((toggleButton) => {
+    toggleButton.addEventListener('click', (e) => {
+      e.preventDefault();
+      if (dialog.open) {
+        dialog.close();
+      } else {
+        if (dialog.id === 'toggles') {
+          const wrapper = document.querySelector('[data-contains-relative-dialog]');
+
+          const toggleDialog = dialog;
+          toggleDialog.style.top = `${wrapper.getBoundingClientRect().top}px`;
+          toggleDialog.style.left = `${wrapper.getBoundingClientRect().left}px`;
+        }
+        dialog.showModal();
+      }
+    });
+  });
+});
+
+window.addEventListener('click', (e) => {
+  if (e.target.nodeName === 'DIALOG') {
+    e.target.close();
+  }
+});

client/src/js/queries-button.js

@@ -4,7 +4,7 @@ const button = document.querySelector('[data-queries-button]');
 const isToggled = localStorage.getItem(configKey) === 'true';
 
 if (isToggled) {
-  button.classList.remove('admin-toolbar-hidden');
+  button.classList.remove('ss-at-hidden');
 }
 
 const queriesURL = new URL(window.location.href);
@@ -18,7 +18,7 @@ queriesURL.searchParams.set('showqueries', 'inline');
 function parseResponse(text) {
   const parser = new DOMParser();
   const doc = parser.parseFromString(text, 'text/html');
-  const timeRegex = /(\\d\\.\\d*)s/;
+  const timeRegex = /(\d+\.\d+)s/;
   const timings = [];
   const queries = [];
 

client/src/js/queries-toggle.js

@@ -9,10 +9,13 @@ function setState(state) {
   localStorage.setItem(selector, state);
 }
 
-if (checkbox && checkbox.checked) {
-  getState();
-}
+document.addEventListener('DOMContentLoaded', () => {
+  if (checkbox) {
+    checkbox.checked = getState();
+  }
+});
 
 checkbox?.addEventListener('change', (e) => {
   setState(e.currentTarget.checked);
+  window.location.reload();
 });

client/src/js/tailwind/theme-colors.js

@@ -1,3 +1,10 @@
 export const themeColors = {
-    "primary": "hsla(216, 100%, 44%, 0)",
+  primary: 'hsl(216, 100%, 44%)',
+  silverstripe: {
+    100: '#F4F6F8',
+    200: '#E1E5EC',
+    300: '#CED5E1',
+    DEFAULT: '#005AE1',
+  },
+  text: '#1D242F',
 };

client/src/js/tailwind/theme-safelist.js

@@ -1,22 +1,30 @@
 export const themeSafeList = [
-    'p-1',
-    'p-2',
-    'p-3',
-    'p-4',
-    'p-5',
-    'p-6',
-    'p-7',
-    'p-8',
-    'p-9',
-    'p-10',
-    'p-11',
-    'p-12',
-    'p-13',
-    'p-14',
-    'p-15',
-    'p-16',
-    'p-17',
-    'p-18',
-    'p-19',
-    'p-20',
+  'ss-at-text-priamry',
+  'hover:ss-at-text-primary',
+  'ss-at-col-span-1',
+  'ss-at-col-span-2',
+  'ss-at-col-span-3',
+  'ss-at-col-span-4',
+  'ss-at-col-span-5',
+  'ss-at-col-span-6',
+  'ss-at-col-span-7',
+  'ss-at-col-span-8',
+  'ss-at-col-span-9',
+  'ss-at-col-span-10',
+  'ss-at-col-span-11',
+  'ss-at-col-span-12',
+  'ss-at-collapse',
+  'ss-at-rotate-180',
+  'ss-at-origin-center',
+  'ss-at-bg-blue-200',
+  'ss-at-bg-blue-800',
+  'ss-at-bg-orange-200',
+  'ss-at-bg-orange-800',
+  'ss-at-bg-green-200',
+  'ss-at-bg-green-800',
+  'ss-at-bg-yellow-200',
+  'ss-at-bg-yellow-800',
+  'ss-at-text-red-600',
+  'hover:ss-at-text-red-700',
+  'peer-hover:ss-at-opacity-100',
 ];

client/src/js/tailwind/theme-typography.js

@@ -1,27 +1,27 @@
 export const themeFontSizes = {
-    '1': '0.125rem',                // 2px
-    '2': '0.25rem',                 // 4px
-    '3': '0.5rem',                  // 8px
-    '4': '0.75rem',                 // 12px
-    '5': '0.75rem',                 // 14px
-    '6': '1rem',                    // 16px
-    '7': '1rem',                    // 18px
-    base: '18px',                   // 18px
-    '8': '1.25rem',                 // 20px
-    '9': '1.5rem',                  // 24px
-    '10': '1.5rem',                 // 28px
-    '11': '2rem',                   // 32px
-    '12': '2.5rem',                 // 40px
-    '13': '3rem',                   // 48px
+    '1': '0.25rem',                // 4px
+    '2': '0.5rem',                 // 8px
+    '3': '0.75rem',                 // 12px
+    '3.5': '0.875rem',              // 14px
+    '4': '1rem',                    // 16px
+    base: '1.125rem',               // 18px
+    '5': '1.25rem',                 // 20px
+    '6': '1.5rem',                  // 24px
+    '7': '1.75rem',                 // 28px
+    '8': '2rem',                    // 32px
+    '9': '2.25rem',                 // 36px
+    '10': '2.5rem',                 // 40px
+    '11': '2.75rem',                // 44px
+    '12': '3rem',                   // 48px
     '14': '3.5rem',                 // 56px
-    '15': '4rem',                   // 64px
-    '16': '4.5rem',                 // 72px
-    '17': '5rem',                   // 80px
-    '18': '6rem',                   // 96px
-    '19': ['7.5rem', '1.25em'],     // 120px
-    '20': ['10rem', {               // 160px
-        lineHeight: '1.25em',
-        letterSpacing: '0.25em',
-        fontWeight: '500',
-    }]
+    '16': '4rem',                   // 64px
+    '20': '5rem',                   // 80px
+    '24': '6rem',                   // 96px
+    '30': '6rem',                   // 120px
 };
+
+export const themeFontFamily = {
+  'sans': ['Roboto'],
+  'display': ['Roboto'],
+  'body': ['Roboto'],
+}

client/src/js/timing-button.js

@@ -3,7 +3,7 @@ const button = document.querySelector('[data-timing-button]');
 const isToggled = localStorage.getItem(configKey) === 'true';
 
 if (isToggled) {
-  button.classList.remove('admin-toolbar-hidden');
+  button.classList.remove('ss-at-hidden');
 }
 
 const iframe = document.createElement('iframe');
@@ -13,7 +13,7 @@ const adminDisabledURL = new URL(window.location.href);
 adminDisabledURL.searchParams.set('AdminToolbarDisabled', '1');
 
 iframe.addEventListener('load', () => {
-  button.innerHTML = `${new Date().getTime() - startTime}ms`;
+  button.querySelector('.ss-at-btn-content').innerHTML = `${new Date().getTime() - startTime}ms`;
   iframe.remove();
 });
 

client/src/js/timing-toggle.js

@@ -9,10 +9,13 @@ function setState(state) {
   localStorage.setItem(selector, state);
 }
 
-if (checkbox && checkbox.checked) {
-  getState();
-}
+document.addEventListener('DOMContentLoaded', () => {
+  if (checkbox) {
+    checkbox.checked = getState();
+  }
+});
 
 checkbox?.addEventListener('change', (e) => {
   setState(e.currentTarget.checked);
+  window.location.reload();
 });