diff --git a/zero.Web.UI/App/directives/clickoutside.js b/zero.Web.UI/App/directives/clickoutside.js index 575fce19..71d5aa9b 100644 --- a/zero.Web.UI/App/directives/clickoutside.js +++ b/zero.Web.UI/App/directives/clickoutside.js @@ -1,11 +1,63 @@ +import Vue from 'vue'; + + +/// calls the passed function when a click happens outside the target element +Vue.directive('click-outside', { + bind(el, binding, vNode) + { + if (!Helpers.validate(binding)) return; + + // Define Handler and cache it on the element + function handler(e) + { + if (!vNode.context) return; + + // some components may have related popup item, on which we shall prevent the click outside event handler. + var elements = e.path || (e.composedPath && e.composedPath()); + elements && elements.length > 0 && elements.unshift(e.target); + + if (el.contains(e.target) || Helpers.isPopup(vNode.context.popupItem, elements) || !el.__vueClickOutside__) + { + return; + } + + el.__vueClickOutside__.callback(e); + } + + // add Event Listeners + el.__vueClickOutside__ = { + handler: handler, + callback: binding.value + }; + + setTimeout(() => + { + !Helpers.isServer(vNode) && document.addEventListener('click', handler); + }, 200); + }, + + update(el, binding) + { + if (Helpers.validate(binding)) + { + el.__vueClickOutside__.callback = binding.value; + } + }, + + unbind(el, binding, vNode) + { + !Helpers.isServer(vNode) && document.removeEventListener('click', el.__vueClickOutside__.handler); + delete el.__vueClickOutside__; + } +}); + var Helpers = { isServer(vNode) { - return false; - //return typeof vNode.componentInstance !== 'undefined' && vNode.componentInstance.$isServer; + return typeof vNode.componentInstance !== 'undefined' && vNode.componentInstance.$isServer; }, isPopup(popupItem, elements) @@ -47,57 +99,5 @@ var Helpers = { return true; } -}; - -/// calls the passed function when a click happens outside the target element -export default { - name: 'click-outside', - - beforeMount(el, binding, vNode) - { - if (!Helpers.validate(binding)) return; - - // Define Handler and cache it on the element - function handler(e) - { - if (!binding.instance) return; - - // some components may have related popup item, on which we shall prevent the click outside event handler. - var elements = e.path || (e.composedPath && e.composedPath()); - elements && elements.length > 0 && elements.unshift(e.target); - - if (el.contains(e.target) || Helpers.isPopup(binding.instance.popupItem, elements) || !el.__vueClickOutside__) - { - return; - } - - el.__vueClickOutside__.callback(e); - } - - // add Event Listeners - el.__vueClickOutside__ = { - handler: handler, - callback: binding.value - }; - - setTimeout(() => - { - !Helpers.isServer(vNode) && document.addEventListener('click', handler); - }, 200); - }, - - updated(el, binding) - { - if (Helpers.validate(binding)) - { - el.__vueClickOutside__.callback = binding.value; - } - }, - - unmounted(el, binding, vNode) - { - !Helpers.isServer(vNode) && document.removeEventListener('click', el.__vueClickOutside__.handler); - delete el.__vueClickOutside__; - } }; \ No newline at end of file diff --git a/zero.Web.UI/App/directives/currency.js b/zero.Web.UI/App/directives/currency.js index 0931f338..cd0712e1 100644 --- a/zero.Web.UI/App/directives/currency.js +++ b/zero.Web.UI/App/directives/currency.js @@ -1,16 +1,13 @@ +import Vue from 'vue'; import Strings from 'zero/services/strings'; /// /// Outputs a currency /// -export default { - name: 'currency', - - beforeMount(el, binding) +Vue.directive('currency', (el, binding) => +{ + if (binding.value !== binding.oldValue) { - if (binding.value !== binding.oldValue) - { - el.innerHTML = Strings.currency(binding.value); - } + el.innerHTML = Strings.currency(binding.value); } -}; \ No newline at end of file +}); \ No newline at end of file diff --git a/zero.Web.UI/App/directives/date.js b/zero.Web.UI/App/directives/date.js index 98b72226..55103c9a 100644 --- a/zero.Web.UI/App/directives/date.js +++ b/zero.Web.UI/App/directives/date.js @@ -4,8 +4,6 @@ import Strings from 'zero/services/strings'; /// Outputs a formatted date /// export default { - name: 'date', - beforeMount(el, binding) { if (binding.value !== binding.oldValue) diff --git a/zero.Web.UI/App/directives/dropdown.js b/zero.Web.UI/App/directives/dropdown.js new file mode 100644 index 00000000..d467948f --- /dev/null +++ b/zero.Web.UI/App/directives/dropdown.js @@ -0,0 +1,17 @@ +import Vue from 'vue'; + +/// +/// This directive is used to bind an element (button or link) to a dropdown +/// +Vue.directive('dropdown', { + + bind(el, binding) + { + console.info(el, binding); + }, + + update(el, binding) + { + + } +}); \ No newline at end of file diff --git a/zero.Web.UI/App/directives/filesize.js b/zero.Web.UI/App/directives/filesize.js index fed27f7c..96c0dfbf 100644 --- a/zero.Web.UI/App/directives/filesize.js +++ b/zero.Web.UI/App/directives/filesize.js @@ -1,16 +1,13 @@ +import Vue from 'vue'; import Strings from 'zero/services/strings'; /// /// Outputs a filesize /// -export default { - name: 'filesize', - - beforeMount(el, binding) +Vue.directive('filesize', (el, binding) => +{ + if (binding.value !== binding.oldValue) { - if (binding.value !== binding.oldValue) - { - el.innerText = Strings.filesize(binding.value); - } + el.innerText = Strings.filesize(binding.value); } -}; \ No newline at end of file +}); \ No newline at end of file diff --git a/zero.Web.UI/App/directives/globals.js b/zero.Web.UI/App/directives/globals.js new file mode 100644 index 00000000..f18f37a1 --- /dev/null +++ b/zero.Web.UI/App/directives/globals.js @@ -0,0 +1,9 @@ + +import './date'; +import './localize'; +import './resizable'; +import './dropdown'; +import './clickoutside'; +import './filesize'; +import './currency'; +import './sortable'; \ No newline at end of file diff --git a/zero.Web.UI/App/directives/localize.js b/zero.Web.UI/App/directives/localize.js index ff0a4d56..d1c85c36 100644 --- a/zero.Web.UI/App/directives/localize.js +++ b/zero.Web.UI/App/directives/localize.js @@ -1,41 +1,38 @@ +import Vue from 'vue'; import Localization from 'zero/services/localization'; /// /// Localizes the given property and sets the inner-text of the node to its result /// -export default { - name: 'localize', - - beforeMount(el, binding) +Vue.directive('localize', (el, binding) => +{ + if (binding.value !== binding.oldValue || !el.innerText) { - if (binding.value !== binding.oldValue || !el.innerText) + const isObject = typeof binding.value === 'object'; + let key = isObject ? binding.value.key : binding.value; + let options = isObject ? binding.value : null; + + const result = Localization.localize(key, options); + + // set content as html + if (binding.arg === 'html') { - const isObject = typeof binding.value === 'object'; - let key = isObject ? binding.value.key : binding.value; - let options = isObject ? binding.value : null; - - const result = Localization.localize(key, options); - - // set content as html - if (binding.arg === 'html') - { - el.innerHTML = result; - } - // set title - else if (binding.arg === 'title') - { - el.title = result; - } - // set attribute - else if (binding.arg) - { - el.setAttribute(binding.arg, result); - } - // set content as plain text - else - { - el.innerText = result; - } + el.innerHTML = result; + } + // set title + else if (binding.arg === 'title') + { + el.title = result; + } + // set attribute + else if (binding.arg) + { + el.setAttribute(binding.arg, result); + } + // set content as plain text + else + { + el.innerText = result; } } -}; \ No newline at end of file +}); \ No newline at end of file diff --git a/zero.Web.UI/App/directives/register.js b/zero.Web.UI/App/directives/register.js deleted file mode 100644 index b8819233..00000000 --- a/zero.Web.UI/App/directives/register.js +++ /dev/null @@ -1,30 +0,0 @@ - -//import Date from './date'; -//import Localize from './localize'; -//import Resizable from './resizable'; -//import Clickoutside from './clickoutside'; -//import Filesize from './filesize'; -//import Currency from './currency'; -//import Sortable from './sortable'; - -export default function (app) -{ - const requireComponent = require.context('.', true, /[\w-]+\.js/); - - requireComponent.keys().forEach(path => - { - let pathParts = path.split('/'); - let fileName = pathParts[pathParts.length - 1].split('.')[0]; - - if (fileName === 'register') - { - return; - } - - const componentConfig = requireComponent(path); - const config = componentConfig.default || componentConfig; - const name = config.name || fileName; - - app.directive(name, config); - }); -}; \ No newline at end of file diff --git a/zero.Web.UI/App/directives/resizable.js b/zero.Web.UI/App/directives/resizable.js index 96e79d01..b3c9bffe 100644 --- a/zero.Web.UI/App/directives/resizable.js +++ b/zero.Web.UI/App/directives/resizable.js @@ -1,3 +1,27 @@ +import Vue from 'vue'; + + + +/// resize an element +Vue.directive('resizable', { + bind(el, binding) + { + let resizable = new Resizable(el, binding.value); + resizable.listen(); + }, + + update(el, binding) + { + + }, + + unbind(el, binding) + { + + } +}); + + // object (new) that handles resizing of an element var Resizable = function (element, params) @@ -124,16 +148,4 @@ var Resizable = function (element, params) this.value = newValue; } } -}; - - -/// resize an element -export default { - name: 'resizable', - - beforeMount(el, binding) - { - let resizable = new Resizable(el, binding.value); - resizable.listen(); - } }; \ No newline at end of file diff --git a/zero.Web.UI/App/directives/sortable.js b/zero.Web.UI/App/directives/sortable.js index 2d85634e..6fdb64ee 100644 --- a/zero.Web.UI/App/directives/sortable.js +++ b/zero.Web.UI/App/directives/sortable.js @@ -1,33 +1,30 @@ +import Vue from 'vue'; import Sortable from 'sortablejs'; /// /// Enables sorting of a list /// -export default { - name: 'sortable', - - beforeMount(el, binding) +Vue.directive('sortable', (el, binding) => +{ + if (binding.value === binding.oldValue) { - if (binding.value === binding.oldValue) - { - return; - } - - let sortable = new Sortable(el, binding.value || {}); - - //if (this.arg && !this.vm.sortable) - //{ - // this.vm.sortable = {}; - //} - - //// Throw an error if the given ID is not unique - //if (this.arg && this.vm.sortable[this.arg]) - //{ - // console.warn('[vue-sortable] cannot set already defined sortable id: \'' + this.arg + '\'') - //} else if (this.arg) - //{ - // this.vm.sortable[this.arg] = sortable; - //} + return; } -}; \ No newline at end of file + + let sortable = new Sortable(el, binding.value || {}); + + //if (this.arg && !this.vm.sortable) + //{ + // this.vm.sortable = {}; + //} + + //// Throw an error if the given ID is not unique + //if (this.arg && this.vm.sortable[this.arg]) + //{ + // console.warn('[vue-sortable] cannot set already defined sortable id: \'' + this.arg + '\'') + //} else if (this.arg) + //{ + // this.vm.sortable[this.arg] = sortable; + //} +}); \ No newline at end of file diff --git a/zero.Web.UI/app.js b/zero.Web.UI/app.js index be5426ba..81127fea 100644 --- a/zero.Web.UI/app.js +++ b/zero.Web.UI/app.js @@ -7,8 +7,8 @@ zero.apps = { import Router from 'zero/router.config.js'; //import 'zero/components/globals'; -import registerDirectives from 'zero/directives/register'; -//import 'zero/filters/globals'; +import 'zero/directives/globals'; +import 'zero/filters/globals'; //import 'zero/renderers/globals'; //import 'zero/pages/register'; @@ -16,7 +16,4 @@ import registerDirectives from 'zero/directives/register'; const app = createApp(App); app.use(Router); -registerDirectives(app); - -console.info(app); app.mount('#app');