source/js/components/ViewProvider.vue

@@ -4,6 +4,7 @@
       v-bind:views="views"
       v-bind:isCurrentView="isCurrentView"
       v-bind:toggleView="toggleView"
+      v-bind:showView="showView"
       v-bind:setView="setView"
     ></slot>
   </div>
@@ -14,11 +15,20 @@ export default {
   props: {
     initial: {
       default: () => {}
+    },
+    syncLocation: {
+      type: Boolean,
+      default: false,
+    },
+    locationParam: {
+      type: String,
+      default: "view",
     }
   },
   data() {
     return {
       views: this.$props.initial,
+      queryParams: null,
       keyListener: e => {
         // Esc
         if (e.keyCode === 27) {
@@ -27,21 +37,38 @@ export default {
       }
     };
   },
-  methods: {
-    setView(viewId, show) {
-      this.$data.views[viewId] = show;
-    },
-    setViews(updates) {
-      this.$data.views = {...this.data.views, updates};
+  watch: {
+    routeView() {
+      const queryParams = new URLSearchParams(window.location.search);
+    }
   },
-    toggleView(viewId) {
+  methods: {
+    setView(viewId, show, hideOthers = false) {
+      if (hideOthers) {
         Object.keys(this.$data.views).forEach(key => {
           if (key !== viewId) {
             this.setView(key, false);
           }
         });
+      }
+
+      this.$data.views[viewId] = show;
 
-      this.setView(viewId, !this.isCurrentView(viewId));
+      if (show && this.$props.syncLocation) {
+        const queryParams = new URLSearchParams(window.location.search);
+
+        queryParams.set(this.$props.locationParam, viewId);
+        history.pushState(null, null, "?" + queryParams.toString());
+      }
+    },
+    setViews(updates) {
+      this.$data.views = Object.assign({}, this.data.views, updates);
+    },
+    toggleView(viewId) {
+      this.setView(viewId, !this.isCurrentView(viewId), true);
+    },
+    showView(viewId) {
+      this.setView(viewId, true, true);
     },
     isCurrentView(viewId) {
       return this.$data.views[viewId];
@@ -53,7 +80,16 @@ export default {
     }
   },
   mounted() {
-    window.addEventListener('keydown', this.$data.keyListener);;
+    window.addEventListener('keydown', this.$data.keyListener);
+
+    if (this.$props.syncLocation) {
+      const queryParams = new URLSearchParams(window.location.search);
+      const locationView = queryParams.get(this.$props.locationParam);
+
+      if (locationView && Object.keys(this.$data.views).indexOf(locationView) !== -1) {
+        this.showView(locationView);
+      }
+    }
   },
   destroyed() {
     window.removeEventListener('keydown', this.$data.keyListener);

source/js/components/footer/FooterCollapsible.vue

@@ -9,17 +9,15 @@
 </template>
 
 <script>
-import screens from "../../../../screens";
-
-const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
+import { isLgScreenSize } from "../../utils";
 
 export default {
   data() {
     return {
-      isLgScreenSize: this.getWindowWidth() >= lgScreenSize,
+      isLgScreenSize: isLgScreenSize(),
       show: false,
       resizeHandler: () => {
-        this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize;
+        this.$data.isLgScreenSize = isLgScreenSize();
       },
     };
   },
@@ -43,9 +41,6 @@ export default {
     }
   },
   methods: {
-    getWindowWidth() {
-      return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-    },
     handleClick() {
       if (this.$props.href) {
         window.location = this.$props.href;

source/js/components/full-calendar/MonthCalendar.vue

+<script>
+import FullCalendar from "@fullcalendar/vue"
+import dayGridPlugin from "@fullcalendar/daygrid"
+
+import { showEventData } from './utils'
+
+export default {
+    components: {
+        FullCalendar // make the <FullCalendar> tag available
+    },
+    props: ["events"],
+    data() {
+        return {
+            calendarOptions: {
+                plugins: [ dayGridPlugin ],
+                initialView: "dayGridMonth",
+                contentHeight: "auto",
+                locale: "cs",
+                buttonText: {
+                    today: "dnes"
+                },
+                eventTimeFormat: {
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    meridiem: false
+                },
+                moreLinkContent: (arg) => { return `+${arg.num} další` },
+                eventClick (info) {
+                    showEventData(info)
+                },
+                events: JSON.parse(this.events)
+            }
+        }
+    }
+}
+</script>
+
+<template>
+    <FullCalendar :options="calendarOptions" />
+</template>

source/js/components/full-calendar/YearCalendar.vue

+<script>
+import FullCalendar from "@fullcalendar/vue"
+import dayGridPlugin from "@fullcalendar/daygrid"
+import multiMonthPlugin from "@fullcalendar/multimonth"
+
+import { showEventData } from './utils'
+
+export default {
+    components: {
+        FullCalendar // make the <FullCalendar> tag available
+    },
+    props: ["events"],
+    data() {
+        return {
+            calendarOptions: {
+                plugins: [ dayGridPlugin, multiMonthPlugin ],
+                initialView: "multiMonthYear",
+                contentHeight: "auto",
+                locale: "cs",
+                buttonText: {
+                    today: "dnes"
+                },
+                moreLinkContent: (arg) => { return `+${arg.num} další` },
+                eventClick (info) {
+                    showEventData(info)
+                },
+                events: JSON.parse(this.events)
+            }
+        }
+    }
+}
+</script>
+
+<template>
+    <FullCalendar :options="calendarOptions" />
+</template>

source/js/components/full-calendar/utils.js

+import tippy from 'tippy.js';
+
+
+const showEventData = (info) => {
+    if (
+        info.event.url === ''
+        && info.event.extendedProps.location === undefined
+        && info.event.extendedProps.url === undefined
+    ) {
+        return
+    }
+
+    info.jsEvent.preventDefault();
+
+    const popup = tippy(
+        info.el,
+        {
+            content: `
+                <div class="p-2 flex flex-col gap-3 text-white whitespace-nowrap">
+                    ${
+                        (info.event.title !== undefined) ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <div>${info.event.title}</div>
+                            </div>
+                        ` : ''
+                    }
+                    ${
+                        (info.event.extendedProps.location !== undefined) ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <i class="ico--location" aria-label="Místo konání"></i>
+                                <div>${info.event.extendedProps.location}</div>
+                            </div>
+                        ` : ''
+                    }
+                    ${
+                        (info.event.extendedProps.description !== undefined) ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <i class="ico--info" aria-label="Popis"></i>
+                                <div>${info.event.extendedProps.description}</div>
+                            </div>
+                        ` : ''
+                    }
+                    ${
+                        (info.event.url !== '') ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <i class="ico--link" aria-label="Adresa"></i>
+                                <a class="underline cursor-pointer" href="${info.event.url}">${info.event.url}</a>
+                            </div>
+                        ` : ''
+                    }
+                </div>
+            `,
+            trigger: (
+                (
+                    info.event.url !== ''
+                    && info.event.extendedProps.location === undefined
+                    && info.event.extendedProps.url === undefined
+                ) ?
+                'hover' : 'click'
+            ),
+            allowHTML: true,
+            interactive: true
+        }
+    );
+
+    popup.show();
+} 
+
+export { showEventData }

source/js/components/navbar/Navbar.vue

 <script>
   import UiNavbarSubitem from "./NavbarSubitem";
-  import screens from "../../../../screens";
-
-  const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
+  import UiNavbarSubitemReplacing from "./NavbarSubitemReplacing";
+  import { isLgScreenSize } from "../../utils";
 
   export default {
     components: {
-      UiNavbarSubitem
+      UiNavbarSubitem,
+      UiNavbarSubitemReplacing,
     },
     data() {
       return {
-        isLgScreenSize: this.getWindowWidth() >= lgScreenSize,
+        isLgScreenSize: isLgScreenSize(),
         show: false,
         resizeHandler: () => {
-          this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize;
+          this.$data.isLgScreenSize = isLgScreenSize();
         },
       };
     },
-    methods: {
-      getWindowWidth() {
-        return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-      }
-    },
     mounted() {
       this.$nextTick(() => {
         window.addEventListener("resize", this.$data.resizeHandler);

source/js/components/navbar/NavbarSubitem.vue

 <template>
-  <div @mouseenter="show = true" @mouseleave="show = false">
-    <span class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
-
+  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
+    <a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
     <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
       <slot>
       </slot>
@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import { isLgScreenSize } from "../../utils";
+
 export default {
   data() {
     return {
@@ -25,10 +27,23 @@ export default {
     }
   },
   methods: {
-    handleClick() {
+    onMouseEnter() {
+      if (isLgScreenSize()) {
+        this.$data.show = true;
+      }
+    },
+    onMouseLeave() {
+      if (isLgScreenSize()) {
+        this.$data.show = false;
+      }
+    },
+    handleClick(evt) {
+      // On mobile screens, first click should just toggle and redir on second one
+      if (isLgScreenSize() || this.$data.show) {
         if (this.$props.href) {
           window.location = this.$props.href;
         }
+      }
 
       this.$data.show = !this.$data.show;
     }

source/js/components/navbar/NavbarSubitemReplacing.vue

+<template>
+  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
+    <a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
+    <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
+      <ul class="navbar-menu__submenu">
+        <li v-for="(item, index) in parsedItems" :key="index">
+            <a :href="item[1]" class="navbar-menu__link">{{ item[0] }}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isLgScreenSize } from "../../utils";
+
+export default {
+  data() {
+    return {
+      show: false,
+      parsedItems: JSON.parse(this.items),
+    };
+  },
+  props: {
+    href: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    items: {
+      type: String,
+    }
+  },
+  methods: {
+    onMouseEnter() {
+      if (isLgScreenSize()) {
+        this.$data.show = true;
+      }
+    },
+    onMouseLeave() {
+      if (isLgScreenSize()) {
+        this.$data.show = false;
+      }
+    },
+    handleClick(evt) {
+      // On mobile screens, first click should just toggle and redir on second one
+      if (isLgScreenSize() || this.$data.show) {
+        if (this.$props.href) {
+          window.location = this.$props.href;
+        }
+      }
+
+      this.$data.show = !this.$data.show;
+    }
+  }
+}
+</script>

source/js/main.js

@@ -4,17 +4,23 @@ import { forEachNode } from "./utils";
 
 import Renderer from "./components/calendar/Renderer";
 import DummyProvider from "./components/calendar/DummyProvider";
-import GoogleProvider from "./components/calendar/GoogleProvider";
+import GoogleProvider from "./components/calendar/GoogleProvider"
+import MonthCalendar from "./components/full-calendar/MonthCalendar";
+import YearCalendar from "./components/full-calendar/YearCalendar";
 import RegionMap from "./components/RegionMap";
 import ViewProvider from "./components/ViewProvider";
 import Navbar from "./components/navbar/Navbar";
 import FooterCollapsible from "./components/footer/FooterCollapsible";
 import FlipClock from "./components/FlipClock";
 
+import Chart from 'chart.js/auto';
+
 
 Vue.component("ui-calendar-renderer", Renderer);
 Vue.component("ui-calendar-dummy-provider", DummyProvider);
 Vue.component("ui-calendar-google-provider", GoogleProvider);
+Vue.component("ui-month-calendar", MonthCalendar);
+Vue.component("ui-year-calendar", YearCalendar);
 Vue.component("ui-region-map", RegionMap);
 Vue.component("ui-view-provider", ViewProvider);
 Vue.component("ui-navbar", Navbar);
@@ -51,9 +57,41 @@ function renderVueAppElement(el) {
 }
 
 
+function renderChart(element) {
+  const data = [
+    { year: 2010, count: 10 },
+    { year: 2011, count: 20 },
+    { year: 2012, count: 15 },
+    { year: 2013, count: 25 },
+    { year: 2014, count: 22 },
+    { year: 2015, count: 30 },
+    { year: 2016, count: 28 },
+  ];
+
+  new Chart(
+    element,
+    {
+      type: 'bar',
+      data: {
+        labels: data.map(row => row.year),
+        datasets: [
+          {
+            label: 'Firemní akvizice každý rok',
+            data: data.map(row => row.count)
+          }
+        ]
+      }
+    }
+  );
+}
+
+
 function init(event) {
   // Initialize Vue.js apps.
   forEachNode(document.querySelectorAll('.__js-root'), renderVueAppElement)
+
+  // Show example charts.
+  forEachNode(document.querySelectorAll('.__chart-example'), renderChart);
 }
 
 document.addEventListener('DOMContentLoaded', init);

source/js/utils.js

+import screens from "../../screens";
+
+const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
+
 export const forEachNode = function (array, callback, scope) {
   for (var i = 0; i < array.length; i++) {
     callback.call(scope, array[i]); // passes back stuff we need
   }
 };
+
+export function getWindowWidth() {
+  return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+}
+
+export function isLgScreenSize() {
+  return getWindowWidth() >= lgScreenSize;
+}

tailwind-plugins/buttons.js

@@ -59,6 +59,10 @@ module.exports = function (options) {
           maxWidth: theme('maxWidth.xs'),
           textDecoration: 'none',
         },
+        '.btn[disabled]': {
+          opacity: '0.7',
+          cursor: 'not-allowed',
+        },
         '.btn:hover': {
           textDecoration: 'none',
         },
@@ -106,6 +110,46 @@ module.exports = function (options) {
         '.btn--condensed .btn__body': {
           padding: '.75em 1em',
         },
+        '@keyframes btn-loading-spinner': {
+          'to': {
+            transform: 'rotate(360deg)',
+          }
+        },
+        '.btn--loading': {
+          position: 'relative',
+        },
+        '.btn--loading::before': {
+          pointerEvents: 'none',
+          content: "''",
+          position: 'absolute',
+          left: '0',
+          right: '0',
+          top: '0',
+          bottom: '0',
+          zIndex: '2',
+          backgroundColor: theme('colors.black'),
+          opacity: '0.4',
+        },
+        '.btn--loading::after': {
+          pointerEvents: 'none',
+          content: "''",
+          position: 'absolute',
+          left: '0',
+          right: '0',
+          top: '0',
+          bottom: '0',
+          zIndex: '3',
+          top: '50%',
+          left: '50%',
+          width: '1.5rem',
+          height: '1.5rem',
+          marginTop: '-0.75rem',
+          marginLeft: '-0.75rem',
+          borderRadius: '50%',
+          border: `3px solid ${theme('colors.cyan.200')}`,
+          borderLeftColor: 'transparent',
+          animation: 'btn-loading-spinner 1s linear infinite',
+        }
       },
       ..._.map(options.colors, (colorOptions, name) => {
         const bg = getThemeColor(colorOptions.background, '#000');

tailwind.config.js

@@ -6,11 +6,66 @@ const lighen = (clr, val) => Color(clr).lighten(val).rgb().string();
 const darken = (clr, val) => Color(clr).darken(val).rgb().string();
 
 module.exports = {
+  content: [
+    "./source/**/*.mustache",
+    "./source/**/*.json",
+    "./source/**/*.js",
+    "./source/**/*.vue",
+    "./public/**/*.html",
+  ],
+  options: {
+    whitelistPatterns: [
+      /^((sm|md|lg|xl)\:)?(block|inline|fixed|absolute|inline-block|flex|inline-flex|grid)/,
+      /^((sm|md|lg|xl)\:)?w-\d\d?/,
+      /^((sm|md|lg|xl)\:)?w-(auto|full|screen)/,
+      /^((sm|md|lg|xl)\:)?h-\d\d?/,
+      /^((sm|md|lg|xl)\:)?h-screen/,
+      /^((sm|md|lg|xl)\:)?-?m.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?-?m.?-auto?/,
+      /^((sm|md|lg|xl)\:)?p.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?space-.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?hidden/,
+      /^((sm|md|lg|xl)\:)?block/,
+      /^((sm|md|lg|xl)\:)?inline-block/,
+      /^((sm|md|lg|xl)\:)?flex/,
+      /^((sm|md|lg|xl)\:)?inline-flex/,
+      /^((sm|md|lg|xl)\:)?grid/,
+      /^((sm|md|lg|xl)\:)?gap-\d\d?/,
+      /^((sm|md|lg|xl)\:)?static/,
+      /^((sm|md|lg|xl)\:)?flex-row-*/,
+      /^((sm|md|lg|xl)\:)?flex-col-*/,
+      /^((sm|md|lg|xl)\:)?grid-cols-*/,
+      /^((sm|md|lg|xl)\:)?col-span-*/,
+      /^((sm|md|lg|xl)\:)?row-span-*/,
+      /^((sm|md|lg|xl)\:)?order-*/,
+      /^((sm|md|lg|xl)\:)?items-*/,
+      /^((sm|md|lg|xl)\:)?float-*/,
+      /^((sm|md|lg|xl|hover)\:)?text-*/,
+      /^((sm|md|lg|xl)\:)?grid-flow-*/,
+      /^((sm|md|lg|xl)\:)?head-*/,
+      /^((sm|md|lg|xl)\:)?clearfix/,
+      /^((sm|md|lg|xl|hover)\:)?elevation-*/,
+      /^((sm|md|lg|xl|hover)\:)?border(-.*)?/,
+      /^((sm|md|lg|xl|hover)\:)?bg-opacity-\d\d?/,
+      /whitespace-*/,
+      /opacity-*/,
+      /^truncate/,
+      /^break-*/,
+      /^overflow-*/,
+      /^duration-*/,
+      /^max-w-*/,
+      /^max-h-*/,
+      /ico--*/,
+    ],
+  },
   theme: {
     extend: {
       maxWidth: {
         'xxs': '16rem',
       },
+      height: {
+        '120': '30rem',
+      },
       opacity: {
         '85': '0.85',
       },
@@ -19,12 +74,17 @@ module.exports = {
       },
       spacing: {
         '0/5': '0.125rem',
+        '14': '3.5rem',
         '28': '7rem',
         '36': '9rem',
         '44': '11rem',
         '52': '13rem',
-        '80': '20rem'
-      }
+        '80': '20rem',
+      },
+      // flip-x
+      scale: {
+        '-1': '-1',
+      },
     },
     // Breakpoints
     screens,
@@ -60,6 +120,7 @@ module.exports = {
       'black': '#000000',
       'white': '#ffffff',
       'grey': {
+        '25': '#fafafa',
         '50': '#f7f7f7',
         '100': '#f3f3f3',
         '125': '#f0f0f0',
@@ -71,10 +132,22 @@ module.exports = {
         '700': '#202020',
         '800': '#1f1f1f',
       },
+      'olive': {
+        '100': '#d6e8b3'
+      },
       'green': {
-        '100': '#d6e8b3',
         '200': '#92c6ab',
-        '300': darken('#92c6ab', 0.1),
+        '300': '#76cc9f',
+        '400': '#4ca971',
+      },
+      'yellow': {
+        '100': '#fff7bf',
+        '200': '#f7f38a',
+        '300': '#ffea5a',
+        '400': '#fde119',
+      },
+      'red': {
+        '600': '#d60d53'
       },
       'brands': {
         'facebook': '#067ceb',
@@ -106,6 +179,9 @@ module.exports = {
         '400': '#840048',
         '500': '#670047',
       },
+      'pirati': {
+        'yellow': '#fec934'
+      },
     },
     container: {
       center: true,
@@ -137,7 +213,7 @@ module.exports = {
         // options
       }
     ),
-    require('tailwindcss-typography')({
+    require('@tailwindcss/typography')({
       // all these options default to the values specified here
       ellipsis: false,         // whether to generate ellipsis utilities
       hyphens: false,          // whether to generate hyphenation utilities
@@ -179,11 +255,13 @@ module.exports = {
         'grey-125': {
           text: 'black',
           background: 'grey.125',
+          hoverText: 'black',
         },
         'white': {
           text: 'black',
           background: 'white',
           iconBorder: 'grey.100',
+          hoverText: 'black',
         },
         'blue-300': {
           text: 'white',
@@ -193,9 +271,13 @@ module.exports = {
           text: 'white',
           background: 'cyan.200',
         },
-        'green-200': {
+        'green-300': {
+          text: 'white',
+          background: 'green.300',
+        },
+        'green-400': {
           text: 'white',
-          background: 'green.200',
+          background: 'green.400',
         },
         'orange-300': {
           text: 'white',
@@ -209,6 +291,10 @@ module.exports = {
           text: 'white',
           background: 'violet.500',
         },
+        'red-600': {
+          text: 'white',
+          background: 'red.600',
+        },
         'brands-facebook': {
           text: 'white',
           background: 'brands.facebook',