Skip to content
Snippets Groups Projects
Commit ffde5226 authored by xaralis's avatar xaralis
Browse files

Simplify JS, hook up remaning parts

parent 68c6b41f
No related branches found
No related tags found
No related merge requests found
Showing
with 301 additions and 91 deletions
import Vue from 'vue';
import UiSubnav from './Subnav.vue';
const appFactory = (el, attrs) => {
// Bootstrap Vue.js.
new Vue({el, components: { UiSubnav }});
};
export default appFactory;
import Vue from 'vue';
import UiViewProvider from '../../components/ViewProvider.vue';
const appFactory = (el, attrs) => {
// Bootstrap Vue.js.
new Vue({el, components: { UiViewProvider }});
};
export default appFactory;
......@@ -2,13 +2,13 @@
<div class="flip-clock">
<template v-for="data in timeData" v-show="show">
<span v-bind:key="data.label" class="flip-clock__piece" :id="data.elementId" v-show="data.show">
<span :class="['flip-clock__card', 'flip-card', clockclasses ]">
<span :class="['flip-clock__card', 'flip-card', clockClasses ]">
<b class="flip-card__top">{{ data.current | twoDigits }}</b>
<b class="flip-card__bottom" v-bind:data-value="data.current | twoDigits"></b>
<b class="flip-card__back" v-bind:data-value="data.previous | twoDigits"></b>
<b class="flip-card__back-bottom" v-bind:data-value="data.previous | twoDigits"></b>
</span>
<span :class="['flip-clock__slot', 'font-alt', slotclasses]">{{ data.label }}</span>
<span :class="['flip-clock__slot', 'font-alt', slotClasses]">{{ data.label }}</span>
</span>
</template>
</div>
......@@ -16,7 +16,7 @@
<script>
import Vue from "vue";
import { forEachNode } from "../../utils";
import { forEachNode } from "../utils";
export default {
name: 'flipCountdown',
......@@ -31,11 +31,11 @@ export default {
type: String,
default: 'days,hours,minutes,seconds'
},
clockclasses: {
clockClasses: {
type: String,
default: 'text-6xl'
},
slotclasses: {
slotClasses: {
type: String,
default: 'text-3xl'
}
......
......@@ -4,7 +4,7 @@
<h1 class="head-alt-sm mb-2">Vyberte kraj</h1>
<ul class="region-map__list leading-loose whitespace-no-wrap text-sm">
<li v-for="region in regions" :key="region.id">
<a href="#" @mouseover="current = region" @mouseout="current = null">{{ region.name }}</a>
<a href="#" @click="selectRegion(region)" @mouseover="current = region" @mouseout="current = null">{{ region.name }}</a>
</li>
</ul>
</div>
......@@ -17,7 +17,7 @@
viewBox="0 75 800 450"
>
<g>
<a xlink:href="#" v-for="region in regions" :key="region.id" @mouseover="current = region" @mouseout="current = null">
<a xlink:href="#" v-for="region in regions" :key="region.id" @mouseover="current = region" @mouseout="current = null" @click="selectRegion(region)">
<path
:class="{'region-map__region': true, 'region-map__region--current': current === region}"
:d="region.polygon"
......@@ -34,7 +34,33 @@ import Vue from "vue";
export default {
props: {
links: {
type: Object,
default: function () {
return {
"praha": "https://praha.pirati.cz",
"stredocesky": "https://stredocesky.pirati.cz",
"jihocesky": "https://jihocesky.pirati.cz",
"plzensky": "https://plzensky.pirati.cz",
"karlovarsky": "https://karlovarsky.pirati.cz",
"ustecky": "https://ustecky.pirati.cz",
"liberecky": "https://liberecky.pirati.cz",
"kralovehradecky": "https://kralovehradecky.pirati.cz",
"moravskoslezsky": "https://moravskoslezsky.pirati.cz",
"pardubicky": "https://pardubicky.pirati.cz",
"vysocina": "https://vysocina.pirati.cz",
"jihomoravsky": "https://jihomoravsky.pirati.cz",
"olomoucky": "https://olomoucky.pirati.cz",
"zlinsky": "https://zlinsky.pirati.cz"
};
}
}
},
methods: {
selectRegion(region) {
const href = this.$props.links[region.id];
window.location.href = href;
}
},
data() {
return {
......
File moved
<script>
export default {
mounted() {
console.log(`Mounted generic Vue app in ` , this.$el);
}
}
</script>
<script>
const initialEvents = [
{
id: 2,
start: new Date("2020-07-08T10:00:00.000Z"),
startDateVerbose: "středa 8. července 2020",
startTimeVerbose: "12:00",
allDay: false,
end: new Date("2020-07-08T11:00:00.000Z"),
title: "Pirátský oběd - Chrudim",
description:
"Pravidelné setkání pirátů při středečním obědě. Nejen o politice a s chutí.",
link:
"https://www.google.com/calendar/event?eid=Mmw1Y2RwMTByYm80Y204cWxsaW1maWJmcTJfMjAyMDA3MDhUMTAwMDAwWiA3cjY3M3JsaDI1NW9mb3JodjNvZWIybDBnMEBn"
},
{
id: 15,
start: new Date("2020-07-13T19:00:00.000Z"),
startDateVerbose: "pondělí 13. července 2020",
startTimeVerbose: "21:00",
allDay: false,
end: new Date("2020-07-13T19:30:00.000Z"),
title: "Mumble - předsednictvo",
link:
"https://www.google.com/calendar/event?eid=YzVpM2FvaGc2MHAzY2I5aGM1aW1jYjlrNjBvbThiYjE2dGk2NGI5ajY4cjY0ZGhrNzVnamdjOWdjb18yMDIwMDcxM1QxOTAwMDBaIDdyNjczcmxoMjU1b2Zvcmh2M29lYjJsMGcwQGc"
},
{
id: 3,
start: new Date("2020-07-15T10:00:00.000Z"),
startDateVerbose: "středa 15. července 2020",
startTimeVerbose: "12:00",
allDay: false,
end: new Date("2020-07-15T11:00:00.000Z"),
title: "Pirátský oběd - Chrudim",
description:
"Pravidelné setkání pirátů při středečním obědě. Nejen o politice a s chutí.",
link:
"https://www.google.com/calendar/event?eid=Mmw1Y2RwMTByYm80Y204cWxsaW1maWJmcTJfMjAyMDA3MTVUMTAwMDAwWiA3cjY3M3JsaDI1NW9mb3JodjNvZWIybDBnMEBn",
mapLink: "https://maps.google.com"
},
{
id: 16,
start: new Date("2020-07-20T19:00:00.000Z"),
startDateVerbose: "pondělí 20. července 2020",
startTimeVerbose: "21:00",
allDay: false,
end: new Date("2020-07-20T19:30:00.000Z"),
title: "Mumble - předsednictvo",
link:
"https://www.google.com/calendar/event?eid=YzVpM2FvaGc2MHAzY2I5aGM1aW1jYjlrNjBvbThiYjE2dGk2NGI5ajY4cjY0ZGhrNzVnamdjOWdjb18yMDIwMDcyMFQxOTAwMDBaIDdyNjczcmxoMjU1b2Zvcmh2M29lYjJsMGcwQGc"
},
{
id: 4,
start: new Date("2020-07-22T10:00:00.000Z"),
startDateVerbose: "středa 22. července 2020",
startTimeVerbose: "12:00",
allDay: false,
end: new Date("2020-07-22T11:00:00.000Z"),
title: "Pirátský oběd - Chrudim",
description:
"Pravidelné setkání pirátů při středečním obědě. Nejen o politice a s chutí.",
link:
"https://www.google.com/calendar/event?eid=Mmw1Y2RwMTByYm80Y204cWxsaW1maWJmcTJfMjAyMDA3MjJUMTAwMDAwWiA3cjY3M3JsaDI1NW9mb3JodjNvZWIybDBnMEBn"
},
{
id: 17,
start: new Date("2020-07-27T19:00:00.000Z"),
startDateVerbose: "pondělí 27. července 2020",
startTimeVerbose: "21:00",
allDay: false,
end: new Date("2020-07-27T19:30:00.000Z"),
title: "Mumble - předsednictvo",
link:
"https://www.google.com/calendar/event?eid=YzVpM2FvaGc2MHAzY2I5aGM1aW1jYjlrNjBvbThiYjE2dGk2NGI5ajY4cjY0ZGhrNzVnamdjOWdjb18yMDIwMDcyN1QxOTAwMDBaIDdyNjczcmxoMjU1b2Zvcmh2M29lYjJsMGcwQGc"
},
{
id: 5,
start: new Date("2020-07-29T10:00:00.000Z"),
startDateVerbose: "středa 29. července 2020",
startTimeVerbose: "12:00",
allDay: false,
end: new Date("2020-07-29T11:00:00.000Z"),
title: "Pirátský oběd - Chrudim",
description:
"Pravidelné setkání pirátů při středečním obědě. Nejen o politice a s chutí.",
link:
"https://www.google.com/calendar/event?eid=Mmw1Y2RwMTByYm80Y204cWxsaW1maWJmcTJfMjAyMDA3MjlUMTAwMDAwWiA3cjY3M3JsaDI1NW9mb3JodjNvZWIybDBnMEBn"
},
{
id: 18,
start: new Date("2020-08-03T19:00:00.000Z"),
startDateVerbose: "pondělí 3. srpna 2020",
startTimeVerbose: "21:00",
allDay: false,
end: new Date("2020-08-03T19:30:00.000Z"),
title: "Mumble - předsednictvo",
link:
"https://www.google.com/calendar/event?eid=YzVpM2FvaGc2MHAzY2I5aGM1aW1jYjlrNjBvbThiYjE2dGk2NGI5ajY4cjY0ZGhrNzVnamdjOWdjb18yMDIwMDgwM1QxOTAwMDBaIDdyNjczcmxoMjU1b2Zvcmh2M29lYjJsMGcwQGc"
},
{
id: 6,
start: new Date("2020-08-05T10:00:00.000Z"),
startDateVerbose: "středa 5. srpna 2020",
startTimeVerbose: "12:00",
allDay: false,
end: new Date("2020-08-05T11:00:00.000Z"),
title: "Pirátský oběd - Chrudim",
description:
"Pravidelné setkání pirátů při středečním obědě. Nejen o politice a s chutí.",
link:
"https://www.google.com/calendar/event?eid=Mmw1Y2RwMTByYm80Y204cWxsaW1maWJmcTJfMjAyMDA4MDVUMTAwMDAwWiA3cjY3M3JsaDI1NW9mb3JodjNvZWIybDBnMEBn"
}
];
const moreEvents = [
{
id: 19,
start: new Date("2020-08-10T19:00:00.000Z"),
startDateVerbose: "pondělí 10. srpna 2020",
startTimeVerbose: "21:00",
allDay: false,
end: new Date("2020-08-10T19:30:00.000Z"),
title: "Mumble - předsednictvo",
link:
"https://www.google.com/calendar/event?eid=YzVpM2FvaGc2MHAzY2I5aGM1aW1jYjlrNjBvbThiYjE2dGk2NGI5ajY4cjY0ZGhrNzVnamdjOWdjb18yMDIwMDgxMFQxOTAwMDBaIDdyNjczcmxoMjU1b2Zvcmh2M29lYjJsMGcwQGc"
},
{
id: 7,
start: new Date("2020-08-12T10:00:00.000Z"),
startDateVerbose: "středa 12. srpna 2020",
startTimeVerbose: "12:00",
allDay: false,
end: new Date("2020-08-12T11:00:00.000Z"),
title: "Pirátský oběd - Chrudim",
description:
"Pravidelné setkání pirátů při středečním obědě. Nejen o politice a s chutí.",
link:
"https://www.google.com/calendar/event?eid=Mmw1Y2RwMTByYm80Y204cWxsaW1maWJmcTJfMjAyMDA4MTJUMTAwMDAwWiA3cjY3M3JsaDI1NW9mb3JodjNvZWIybDBnMEBn"
}
];
export default {
data: () => ({
events: initialEvents,
hasMore: true,
}),
methods: {
onShowMore() {
this.$data.events = [...initialEvents, ...moreEvents];
this.$data.hasMore = false;
}
},
render() {
return this.$scopedSlots.default({
events: this.events,
hasMore: this.hasMore,
onShowMore: this.onShowMore,
});
}
};
</script>
<template>
<div class="calendar grid grid-cols-4">
<div class="col-span-4 xl:col-span-1">
<aside class="banner bg-orange-300 text-white h-full">
<i class="ico--calendar banner__icon"></i>
<div class="banner__body">
<h1 class="head-alt-md banner__cta">{{ name }}</h1>
<button class="btn btn--white btn--fullwidth sm:btn--autowidth mt-8" v-if="onShowMore && hasMore" @click="onShowMore()">
<div class="btn__body">Zobrazit další</div>
</button>
</div>
</aside>
</div>
<div class="col-span-4 xl:col-span-3">
<div class="grid grid-cols-12 items-center calendar-table-row" v-for="event in events" v-bind:key="event.id">
<div class="col-span-2 text-orange-300 head-alt-md calendar-table-row__col"><span>{{ event.start | dateDay }}</span></div>
<div class="col-span-8 grid grid-cols-3 calendar-table-row__col" :class="{'calendar-table-row__col--norborder': !event.mapLink}">
<div class="col-span-3 md:col-span-1">
<strong class="block">{{ event.startDateVerbose }}</strong>
<p class="font-light text-sm mt-sm">{{ event.allDay ? "Celý den" : event.startTimeVerbose }}</p>
</div>
<div class="col-span-3 md:col-span-2 mt-4 md:mt-0">
<a v-if="event.link" v-bind:href="event.link" class="font-bold block" target="_blank" rel="noreferrer noopener">{{ event.title }}</a>
<strong v-if="!event.link" class="block">{{ event.title }}</strong>
<p class="font-light text-sm mt-sm" v-if="event.description">{{ event.description }}</p>
</div>
</div>
<div class="col-span-2 text-center font-light calendar-table-row__col">
<a :href="event.mapLink" v-if="event.mapLink" class="icon-link">
<i class="ico--location text-violet-300 mr-1" aria-hidden="true"></i>
<span>Mapa</span>
</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: "Kalendář"
},
events: {
type: Array,
required: true,
},
onShowMore: {
type: Function,
required: false,
},
hasMore: {
type: Boolean,
default: true,
}
},
filters: {
dateDay: (val) => {
return `${val.getDate()}.`;
}
}
};
</script>
import Vue from "vue";
import { forEachNode } from "./utils";
import Apps from "./apps";
import Renderer from "./components/calendar/Renderer";
import DummyProvider from "./components/calendar/DummyProvider";
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";
Vue.component("ui-calendar-renderer", Renderer);
Vue.component("ui-calendar-dummy-provider", DummyProvider);
Vue.component("ui-region-map", RegionMap);
Vue.component("ui-view-provider", ViewProvider);
Vue.component("ui-navbar", Navbar);
Vue.component("ui-footer-collapsible", FooterCollapsible);
Vue.component("ui-flip-clock", FlipClock);
import UiApp from "./components/UiApp.vue";
const appFactory = (el, attrs) => {
// Bootstrap Vue.js.
new Vue({
el,
components: {
UiApp
}
});
};
/**
* Bootstrap Vue.js application at given Element instance.
......@@ -14,20 +45,7 @@ import Apps from "./apps";
*/
function renderVueAppElement(el) {
const attrs = Object.assign({}, el.dataset);
if (! attrs.app) {
console.warn(el, 'Cannot bootstrap: missing data-app');
return;
}
const app = Apps[attrs.app];
if (! app) {
console.warn(el, `Cannot bootstrap: unknown app ${attrs.app}`);
return;
}
return app(el, attrs);
return appFactory(el, attrs);
}
......
......@@ -11,56 +11,7 @@ function defaultOptions() {
display: 'inline-block',
fontWeight: '400',
maxWidth: '20rem',
colors: {
// white: {
// background: defaultConfig.colors['white'],
// text: defaultConfig.colors['black'],
// },
// black: {
// background: defaultConfig.colors['black'],
// text: defaultConfig.colors['white'],
// },
// grey: {
// background: defaultConfig.colors['grey'],
// text: defaultConfig.colors['black'],
// },
// red: {
// background: defaultConfig.colors['red'],
// text: defaultConfig.colors['white'],
// },
// orange: {
// background: defaultConfig.colors['orange'],
// text: defaultConfig.colors['white'],
// },
// yellow: {
// background: defaultConfig.colors['yellow'],
// text: defaultConfig.colors['yellow-darkest'],
// },
// green: {
// background: defaultConfig.colors['green'],
// text: defaultConfig.colors['white'],
// },
// teal: {
// background: defaultConfig.colors['teal'],
// text: defaultConfig.colors['white'],
// },
// blue: {
// background: defaultConfig.colors['blue'],
// text: defaultConfig.colors['white'],
// },
// indigo: {
// background: defaultConfig.colors['indigo'],
// text: defaultConfig.colors['white'],
// },
// purple: {
// background: defaultConfig.colors['purple'],
// text: defaultConfig.colors['white'],
// },
// pink: {
// background: defaultConfig.colors['pink'],
// text: defaultConfig.colors['white'],
// },
},
colors: {},
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment