Refactor components directives

This commit is contained in:
Damien CORNEAU 2016-09-28 16:55:27 +09:00
parent 0055191a88
commit 1807cf6e74
10 changed files with 213 additions and 151 deletions

View file

@ -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();
});
}
};
}
})();

View file

@ -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();
});
}
};
}
})();

View file

@ -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);
});
}
}
}
};
});
};
}
})();

View file

@ -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();
}
});
};
});
});
};
}
})();

View file

@ -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();
}
});
};
}
})();

View file

@ -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();
});
}
};
}
})();

View file

@ -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'
};
}
})();

View file

@ -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');
}]);
}
})();

View file

@ -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);
});
}
});
}
};
}
})();

View file

@ -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>