diff --git a/@salix/app/src/components/searchbar/searchbar.html b/@salix/app/src/components/searchbar/searchbar.html index 2f11a5998..102ff6cce 100644 --- a/@salix/app/src/components/searchbar/searchbar.html +++ b/@salix/app/src/components/searchbar/searchbar.html @@ -1,8 +1,12 @@ +
\ No newline at end of file diff --git a/@salix/app/src/components/searchbar/searchbar.js b/@salix/app/src/components/searchbar/searchbar.js index 574924c34..e2a4a3afd 100644 --- a/@salix/app/src/components/searchbar/searchbar.js +++ b/@salix/app/src/components/searchbar/searchbar.js @@ -1,18 +1,25 @@ -import template from './searchbar.html'; import {module} from '../../module'; require('./style.css'); export const NAME = 'vnSearchbar' export const COMPONENT = { - template: template, - transclude: true, - controllerAs: 'searchbar', - controller: function($element) { - this.onClick = function(event) { - var popover = $element.find('vn-popover'); - popover.controller('vnPopover').show($element); - }; - } + template: require('./searchbar.html'), + bindings: { + model: '<', + search: '&', + advanced: '=', + popover: '@' + }, + controller: controller }; -COMPONENT.controller.$inject = ['$element']; module.component(NAME, COMPONENT); + +controller.$inject = ['$element', '$scope', '$document', '$compile', 'vnPopover']; +function controller($element, $scope, $document, $compile, popover) { + this.onClick = function(event) { + var child = $document[0].createElement(this.popover); + $compile(child)($scope); + popover.show($element, child); + event.preventDefault(); + }; +} diff --git a/@salix/app/src/run.js b/@salix/app/src/run.js index 8a230d8e9..4641c9785 100644 --- a/@salix/app/src/run.js +++ b/@salix/app/src/run.js @@ -1,9 +1,7 @@ import {module} from './module'; export const run = function($rootScope) { - $rootScope.$on('$viewContentLoaded',()=>{ - componentHandler.upgradeAllRegistered(); - }) + $rootScope.$on('$viewContentLoaded', () => {}) } run.$inject = ['$rootScope']; module.run(run); diff --git a/@salix/app/src/styles/layout.css b/@salix/app/src/styles/layout.css index e93d58b8e..c10a88a86 100644 --- a/@salix/app/src/styles/layout.css +++ b/@salix/app/src/styles/layout.css @@ -21,13 +21,13 @@ html [vn-vertical], vn-vertical, .vn-vertical { html [vn-horizontal], vn-horizontal, .vn-horizontal { flex-direction: row; } -vn-horizontal [reverse] { +vn-horizontal[reverse] { flex-direction: row-reverse; } html [vn-vertical], vn-vertical, .vn-vertical { flex-direction: column; } -vn-vertical [reverse] { +vn-vertical[reverse] { flex-direction: column-reverse; } html [wrap] { diff --git a/@salix/core/src/check/check.js b/@salix/core/src/check/check.js index a9f8a2c6a..adbe8280e 100644 --- a/@salix/core/src/check/check.js +++ b/@salix/core/src/check/check.js @@ -20,6 +20,7 @@ export function directive(resolve, normalizer) { if (mdlField) mdlField.updateClasses_(); }); + componentHandler.upgradeElement(element[0].firstChild); } }; } diff --git a/@salix/core/src/combo/combo.js b/@salix/core/src/combo/combo.js index 356c51723..6e292ebee 100644 --- a/@salix/core/src/combo/combo.js +++ b/@salix/core/src/combo/combo.js @@ -21,6 +21,7 @@ export function directive(resolve, normalizer) { if (mdlField) mdlField.updateClasses_(); }); + componentHandler.upgradeElement(element[0].firstChild); } }; } diff --git a/@salix/core/src/core.js b/@salix/core/src/core.js index f70bb48e4..eda3a7094 100644 --- a/@salix/core/src/core.js +++ b/@salix/core/src/core.js @@ -44,11 +44,9 @@ export {NAME as CARD, directive as CardDirective} from './card/card'; export {NAME as CARD_MDL, factory as cardMdl} from './card/card.mdl'; export {NAME as SWITCH, directive as SwitchDirective} from './switch/switch'; export {NAME as SWITCH_MDL, factory as switchdMdl} from './switch/switch.mdl'; - -export {directive as Popover} from './popover/popover'; -export {factory as PopoverMdl} from './popover/popover.mdl'; export {directive as Icon} from './icon/icon'; export {factory as IconMdl} from './icon/icon.mdl'; -export {NAME as TITLE, COMPONENT as TITLE_COMPONENT} from './title/title'; -export {NAME as SUBTITLE, COMPONENT as SUBTITLE_COMPONENT} from './subtitle/subtitle'; +export {directive as Popover} from './popover/popover'; +export {COMPONENT as Title} from './title/title'; +export {COMPONENT as Subtitle} from './subtitle/subtitle'; diff --git a/@salix/core/src/date-picker/date-picker.js b/@salix/core/src/date-picker/date-picker.js index c8470e257..22e8f2c3a 100644 --- a/@salix/core/src/date-picker/date-picker.js +++ b/@salix/core/src/date-picker/date-picker.js @@ -20,6 +20,7 @@ export function directive(resolve, normalizer) { if (mdlField) mdlField.updateClasses_(); }); + componentHandler.upgradeElement(element[0].firstChild); } }; } diff --git a/@salix/core/src/password/password.js b/@salix/core/src/password/password.js index 8b46973f3..33867e874 100644 --- a/@salix/core/src/password/password.js +++ b/@salix/core/src/password/password.js @@ -20,6 +20,7 @@ export function directive(resolve, normalizer) { if (mdlField) mdlField.updateClasses_(); }); + componentHandler.upgradeElement(element[0].firstChild); } } } diff --git a/@salix/core/src/popover/popover.js b/@salix/core/src/popover/popover.js index 5b27cbe5a..0a6b37942 100644 --- a/@salix/core/src/popover/popover.js +++ b/@salix/core/src/popover/popover.js @@ -2,87 +2,91 @@ import {module} from '../module'; import * as resolveFactory from '../resolveDefaultComponents'; require('./style.css'); -const _NAME = 'popover'; export const NAME = 'vnPopover'; -export function directive(resolver) { +directive.$inject = ['$compile', '$document', 'vnPopover']; +export function directive($compile, $document, popover) { return { - restrict: 'E', - transclude: true, - controllerAs: 'popover', - template: function(_, attrs) { - return resolver.getTemplate(_NAME, attrs); - }, -/* link: function(scope, element, attrs, ctrl) { - var nativeElement = element[0]; - nativeElement.addEventListener('click', function(ev) { - ev.preventDefault(); - ctrl.show(); + restrict: 'A', + link: function($scope, $element, $attrs, $ctrl) { + $element.on('click', function(event) { + var child = $document[0].createElement($attrs.vnPopover); + $compile(child)($scope); + popover.show($element, child); + event.preventDefault(); }); - }, -*/ controller: function($element) { - var self = this; - var doc = angular.element(document); - function docMouseDownHandler(event) { - if (event != self.lastEvent) - self.hide(); - } - this.onMouseDown = function(event) { - this.lastEvent = event; - }; - this.hide = function () - { - $element[0].style.display = 'none'; - doc.off('mousedown', docMouseDownHandler); - } - this.show = function(parent) { - var node = $element[0]; - var style = node.style; - - var spacing = 0; - var margin = 20; - var dblMargin = margin * 2; - - var width = node.offsetWidth; - var height = node.offsetHeight; - var innerWidth = window.innerWidth; - var innerHeight = window.innerHeight; - - if(width + dblMargin > innerWidth) { - width = innerWidth - dblMargin; - style.width = width +'px'; - } - if(height + dblMargin > innerHeight) { - height = innerHeight - dblMargin; - style.height = height +'px'; - } - - if(parent) { - var parentNode = parent[0]; - var rect = parentNode.getBoundingClientRect(); - var left = rect.left; - var top = rect.top + spacing + parentNode.offsetHeight; - - if(left + width > innerWidth) - left -= (left + width) - innerWidth + margin; - if(top + height > innerHeight) - top -= height + parentNode.offsetHeight + spacing * 2; - - if(left < 0) - left = margin; - if(top < 0) - top = margin; - - style.top = (top) +'px'; - style.left = (left) +'px'; - } - - style.display = 'block'; - doc.on('mousedown', docMouseDownHandler); - }; } } } -directive.$inject = [resolveFactory.NAME]; - module.directive(NAME, directive); + +$get.$inject = ['$document']; +function $get($document) { + var lastEvent; + var popover; + var self = { + onDocMouseDown: function(event) { + if (event != lastEvent) + self.hide(); + }, + onPopoverMouseDown: function(event) { + lastEvent = event; + }, + hide: function() { + $document.off('mousedown', this.onDocMouseDown); + $document[0].body.removeChild (popover); + popover = null; + }, + show: function(parent, child) { + popover = $document[0].createElement('div'); + popover.className = 'vn-popover'; + popover.addEventListener('mousedown', this.onPopoverMouseDown); + popover.appendChild (child); + + var style = popover.style; + + var spacing = 0; + var margin = 20; + var dblMargin = margin * 2; + + var width = popover.offsetWidth; + var height = popover.offsetHeight; + var innerWidth = window.innerWidth; + var innerHeight = window.innerHeight; + + if(width + dblMargin > innerWidth) { + width = innerWidth - dblMargin; + style.width = width +'px'; + } + if(height + dblMargin > innerHeight) { + height = innerHeight - dblMargin; + style.height = height +'px'; + } + + if(parent) { + var parentNode = parent[0]; + var rect = parentNode.getBoundingClientRect(); + var left = rect.left; + var top = rect.top + spacing + parentNode.offsetHeight; + + if(left + width > innerWidth) + left -= (left + width) - innerWidth + margin; + if(top + height > innerHeight) + top -= height + parentNode.offsetHeight + spacing * 2; + + if(left < 0) + left = margin; + if(top < 0) + top = margin; + + style.top = (top) +'px'; + style.left = (left) +'px'; + } + + $document[0].body.appendChild (popover); + $document.on('mousedown', this.onDocMouseDown); + } + }; + return self; +} +module.provider('vnPopover', function() {this.$get = $get;}); diff --git a/@salix/core/src/popover/popover.mdl.html b/@salix/core/src/popover/popover.mdl.html deleted file mode 100644 index 2aec07e0f..000000000 --- a/@salix/core/src/popover/popover.mdl.html +++ /dev/null @@ -1,5 +0,0 @@ -