Added options to control different ranges of breakpoints.

2022-08-11 10:51:56 +03:00
parent 9173efe9c9
commit 28ecfa281c
26 changed files with 18323 additions and 11019 deletions
@@ -14,6 +14,6 @@
 <script>window.previewFrameUrl = 'http://localhost:{{ port }}/view/{{ baseView }}';</script>
 <iframe id="preview_frame" src="http://localhost:{{ port }}/view/{{ baseView }}" class="breakpoint"></iframe>

-<script src="/scripts/page--toolbar.js"></script>
+<script src="/scripts/dist/index.min.js"></script>
 </body>
 </html>
@@ -1,16 +1,5 @@
 <header class="page_toolbar">

-  <div class="page_toolbar__responsive_mode">
-    <input type="radio" value="desktop" id="responsive_mode__desktop" name="responsive_mode" checked="checked"/>
-    <label for="responsive_mode__desktop">Desktop</label>
-
-    <input type="radio" value="tablet" id="responsive_mode__tablet" name="responsive_mode"/>
-    <label for="responsive_mode__tablet">Tablet</label>
-
-    <input type="radio" value="mobile" id="responsive_mode__mobile" name="responsive_mode"/>
-    <label for="responsive_mode__mobile">Mobile</label>
-  </div>
-
  <div class="page_toolbar__data_options">
    <label for="data-options">Data Options: </label>

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+  <path
+    d="M22.55 42.65q-6.45-.55-10.85-5.3Q7.3 32.6 7.3 26.1q0-3.95 1.775-7.4t4.975-5.75l2.8 2.85q-2.6 1.6-4.1 4.375-1.5 2.775-1.5 5.925 0 4.9 3.225 8.45 3.225 3.55 8.075 4.1Zm3 0v-4q4.9-.6 8.075-4.125Q36.8 31 36.8 26.1q0-5.2-3.55-8.875T24.5 13.35h-1.1l3.15 3.15-2.4 2.4-7.65-7.65 7.65-7.7 2.4 2.4-3.45 3.4h1.1q6.95 0 11.775 4.9T40.8 26.1q0 6.5-4.4 11.25t-10.85 5.3Z"/>
+</svg>
@@ -0,0 +1,31 @@
+'use strict';
+
+import {setupResponsiveness} from './toolbar/responsive.jsx';
+
+const rootAttributes = {
+  previewFrame: document.getElementById('preview_frame'),
+}
+
+setupResponsiveness(rootAttributes);
+
+// const responsiveness = connectResponsiveness(rootAttributes);
+// setTimeout(() => responsiveness.selectMode('tablet'), 5000)
+// setTimeout(() => responsiveness.selectMode('mobile'), 10000)
+
+const previewFrame = rootAttributes.previewFrame;
+initDataOptions();
+
+/**
+ * Functions
+ */
+
+function initDataOptions() {
+  const dataOptionsSelect = document.getElementById('data-options');
+  if (!dataOptionsSelect) {
+    return;
+  }
+
+  dataOptionsSelect.addEventListener('change', function () {
+    previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
+  });
+}
@@ -1,38 +0,0 @@
-(function () {
-
-  const previewFrame = document.getElementById('preview_frame');
-
-  initDataOptions();
-  initResponsiveMode();
-
-  /**
-   * Functions
-   */
-
-  function initDataOptions() {
-    const dataOptionsSelect = document.getElementById('data-options');
-    if (!dataOptionsSelect) {
-      return;
-    }
-
-    dataOptionsSelect.addEventListener('change', function () {
-      previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
-    });
-  }
-
-  function initResponsiveMode() {
-
-    document.querySelectorAll('input[name="responsive_mode"]').forEach((input) => {
-      input.addEventListener('change', (event) => {
-        const mode = event.target.value;
-
-        previewFrame.classList.remove('breakpoint--desktop');
-        previewFrame.classList.remove('breakpoint--tablet');
-        previewFrame.classList.remove('breakpoint--mobile');
-
-        previewFrame.classList.add('breakpoint--' + mode);
-      });
-    });
-  }
-
-})();
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M15 20H9" stroke="url(#paint0_linear_17102_17357)" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round"/>
+  <path
+    d="M19 5H5C4.44772 5 4 5.44772 4 6V16C4 16.5523 4.44772 17 5 17H19C19.5523 17 20 16.5523 20 16V6C20 5.44772 19.5523 5 19 5Z"
+    stroke="url(#paint1_linear_17102_17357)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <defs>
+    <linearGradient id="paint0_linear_17102_17357" x1="9" y1="21" x2="11.3077" y2="17.5385"
+                    gradientUnits="userSpaceOnUse">
+      <stop stop-color="#14181F"/>
+      <stop offset="1" stop-color="#272A31"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_17102_17357" x1="4" y1="17" x2="22" y2="11" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#14181F"/>
+      <stop offset="1" stop-color="#272A31"/>
+    </linearGradient>
+  </defs>
+</svg>
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path
+    d="M16 3H8C7.44772 3 7 3.44772 7 4V20C7 20.5523 7.44772 21 8 21H16C16.5523 21 17 20.5523 17 20V4C17 3.44772 16.5523 3 16 3Z"
+    stroke="url(#paint0_linear_17102_17362)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 18H12.002V18.002H12V18Z" stroke="url(#paint1_linear_17102_17362)" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round"/>
+  <defs>
+    <linearGradient id="paint0_linear_17102_17362" x1="7" y1="21" x2="19.2634" y2="19.2967"
+                    gradientUnits="userSpaceOnUse">
+      <stop stop-color="#14181F"/>
+      <stop offset="1" stop-color="#272A31"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_17102_17362" x1="12" y1="18.002" x2="12.0024" y2="18.0014"
+                    gradientUnits="userSpaceOnUse">
+      <stop stop-color="#14181F"/>
+      <stop offset="1" stop-color="#272A31"/>
+    </linearGradient>
+  </defs>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+  <path
+    d="M22.55 42.65q-6.45-.55-10.85-5.3Q7.3 32.6 7.3 26.1q0-3.95 1.775-7.4t4.975-5.75l2.8 2.85q-2.6 1.6-4.1 4.375-1.5 2.775-1.5 5.925 0 4.9 3.225 8.45 3.225 3.55 8.075 4.1Zm3 0v-4q4.9-.6 8.075-4.125Q36.8 31 36.8 26.1q0-5.2-3.55-8.875T24.5 13.35h-1.1l3.15 3.15-2.4 2.4-7.65-7.65 7.65-7.7 2.4 2.4-3.45 3.4h1.1q6.95 0 11.775 4.9T40.8 26.1q0 6.5-4.4 11.25t-10.85 5.3Z"/>
+</svg>
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path
+    d="M20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4C21 3.44772 20.5523 3 20 3Z"
+    stroke="url(#paint0_linear_17102_17360)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 18H12.002V18.002H12V18Z" stroke="url(#paint1_linear_17102_17360)" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round"/>
+  <defs>
+    <linearGradient id="paint0_linear_17102_17360" x1="3" y1="21" x2="24.1765" y2="15.7059"
+                    gradientUnits="userSpaceOnUse">
+      <stop stop-color="#14181F"/>
+      <stop offset="1" stop-color="#272A31"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_17102_17360" x1="12" y1="18.002" x2="12.0024" y2="18.0014"
+                    gradientUnits="userSpaceOnUse">
+      <stop stop-color="#14181F"/>
+      <stop offset="1" stop-color="#272A31"/>
+    </linearGradient>
+  </defs>
+</svg>
@@ -0,0 +1,94 @@
+import React, {useCallback, useEffect, useState} from "react";
+import {ButtonStyling, ResponsiveButtonStyle, ResponsiveOptionsDropdown} from "./responsive-button.style.js";
+
+const responsiveOptions = {
+  desktop: [1920, 1800, 1680, 1440, 1360, 1280, 1024],
+  tablet: [992, 768, 600],
+  mobile: [480, 414, 375, 360],
+}
+
+const defaultResponsiveOptions = {
+  reset: '100%',
+  desktop: responsiveOptions.desktop[0],
+  tablet: responsiveOptions.tablet[1],
+  mobile: responsiveOptions.mobile[2],
+}
+
+export function ResponsiveButton({mode, active, onSelect}) {
+  // active = true;
+  const [state, setState] = useState({open: true, breakpoint: defaultResponsiveOptions[mode]});
+  const updateState = (update) => {
+    // update.open = true;
+    setState(Object.assign({}, state, update));
+  }
+
+  useEffect(() => {
+    const closeDropdown = (e) => isEscHit(e) ? updateState({open: false}) : null;
+
+    if (state.open) {
+      document.addEventListener("keydown", closeDropdown);
+    }
+
+    // Unsubscribe from ESC listener.
+    return () => {
+      document.removeEventListener("keydown", closeDropdown);
+    }
+  });
+
+  // Blur event / Outside click
+  const outsideClickAction = async (e) => await isClickOutside(e) ? updateState({open: false}) : null;
+  const handleBlur = useCallback(outsideClickAction, []);
+
+  return <ResponsiveButtonStyle tabIndex='0' onBlur={handleBlur}>
+    <ButtonStyling data-mode={mode} data-active={active} onClick={() => select()}>{mode}</ButtonStyling>
+    {active && state.open && responsiveOptions[mode] &&
+      <ResponsiveOptionsDropdown>
+        {responsiveOptions[mode].map((breakpoint) => {
+          return <li>
+            <a className={state.breakpoint === breakpoint ? 'active' : ''} onClick={() => select(breakpoint)}>{breakpoint}</a>
+          </li>;
+        })}
+      </ResponsiveOptionsDropdown>
+    }
+  </ResponsiveButtonStyle>;
+
+  //
+  // Actions
+  //
+
+  function select(breakpoint = null) {
+    // Click on option in Dropdown.
+    if (breakpoint) {
+      updateState({open: false, breakpoint});
+      onSelect(breakpoint);
+      return;
+    }
+
+    // Click on device button.
+    if (!active) {
+      onSelect(state.breakpoint)
+      updateState({open: false});
+    } else {
+      updateState({open: true});
+    }
+  }
+}
+
+export function update(state, update) {
+  return Object.assign({}, state, update);
+}
+
+export async function isClickOutside(e) {
+  const currentTarget = e.currentTarget;
+
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(!currentTarget.contains(document.activeElement));
+    }, 100);
+  })
+}
+
+export function isEscHit(event) {
+  return event.key === 'Escape'
+}
+
@@ -0,0 +1,73 @@
+import styled from "styled-components";
+
+export const ButtonStyling = styled.button`
+  --size: 1.5rem;
+  cursor: pointer;
+  border: 0;
+  background-image: url("/scripts/dist/toolbar/images/icon-desktop.svg");
+  background-repeat: no-repeat;
+  background-size: calc(var(--size) - 0.15rem);
+  background-position: center;
+  background-color: initial;
+  font-size: 1px;
+  color: rgba(0, 0, 0, 0);
+  line-height: 1;
+  display: block;
+  width: var(--size);
+  height: var(--size);
+  border-radius: 0.25rem;
+  outline: none;
+
+  &[data-mode='tablet'] {
+    background-image: url("/scripts/dist/toolbar/images/icon-tablet.svg");
+  }
+
+  &[data-mode='mobile'] {
+    background-image: url("/scripts/dist/toolbar/images/icon-mobile.svg");
+  }
+
+  &[data-mode='reset'] {
+    background-image: url("/scripts/dist/toolbar/images/icon-reset.svg");
+  }
+
+  &[data-active='true'] {
+    background-color: #CBD5E0;
+  }
+`;
+
+export const ResponsiveOptionsDropdown = styled.ul`
+  list-style: none;
+  padding: 4px;
+  position: absolute;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  box-shadow: 2px 2px 4px 0 #ccc;
+  border-radius: 4px;
+  transform: translateX(-50%);
+  left: 50%;
+  margin: 0.25rem 0 0;
+
+  li {
+    margin-bottom: 2px;
+
+    a {
+      display: block;
+      padding: 0.5rem 1rem;
+      cursor: pointer;
+      color: #14181F;
+      border-radius: 4px;
+
+      &:hover, &:focus {
+        background-color: #EDF2F7;
+      }
+
+      &.active {
+        background-color: #cbd5e0;
+      }
+    }
+  }
+`;
+
+export const ResponsiveButtonStyle = styled.div`
+  position: relative;
+`;
@@ -0,0 +1,81 @@
+// export function connectResponsiveness(rootAttributes) {
+//   // API
+//   return {
+//     selectMode: (mode) => selectMode(mode),
+//   }
+// }
+//
+
+import React, {useEffect, useState} from 'react';
+import * as ReactDOM from 'react-dom/client';
+import {WrapperStyling} from "./responsive.style.js";
+import {ResponsiveButton} from "./responsive-button/ResponsiveButton.jsx";
+
+const modes = [
+  'reset',
+  'desktop',
+  'tablet',
+  'mobile'
+];
+
+function Responsive(props = {}) {
+  props.rootAttributes = props.rootAttributes ?? {};
+
+  const initialState = {mode: 'default', breakpoint: '100%'}
+
+  const [state, setState] = useState(initialState);
+  const updateState = (update) => setState(Object.assign({}, state, update));
+
+  useEffect(() => {
+    // Update the document title using the browser API
+    updateController(state);
+  });
+
+  const previewFrame = props.rootAttributes.previewFrame;
+  return render();
+
+  //
+  // Functions
+  //
+
+  function render() {
+    return <WrapperStyling>
+      {modes.map((mode) => {
+        return <ResponsiveButton mode={mode}
+                                 active={isActive(mode)}
+                                 onSelect={(breakpoint) => selectMode(mode, breakpoint)}/>
+      })}
+    </WrapperStyling>;
+  }
+
+  function selectMode(mode, breakpoint) {
+    if (mode === 'reset') {
+      updateState(initialState);
+      return;
+    }
+
+    updateState({mode, breakpoint})
+  }
+
+
+  function isActive(mode) {
+    return mode === state.mode;
+  }
+
+  function updateController() {
+    const unit = typeof state.breakpoint === 'string' ? '' : 'px';
+    previewFrame.style.setProperty('--breakpoint', state.breakpoint + unit);
+    previewFrame.classList.add('has-breakpoint');
+  }
+
+}
+
+export function setupResponsiveness(rootAttributes) {
+  // INIT
+  const wrapper = document.createElement('div');
+  document.querySelector('.page_toolbar').prepend(wrapper)
+
+  const root = ReactDOM.createRoot(wrapper);
+  const html = (<Responsive rootAttributes={rootAttributes}/>);
+  root.render(html);
+}
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const WrapperStyling = styled.div`
+  display: flex;
+  gap: 0.5rem;
+`;
@@ -3,22 +3,24 @@
  margin-right: auto;
  margin-left: auto;

