From c62601137eceaeca988cf2c0da24157af076e788 Mon Sep 17 00:00:00 2001 From: Mike Rylander Date: Thu, 5 Feb 2015 16:21:20 -0500 Subject: [PATCH] LP#1402797 Context menu infrastructure Signed-off-by: Mike Rylander Signed-off-by: Bill Erickson --- .../js/ui/default/staff/cat/services/marcedit.js | 154 +++++++++++++-------- 1 file changed, 97 insertions(+), 57 deletions(-) diff --git a/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js b/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js index 8ba6b4ae62..8f53a5451e 100644 --- a/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js +++ b/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js @@ -4,12 +4,12 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap']) -.directive("egContextMenuItem", function () { +.directive("egContextMenuItem", ['$timeout',function ($timeout) { return { restrict: 'E', - replace: false, - template: '
  • {{label}}
    • ', - scope: { item: '=' }, + replace: true, + template: '
  • {{item.label}}
    • ', + scope: { item: '=', content: '=' }, controller: ['$scope','$element', function ($scope , $element) { if (!$scope.item.label) $scope.item.label = $scope.item.value; @@ -18,64 +18,104 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap']) } $scope.setContent = function (v, a) { - if (a) { v = a($scope,v); } - $scope.$apply("item.value=v"); - $( $($scope.element).parent() ).parent().empty().remove(); - $scope.$parent.$destroy(); + var replace_with = v; + if (a) replace_with = a($scope,$element,$scope.item.value,$scope.$parent.$parent.content); + $timeout(function(){ + $scope.$parent.$parent.$apply(function(){ + $scope.$parent.$parent.content = replace_with + }) + }, 0); + console.log('well, replaced it'); + $($element).parent().css({display: 'none'}); } } ] } -}) - -.directive("egMarcEditEditable", ['$document', function ($document) { - function showContext(event) { - event.preventDefault(); - var con = event.data.scope.contextitems; - - if (angular.isArray(con)) { // we have a list of values or transforms - var tmpl = - '
    '+ - ''+ - '
    '; - - var el = $compile(tmpl)(event.data); - el.css({ - postion: 'absolute', - top: event.pageY, - left: event.pageX - }); - - $document.append(el); - } - } +}]) +.directive("egMarcEditEditable", ['$timeout', '$compile', '$document', function ($timeout, $compile, $document) { return { restrict: 'E', replace: false, - template: '', transclude: true, + template: '', scope: { + field: '=', + subfield: '=', content: '=', - //contextitems: '=', + contextItemContainer: '@', max: '@', type: '@' }, -// controller : ['$scope', -// function ( $scope ) { -// $scope.minsize = $scope.max || $scope.content.length; -// if (!$scope.contextitems) $scope.contextitems = {}; -// } -// ], - link: function (scope, element, attrs) { + controller : ['$scope', + function ( $scope ) { + +/* XXX Example, for testing. We'll get this from the tag-table services for realz + * + if (!$scope.contextItemContainer) { + $scope.contextItemContainer = "default_context"; + $scope[$scope.contextItemContainer] = [ + { value: 'a' }, + { value: 'b' }, + { value: 'c' }, + ]; + } + + * + */ - element.bind('change', {}, function (e) { element.size = scope.max || scope.content.length * 1.1}); + if ($scope.contextItemContainer) + $scope.item_container = $scope[$scope.contextItemContainer]; + + $scope.showContext = function (event) { + if ($scope.context_menu_element) { + console.log('Reshowing context menu...'); + $($scope.context_menu_element).css({ display: 'block', top: event.pageY, left: event.pageX }); + return false; + } + + if (angular.isArray($scope.item_container)) { // we have a list of values or transforms + console.log('Showing context menu...'); + + var tmpl = + ''; + + var tnode = angular.element(tmpl); + console.log('... got element ...'); + + $document.find('body').append(tnode); + console.log('... attached to DOM ...'); + + $(tnode).css({ + display: 'block', + top: event.pageY, + left: event.pageX + }); + console.log('... displayed ...'); + + $scope.context_menu_element = tnode; + console.log('... captured for later ...'); + + $timeout(function() { + var e = $compile(tnode)($scope); + console.log('... compiled: ' + e); + }, 0); + + return false; + } + + return true; + } - if (scope.contextitems && angular.isArray(scope.contextitems)) { - element.bind('context', { scope : scope, element : element }, showContext); } + ], + link: function (scope, element, attrs) { + + element.bind('change', function (e) { element.size = scope.max || parseInt(scope.content.length * 1.1) }); + if (scope.contextItemContainer && angular.isArray(scope[scope.contextItemContainer])) + element.bind('contextmenu', scope.showContext); } } }]) @@ -84,8 +124,8 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap']) return { restrict: 'E', template: ''+ - ''+ - ''+ + ''+ + ''+ '', scope: { field: "=", subfield: "=" }, replace: false @@ -95,8 +135,8 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap']) .directive("egMarcEditInd", function () { return { restrict: 'E', - template: '', - scope: { ind : '=' }, + template: '', + scope: { ind : '=', field: '=' }, replace: false, } }) @@ -104,8 +144,8 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap']) .directive("egMarcEditTag", function () { return { restrict: 'E', - template: '', - scope: { tag : '=' }, + template: '', + scope: { tag : '=', field: '=' }, replace: false } }) @@ -114,9 +154,9 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap']) return { restrict: 'E', template: '
    '+ - ''+ - ''+ - ''+ + ''+ + ''+ + ''+ ''+ '
    ', scope: { field: "=" } @@ -127,8 +167,8 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap']) return { restrict: 'E', template: '
    '+ - ''+ - ''+ + ''+ + ''+ '
    ', scope: { field: "=" } } @@ -139,7 +179,7 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap']) restrict: 'E', template: '
    '+ ''+ - ''+ + ''+ '
    ', controller : ['$scope', function ( $scope ) { -- 2.11.0