130 lines
2.3 KiB
JavaScript
130 lines
2.3 KiB
JavaScript
const tooltiped = {
|
|
template: `
|
|
<div class="byl-tooltiped">
|
|
<span class="byl-tooltip-text">{{ text }}</span>
|
|
<slot></slot>
|
|
</div>
|
|
`,
|
|
props: {
|
|
text: String
|
|
}
|
|
}
|
|
|
|
const hero = {
|
|
template:`
|
|
<div class="byl-hero">
|
|
<a v-bind:href="link">
|
|
<img v-bind:src="imgurl"/>
|
|
<div class="byl-hero-fader"></div>
|
|
<h4>{{ text }}</h4>
|
|
</a>
|
|
</div>
|
|
`,
|
|
props: {
|
|
link: String,
|
|
imgurl: String,
|
|
text: String
|
|
},
|
|
}
|
|
|
|
const mobilemenu = {
|
|
template: `
|
|
<nav class="byl-mobile-menu byl-mobile"
|
|
v-bind:class="{open: toggle }">
|
|
|
|
<slot></slot>
|
|
|
|
</nav>
|
|
`,
|
|
data () {
|
|
return {
|
|
|
|
}
|
|
},
|
|
props: {
|
|
toggle: Boolean
|
|
},
|
|
mounted () {
|
|
}
|
|
}
|
|
|
|
const burger = {
|
|
template: `
|
|
<div class="byl-burger-container">
|
|
<span class="byl-burger-box"
|
|
v-bind:class="{ open: toggle }"
|
|
>
|
|
|
|
<span class="byl-burger-btn">
|
|
<input class="byl-ghost-burger-checkbox"
|
|
type="checkbox"
|
|
v-model="toggle"
|
|
v-on:click="toggleBurger()">
|
|
</span>
|
|
</span>
|
|
</div>
|
|
`,
|
|
data () {
|
|
return {
|
|
toggle: false
|
|
}
|
|
},
|
|
props: {
|
|
mobileToggle: Boolean
|
|
},
|
|
mounted: function () {
|
|
this.toggle = this.mobileToggle;
|
|
},
|
|
methods: {
|
|
toggleBurger () {
|
|
this.toggle = !this.toggle;
|
|
this.mobileToggle = this.toggle;
|
|
this.$emit('toggled',this.toggle);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
export default {
|
|
install (Vue) {
|
|
Vue.mixin({
|
|
data () {
|
|
return {
|
|
mobileToggle: false,
|
|
}
|
|
},
|
|
components: { hero, burger, mobilemenu, tooltiped },
|
|
created() {
|
|
},
|
|
computed: {
|
|
},
|
|
methods: {
|
|
burgerToggle (value) {
|
|
this.mobileToggle = value;
|
|
},
|
|
isActiveTab (name) {
|
|
let t = 0;
|
|
for (t in tabs) {
|
|
let i = 0;
|
|
let items = tabs[t].tabs
|
|
for (i in items){
|
|
if (items[i].label == name) {
|
|
return items[i].selected
|
|
}
|
|
}
|
|
}
|
|
},
|
|
setMainPadding () {
|
|
if (document.querySelector(".byl-main") != null && document.querySelector(".byl-footer") != null) {
|
|
document.querySelector(".byl-main").style.paddingBottom = getComputedStyle(document.querySelector(".byl-footer")).height
|
|
}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.setMainPadding()
|
|
window.addEventListener('resize', this.setMainPadding)
|
|
}
|
|
|
|
}); } };
|
|
|