+  --top_panel_height: 53.5px;
+  --top_spacing: 0px;
+  --breakpoint_top_spacing: 30px;
+
+  margin-top: var(--top_spacing);
+  height: calc(100% - var(--top_panel_height) - var(--top_spacing));
+  background-color: white;
+
  border: 1px solid #E2E8F0;

-  transition: max-width .3s ease-in-out, width .3s ease-in-out;
+  transition: max-width .3s ease-in-out, width .3s ease-in-out, margin-top .3s ease-in-out;
+
+  &.has-breakpoint {
+    --breakpoint: 100%;

-  &.breakpoint {
    width: 100%;
-    max-width: 1920px;
-    //max-width: 100%;
-
-    &--mobile {
-      max-width: 375px;
-    }
-
-    &--tablet {
-      max-width: 768px;
-    }
+    max-width: var(--breakpoint);
+    box-sizing: border-box;
  }

 }
@@ -1,38 +0,0 @@
-
-&__responsive_mode {
-  display: flex;
-  gap: 0.5rem;
-
-  input[type='radio'] {
-    display: none;
-  }
-
-  label {
-    --size: 1.5rem;
-    cursor: pointer;
-    background-image: url("../images/icon-desktop.svg");
-    background-repeat: no-repeat;
-    background-size: calc(var(--size) - 0.15rem);
-    background-position: center;
-    font-size: 1px;
-    color: rgba(0, 0, 0, 0);
-    line-height: 1;
-    display: block;
-    width: var(--size);
-    height: var(--size);
-    border-radius: 0.25rem;
-
-    &[for="responsive_mode__tablet"] {
-      background-image: url("../images/icon-tablet.svg");
-    }
-
-    &[for="responsive_mode__mobile"] {
-      background-image: url("../images/icon-mobile.svg");
-    }
-  }
-
-  input[type='radio']:checked + label {
-    background-color: #CBD5E0;
-  }
-
-}
@@ -4,12 +4,6 @@ body {
  background-color: #F7FAFC;
 }

