mirror of
https://github.com/apache/zeppelin
synced 2026-05-24 09:38:26 +00:00
Refactor components directives
This commit is contained in:
parent
0055191a88
commit
1807cf6e74
10 changed files with 213 additions and 151 deletions
|
|
@ -12,14 +12,19 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
'use strict';
|
||||
(function() {
|
||||
|
||||
angular.module('zeppelinWebApp').directive('dropdownInput', function() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function(scope, element) {
|
||||
element.bind('click', function(event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
angular.module('zeppelinWebApp').directive('dropdownInput', dropdownInput);
|
||||
|
||||
function dropdownInput() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function(scope, element) {
|
||||
element.bind('click', function(event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -12,22 +12,27 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
'use strict';
|
||||
(function() {
|
||||
|
||||
angular.module('zeppelinWebApp').directive('expandCollapse', function() {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
link: function(scope, element, attrs) {
|
||||
angular.element(element).click(function(event) {
|
||||
if (angular.element(element).find('.expandable:visible').length > 1) {
|
||||
angular.element(element).find('.expandable:visible').slideUp('slow');
|
||||
angular.element(element).find('i.icon-folder-alt').toggleClass('icon-folder icon-folder-alt');
|
||||
} else {
|
||||
angular.element(element).find('.expandable').first().slideToggle('200',function() {
|
||||
angular.element(element).find('i').first().toggleClass('icon-folder icon-folder-alt');
|
||||
});
|
||||
}
|
||||
event.stopPropagation();
|
||||
angular.module('zeppelinWebApp').directive('expandCollapse', expandCollapse);
|
||||
|
||||
function expandCollapse() {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
link: function(scope, element, attrs) {
|
||||
angular.element(element).click(function(event) {
|
||||
if (angular.element(element).find('.expandable:visible').length > 1) {
|
||||
angular.element(element).find('.expandable:visible').slideUp('slow');
|
||||
angular.element(element).find('i.icon-folder-alt').toggleClass('icon-folder icon-folder-alt');
|
||||
} else {
|
||||
angular.element(element).find('.expandable').first().slideToggle('200',function() {
|
||||
angular.element(element).find('i').first().toggleClass('icon-folder icon-folder-alt');
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
event.stopPropagation();
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -12,17 +12,24 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
'use strict';
|
||||
(function() {
|
||||
|
||||
angular.module('zeppelinWebApp').directive('interpreterDirective', function($timeout) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function(scope, element, attr) {
|
||||
if (scope.$last === true) {
|
||||
$timeout(function() {
|
||||
var id = 'ngRenderFinished';
|
||||
scope.$emit(id);
|
||||
});
|
||||
angular.module('zeppelinWebApp').directive('interpreterDirective', interpreterDirective);
|
||||
|
||||
interpreterDirective.$inject = ['$timeout'];
|
||||
|
||||
function interpreterDirective($timeout) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function(scope, element, attr) {
|
||||
if (scope.$last === true) {
|
||||
$timeout(function() {
|
||||
var id = 'ngRenderFinished';
|
||||
scope.$emit(id);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -12,18 +12,23 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
'use strict';
|
||||
(function() {
|
||||
|
||||
angular.module('zeppelinWebApp').directive('ngEnter', function() {
|
||||
return function(scope, element, attrs) {
|
||||
element.bind('keydown keypress', function(event) {
|
||||
if (event.which === 13) {
|
||||
if (!event.shiftKey) {
|
||||
scope.$apply(function() {
|
||||
scope.$eval(attrs.ngEnter);
|
||||
});
|
||||
angular.module('zeppelinWebApp').directive('ngEnter', ngEnter);
|
||||
|
||||
function ngEnter() {
|
||||
return function(scope, element, attrs) {
|
||||
element.bind('keydown keypress', function(event) {
|
||||
if (event.which === 13) {
|
||||
if (!event.shiftKey) {
|
||||
scope.$apply(function() {
|
||||
scope.$eval(attrs.ngEnter);
|
||||
});
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -12,16 +12,21 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
'use strict';
|
||||
(function() {
|
||||
|
||||
angular.module('zeppelinWebApp').directive('ngEscape', function() {
|
||||
return function(scope, element, attrs) {
|
||||
element.bind('keydown keyup', function(event) {
|
||||
if (event.which === 27) {
|
||||
scope.$apply(function() {
|
||||
scope.$eval(attrs.ngEscape);
|
||||
});
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
angular.module('zeppelinWebApp').directive('ngEscape', ngEscape);
|
||||
|
||||
function ngEscape() {
|
||||
return function(scope, element, attrs) {
|
||||
element.bind('keydown keyup', function(event) {
|
||||
if (event.which === 27) {
|
||||
scope.$apply(function() {
|
||||
scope.$eval(attrs.ngEscape);
|
||||
});
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -12,32 +12,37 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
'use strict';
|
||||
(function() {
|
||||
|
||||
angular.module('zeppelinWebApp').directive('modalvisible', function() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
preVisibleCallback: '&previsiblecallback',
|
||||
postVisibleCallback: '&postvisiblecallback',
|
||||
targetinput: '@targetinput'
|
||||
},
|
||||
link: function(scope, element, attrs) {
|
||||
// Add some listeners
|
||||
var previsibleMethod = scope.preVisibleCallback;
|
||||
var postVisibleMethod = scope.postVisibleCallback;
|
||||
element.on('show.bs.modal',function(e) {
|
||||
var relatedTarget = angular.element(e.relatedTarget);
|
||||
var clone = relatedTarget.data('clone');
|
||||
var sourceNoteName = relatedTarget.data('source-note-name');
|
||||
var cloneNote = clone ? true : false;
|
||||
previsibleMethod()(cloneNote, sourceNoteName);
|
||||
});
|
||||
element.on('shown.bs.modal', function(e) {
|
||||
if (scope.targetinput) {
|
||||
angular.element(e.target).find('input#' + scope.targetinput).select();
|
||||
}
|
||||
postVisibleMethod();
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
angular.module('zeppelinWebApp').directive('modalvisible', modalvisible);
|
||||
|
||||
function modalvisible() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
preVisibleCallback: '&previsiblecallback',
|
||||
postVisibleCallback: '&postvisiblecallback',
|
||||
targetinput: '@targetinput'
|
||||
},
|
||||
link: function(scope, element, attrs) {
|
||||
// Add some listeners
|
||||
var previsibleMethod = scope.preVisibleCallback;
|
||||
var postVisibleMethod = scope.postVisibleCallback;
|
||||
element.on('show.bs.modal',function(e) {
|
||||
var relatedTarget = angular.element(e.relatedTarget);
|
||||
var clone = relatedTarget.data('clone');
|
||||
var sourceNoteName = relatedTarget.data('source-note-name');
|
||||
var cloneNote = clone ? true : false;
|
||||
previsibleMethod()(cloneNote, sourceNoteName);
|
||||
});
|
||||
element.on('shown.bs.modal', function(e) {
|
||||
if (scope.targetinput) {
|
||||
angular.element(e.target).find('input#' + scope.targetinput).select();
|
||||
}
|
||||
postVisibleMethod();
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
/*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
'use strict';
|
||||
(function() {
|
||||
|
||||
angular.module('zeppelinWebApp').directive('popoverHtmlUnsafePopup', popoverHtmlUnsafePopup);
|
||||
|
||||
function popoverHtmlUnsafePopup() {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
replace: true,
|
||||
scope: {title: '@', content: '@', placement: '@', animation: '&', isOpen: '&'},
|
||||
templateUrl: 'components/popover-html-unsafe/popover-html-unsafe-popup.html'
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -12,17 +12,14 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
'use strict';
|
||||
(function() {
|
||||
|
||||
angular.module('zeppelinWebApp')
|
||||
.directive('popoverHtmlUnsafePopup', function() {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
replace: true,
|
||||
scope: {title: '@', content: '@', placement: '@', animation: '&', isOpen: '&'},
|
||||
templateUrl: 'components/popover-html-unsafe/popover-html-unsafe-popup.html'
|
||||
};
|
||||
})
|
||||
angular.module('zeppelinWebApp').directive('popoverHtmlUnsafe', popoverHtmlUnsafe);
|
||||
|
||||
.directive('popoverHtmlUnsafe', ['$tooltip', function($tooltip) {
|
||||
popoverHtmlUnsafe.$inject = ['$tooltip'];
|
||||
|
||||
function popoverHtmlUnsafe($tooltip) {
|
||||
return $tooltip('popoverHtmlUnsafe', 'popover', 'click');
|
||||
}]);
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -12,58 +12,62 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
'use strict';
|
||||
(function() {
|
||||
|
||||
angular.module('zeppelinWebApp').directive('resizable', function() {
|
||||
angular.module('zeppelinWebApp').directive('resizable', resizable);
|
||||
|
||||
var resizableConfig = {
|
||||
autoHide: true,
|
||||
handles: 'se',
|
||||
helper: 'resizable-helper',
|
||||
stop: function() {
|
||||
angular.element(this).css({'width': '100%', 'height': '100%'});
|
||||
}
|
||||
};
|
||||
function resizable() {
|
||||
var resizableConfig = {
|
||||
autoHide: true,
|
||||
handles: 'se',
|
||||
helper: 'resizable-helper',
|
||||
stop: function() {
|
||||
angular.element(this).css({'width': '100%', 'height': '100%'});
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
callback: '&onResize'
|
||||
},
|
||||
link: function postLink(scope, elem, attrs) {
|
||||
attrs.$observe('resize', function(resize) {
|
||||
var resetResize = function(elem, resize) {
|
||||
var colStep = window.innerWidth / 12;
|
||||
elem.off('resizestop');
|
||||
var conf = angular.copy(resizableConfig);
|
||||
if (resize.graphType === 'TABLE' || resize.graphType === 'TEXT') {
|
||||
conf.grid = [colStep, 10];
|
||||
conf.minHeight = 100;
|
||||
} else {
|
||||
conf.grid = [colStep, 10000];
|
||||
conf.minHeight = 0;
|
||||
}
|
||||
conf.maxWidth = window.innerWidth;
|
||||
|
||||
elem.resizable(conf);
|
||||
elem.on('resizestop', function() {
|
||||
if (scope.callback) {
|
||||
var height = elem.height();
|
||||
if (height < 50) {
|
||||
height = 300;
|
||||
}
|
||||
scope.callback({width: Math.ceil(elem.width() / colStep), height: height});
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
callback: '&onResize'
|
||||
},
|
||||
link: function postLink(scope, elem, attrs) {
|
||||
attrs.$observe('resize', function(resize) {
|
||||
var resetResize = function(elem, resize) {
|
||||
var colStep = window.innerWidth / 12;
|
||||
elem.off('resizestop');
|
||||
var conf = angular.copy(resizableConfig);
|
||||
if (resize.graphType === 'TABLE' || resize.graphType === 'TEXT') {
|
||||
conf.grid = [colStep, 10];
|
||||
conf.minHeight = 100;
|
||||
} else {
|
||||
conf.grid = [colStep, 10000];
|
||||
conf.minHeight = 0;
|
||||
}
|
||||
});
|
||||
};
|
||||
conf.maxWidth = window.innerWidth;
|
||||
|
||||
resize = JSON.parse(resize);
|
||||
if (resize.allowresize === 'true') {
|
||||
resetResize(elem, resize);
|
||||
angular.element(window).resize(function() {
|
||||
elem.resizable(conf);
|
||||
elem.on('resizestop', function() {
|
||||
if (scope.callback) {
|
||||
var height = elem.height();
|
||||
if (height < 50) {
|
||||
height = 300;
|
||||
}
|
||||
scope.callback({width: Math.ceil(elem.width() / colStep), height: height});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
resize = JSON.parse(resize);
|
||||
if (resize.allowresize === 'true') {
|
||||
resetResize(elem, resize);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
angular.element(window).resize(function() {
|
||||
resetResize(elem, resize);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -171,6 +171,7 @@ limitations under the License.
|
|||
<script src="components/noteName-create/notename.controller.js"></script>
|
||||
<script src="components/noteName-import/notenameImport.controller.js"></script>
|
||||
<script src="components/popover-html-unsafe/popover-html-unsafe.directive.js"></script>
|
||||
<script src="components/popover-html-unsafe/popover-html-unsafe-popup.directive.js"></script>
|
||||
<script src="components/ngenter/ngenter.directive.js"></script>
|
||||
<script src="components/dropdowninput/dropdowninput.directive.js"></script>
|
||||
<script src="components/resizable/resizable.directive.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue