// Plugin Definition
let Vindue = {
install (vue, options) {
Vue.component('window', {
props: [
'top',
'left',
'component',
'key-val',
'vindue-state'
],
data () {
return {
title: '',
resizable: false,
helpText: '',
style: {
top: 0,
left: 0,
'min-width': '150px',
'min-height': '100px',
width: 'auto',
height: 'auto',
'z-index': 1,
'user-select': 'auto'
}
}
},
render (h) {
let comps = []
// Resizable Borders
const border = (c, ...on) =>
h('div', {
style: { display: this.resizable ? 'block' : 'none' },
'class': { border: true, [c]: true },
on: { mousedown: (e) => on.forEach(f => f(e)) }
})
comps.push(border('top', this.resizeTop))
comps.push(border('right', this.resizeRight))
comps.push(border('bottom', this.resizeBottom))
comps.push(border('left', this.resizeLeft))
comps.push(border('top-right', this.resizeTop, this.resizeRight))
comps.push(border('bottom-right', this.resizeBottom, this.resizeRight))
comps.push(border('bottom-left', this.resizeBottom, this.resizeLeft))
comps.push(border('top-left', this.resizeTop, this.resizeLeft))
// Window Actions
let buttons = []
// Help Button
buttons.push(h('button', {
style: { display: this.helpText && this.helpText.length > 0 ? 'block' : 'none' },
on: {
click: e => {
e.stopPropagation()
this.help()
}
}
}, [
h('i', { 'class': { fa: true, 'fa-fw': true, 'fa-question': true } })
]))
// Close Button
buttons.push(h('button', {
on: {
click: e => {
e.stopPropagation()
this.close()
}
}
}, [
h('i', { 'class': { fa: true, 'fa-fw': true, 'fa-times': true } })
]))
// Title
comps.push(h('div', {
'class': { title: true },
on: {
mousedown: e => {
if (e.target !== e.currentTarget) return
this.startDrag(e)
}
}
}, [this.title, h('div', { 'class': { actions: true } }, buttons)]))
// Content
let dynamic = h(this.component, {
tag: 'component',
props: {
styleObj: this.style,
vindueState: this.vindueState
},
on: {
'update:title': val => { this.title = val },
'update:resizable': val => { this.resizable = val },
'update:help-text': val => { this.helpText = val },
'update:style-obj': val => { this.style = val },
'update:vindue-state': val => { this.vindueState = val }
},
ref: 'child'
})
// Content Container
comps.push(h('div', { 'class': { content: true } }, [dynamic]))
// Window
return h('div', {
'class': { window: true },
style: this.style,
on: { mousedown: e => { this.focusWindow() } }
}, comps)
},
methods: {
focusWindow () {
this.$parent.focusWindow(this.keyVal)
},
startDrag (e) {
let el = this.$el
let style = this.style
let startX = el.offsetLeft
let startY = el.offsetTop
let initialMouseX = e.clientX
let initialMouseY = e.clientY
function mouseMove (e) {
let dx = e.clientX - initialMouseX
let dy = e.clientY - initialMouseY
style.top = startY + dy + 'px'
style.left = startX + dx + 'px'
}
function mouseUp () {
document.removeEventListener('mousemove', mouseMove)
document.removeEventListener('mouseup', mouseUp)
if (parseInt(style.left) < 0) {
style.left = 0
} else if (parseInt(style.left) + el.offsetWidth > window.innerWidth) {
style.left = `${window.innerWidth - el.offsetWidth}px`
}
if (parseInt(style.top) < 0) {
style.top = 0
} else if (parseInt(style.top) + el.offsetHeight + 38 > window.innerHeight) {
style.top = `${window.innerHeight - el.offsetHeight - 38}px`
}
}
document.addEventListener('mousemove', mouseMove)
document.addEventListener('mouseup', mouseUp)
},
help () {
this.$parent.help(this.helpText)
},
close () {
this.$parent.close(this.keyVal)
},
resizeTop (e) {
this.style['user-select'] = 'none'
let el = this.$el
let style = this.style
let startY = el.offsetTop
let startH = parseInt(style.height)
let initialMouseY = e.clientY
function mouseMove (e) {
let dy = e.clientY - initialMouseY
if (startH - dy >= parseInt(style['min-height'])) {
style.height = startH - dy + 'px'
style.top = startY + dy + 'px'
}
}
function mouseUp () {
document.removeEventListener('mousemove', mouseMove)
document.removeEventListener('mouseup', mouseUp)
if (parseInt(style.top) < 0) {
style.height = parseInt(style.height) + parseInt(style.top) + 'px'
style.top = 0
}
style['user-select'] = 'auto'
}
document.addEventListener('mousemove', mouseMove)
document.addEventListener('mouseup', mouseUp)
},
resizeRight (e) {
this.style['user-select'] = 'none'
let el = this.$el
let style = this.style
let startX = el.offsetLeft
let startW = parseInt(style.width)
let initialMouseX = e.clientX
function mouseMove (e) {
let dx = e.clientX - initialMouseX
if (startW + dx >= parseInt(style['min-width'])) {
style.width = startW + dx + 'px'
}
}
function mouseUp () {
document.removeEventListener('mousemove', mouseMove)
document.removeEventListener('mouseup', mouseUp)
style['user-select'] = 'auto'
if (startX + parseInt(style.width) > window.innerWidth) {
style.width = window.innerWidth - startX + 'px'
}
}
document.addEventListener('mousemove', mouseMove)
document.addEventListener('mouseup', mouseUp)
},
resizeBottom (e) {
this.style['user-select'] = 'none'
let el = this.$el
let style = this.style
let startY = el.offsetTop
let startH = parseInt(style.height)
let initialMouseY = e.clientY
function mouseMove (e) {
let dy = e.clientY - initialMouseY
if (startH + dy >= parseInt(style['min-height'])) {
style.height = startH + dy + 'px'
}
}
function mouseUp () {
document.removeEventListener('mousemove', mouseMove)
document.removeEventListener('mouseup', mouseUp)
if (startY + parseInt(style.height) + 38 > window.innerHeight) {
style.height = window.innerHeight - startY - 38 + 'px'
}
style['user-select'] = 'auto'
}
document.addEventListener('mousemove', mouseMove)
document.addEventListener('mouseup', mouseUp)
},
resizeLeft (e) {
this.style['user-select'] = 'none'
let el = this.$el
let style = this.style
let startX = el.offsetLeft
let startW = parseInt(style.width)
let initialMouseX = e.clientX
function mouseMove (e) {
let dx = e.clientX - initialMouseX
if (startW - dx >= parseInt(style['min-width'])) {
style.width = startW - dx + 'px'
style.left = startX + dx + 'px'
}
}
function mouseUp () {
document.removeEventListener('mousemove', mouseMove)
document.removeEventListener('mouseup', mouseUp)
if (parseInt(style.left) < 0) {
style.width = parseInt(style.width) + parseInt(style.left) + 'px'
style.left = 0
}
style['user-select'] = 'auto'
}
document.addEventListener('mousemove', mouseMove)
document.addEventListener('mouseup', mouseUp)
}
},
mounted () {
this.title = this.$refs.child.title
this.resizable = this.$refs.child.resizable
this.helpText = this.$refs.child.helpText
this.style.top = this.top + 'px'
this.style.left = this.left + 'px'
this.$nextTick(function () {
this.style.width = this.$el.offsetWidth + 1 + 'px'
this.style.height = this.$el.offsetHeight + 1 + 'px'
})
this.style['z-index'] = this.keyVal
}
})
Vue.component('taskbar', {
template: '#taskbar',
props: [
'windows',
'focus',
'timeCode'
],
data () {
return {
startMenuOpen: false,
now: new Date()
}
},
created () {
setInterval(() => this.now = new Date, 1000)
},
methods: {
toggleStartMenu () {
this.startMenuOpen = !this.startMenuOpen
},
closeStartMenu () {
this.startMenuOpen = false
},
open (name) {
this.$emit('open', name)
},
focusWindow (w) {
this.$emit('focus-window', w)
}
}
})
Vue.component('window-manager', {
template: '#windowManager',
data () {
return {
focus: null,
windows: [],
start: {
top: 0,
left: 0
},
state: {
timeCode: 'h:mm A',
style: {
'background-color': '#1C1F2B'
}
},
mousedown: []
}
},
methods: {
open (w) {
this.focus = this.windows.length
this.windows.push(w)
this.start.top += 15
this.start.left += 15
},
close (key) {
this.windows.splice(key, 1)
this.$nextTick(function () {
let max = null
for (let k in this.$refs) {
let r = this.$refs[k][0]
if (r && (!max || (max.style['z-index'] < r.style['z-index']))) {
max = r
}
}
this.focus = max ? max.keyVal : null
})
},
help (text) {
this.open('help')
this.$nextTick(function () {
this.$refs['key-' + this.focus][0].$refs.child.text = text
})
},
focusWindow (key) {
this.focus = key
let ref = this.$refs['key-' + key][0]
for (let k in this.$refs) {
let r = this.$refs[k][0]
if (r && r.style['z-index'] >= ref.style['z-index']) {
r.style['z-index'] = parseInt(r.style['z-index']) - 1
}
}
ref.style['z-index'] = this.windows.length
},
onTouch (e) {
if (e.target.tagName === 'SELECT')
return true
e.preventDefault()
if (e.touches.length > 1 || (e.type == 'touchend' && e.touches.length > 0))
return
let type = null
let touch = e.changedTouches[0]
switch (e.type) {
case 'touchstart':
type = 'mousedown'
this.mousedown.push(e.target)
break
case 'touchmove':
type = 'mousemove'
break
case 'touchend':
type = 'mouseup'
break
}
if (type === 'mouseup') {
if (this.mousedown.includes(e.target)) {
this.mousedown.splice(this.mousedown.indexOf(e.target), 1)
e.target.dispatchEvent(new MouseEvent('click', {
screenX: touch.screenX,
screenY: touch.screenY,
clientX: touch.clientX,
clientY: touch.clientY,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
altKey: e.altKey,
metaKey: e.metaKey,
button: 0,
bubbles: true,
cancelable: true
}))
}
}
e.target.dispatchEvent(new MouseEvent(type, {
screenX: touch.screenX,
screenY: touch.screenY,
clientX: touch.clientX,
clientY: touch.clientY,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
altKey: e.altKey,
metaKey: e.metaKey,
button: 0,
bubbles: true,
cancelable: true
}))
}
}
})
Vue.component('help', {
template: '#help',
props: {
'style-obj': Object
},
data () {
return {
title: 'Help',
text: "Welcome to Vindue 98, the world's most advanced operating system."
}
},
mounted () {
Object.assign(this.styleObj, this.style, {
'width': '250px'
})
}
})
}
}
Vue.use(Vindue)
// Component Definitions
Vue.component('tab-control', {
template: '#tabControl',
data () {
return {
panes: [],
focus: ''
}
},
mounted () {
this.focus = Object.keys(this.$slots)[0]
},
methods: {
focusTab (key) {
this.focus = key
}
}
})
Vue.component('settings', {
template: '#settings',
props: {
title: { default: 'Settings' },
resizable: { default: true },
'help-text': { default: 'Change system settings' },
'style-obj': Object,
'vindue-state': Object
},
data () {
return {
color: '#1C1F2B',
hoursEnabled: true,
hours: 'h',
minutesEnabled: true,
minutes: 'mm',
secondsEnabled: false,
seconds: 'ss',
monthEnabled: false,
month: 'M',
dayEnabled: false,
day: 'D',
yearEnabled: false,
year: 'YYYY'
}
},
methods: {
changeBackground () {
this.vindueState.style['background-color'] = this.color
},
changeTime () {
let timeCode = ''
if (this.hoursEnabled)
timeCode += this.hours
if (this.hoursEnabled && this.minutesEnabled)
timeCode += ':'
if (this.minutesEnabled)
timeCode += this.minutes
if (this.minutesEnabled && this.secondsEnabled)
timeCode += ':'
if (this.secondsEnabled)
timeCode += this.seconds
if (this.hours === 'h')
timeCode += ' A'
if (timeCode.length > 0 && (this.monthEnabled || this.dayEnabled || this.yearEnabled))
timeCode += ' '
if (this.monthEnabled)
timeCode += this.month
if (this.monthEnabled && this.dayEnabled)
timeCode += '/'
if (this.dayEnabled)
timeCode += this.day
if (this.dayEnabled && this.yearEnabled)
timeCode += '/'
if (this.yearEnabled)
timeCode += this.year
this.vindueState.timeCode = timeCode
}
},
mounted () {
Object.assign(this.styleObj, this.style, {
'min-width': '250px',
'min-height': '250px'
})
this.color = this.vindueState.style['background-color']
}
})
// Point of entry
new Vue({
el: '#app'
})
!