-iframe {
-  margin-top: 30px;
-  height: calc(100% - 54px - 32px);
-  background-color: white;
-}
-
 .page_toolbar {
  --gap: 2.5rem;
  font-size: 14px;
@@ -52,54 +46,25 @@ iframe {
    display: block;
  }
 }
-.page_toolbar__responsive_mode {
-  display: flex;
-  gap: 0.5rem;
-}
-.page_toolbar__responsive_mode input[type=radio] {
-  display: none;
-}
-.page_toolbar__responsive_mode label {
-  --size: 1.5rem;
-  cursor: pointer;
-  background-image: url("../images/icon-desktop.svg");
-  background-repeat: no-repeat;
-  background-size: calc(var(--size) - 0.15rem);
-  background-position: center;
-  font-size: 1px;
-  color: rgba(0, 0, 0, 0);
-  line-height: 1;
-  display: block;
-  width: var(--size);
-  height: var(--size);
-  border-radius: 0.25rem;
-}
-.page_toolbar__responsive_mode label[for=responsive_mode__tablet] {
-  background-image: url("../images/icon-tablet.svg");
-}
-.page_toolbar__responsive_mode label[for=responsive_mode__mobile] {
-  background-image: url("../images/icon-mobile.svg");
-}
-.page_toolbar__responsive_mode input[type=radio]:checked + label {
-  background-color: #CBD5E0;
-}

 #preview_frame {
  display: block;
  margin-right: auto;
  margin-left: auto;
+  --top_panel_height: 53.5px;
+  --top_spacing: 0px;
+  --breakpoint_top_spacing: 30px;
+  margin-top: var(--top_spacing);
+  height: calc(100% - var(--top_panel_height) - var(--top_spacing));
+  background-color: white;
  border: 1px solid #E2E8F0;
-  transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out;
+  transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out, margin-top 0.3s ease-in-out;
 }
-#preview_frame.breakpoint {
+#preview_frame.has-breakpoint {
+  --breakpoint: 100%;
  width: 100%;
-  max-width: 1920px;
-}
-#preview_frame.breakpoint--mobile {
-  max-width: 375px;
-}
-#preview_frame.breakpoint--tablet {
-  max-width: 768px;
+  max-width: var(--breakpoint);
+  box-sizing: border-box;
 }

 /*# sourceMappingURL=page--main.css.map */
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--main.scss","_page--main--responsive-mode.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;ACxDN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;;;AClCJ;EACE;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EACA;;AAGA;EACE;;AAGF;EACE","file":"page--main.css"}
+{"version":3,"sourceRoot":"","sources":["page--main.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EAEA;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;;ACnDN;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"page--main.css"}
@@ -5,12 +5,6 @@ body {
  background-color: #F7FAFC;
 }

-iframe {
-  margin-top: 30px;
-  height: calc(100% - 54px - 32px);
-  background-color: white;
-}
-
 .page_toolbar {
  --gap: 2.5rem;
  font-size: 14px;
@@ -59,7 +53,6 @@ iframe {
    }
  }

-  @import "page--main--responsive-mode";
 }

@import "page--breakpoints";