yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#3231 RTE editor in grid collapsed on tab shown (#3232)

Browse Source
This commit is contained in:
agrath
2018-10-24 03:48:19 +13:00
committed by Sebastiaan Janssen
parent 39045b1edc
commit 1053a349f6
2 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/Umbraco.Web.UI.Client/src/common/directives/components/grid/grid.rte.directive.js
View File

@@ -1,5 +1,5 @@
angular.module("umbraco.directives")
.directive('gridRte', function (tinyMceService, stylesheetResource, angularHelper, assetsService, $q, $timeout) {
.directive('gridRte', function (tinyMceService, stylesheetResource, angularHelper, assetsService, $q, $timeout, eventsService) {
return {
scope: {
uniqueId: '=',
@@ -362,8 +362,16 @@ angular.module("umbraco.directives")
// tinyMceEditor.fire('LoadContent', null);
//};
var tabShownListener = eventsService.on("valTab.tabShown", function (e, args) {
//the tab has been shown, trigger the mceAutoResize (as it could have timed out before the tab was shown)
if (tinyMceEditor !== undefined && tinyMceEditor != null) {
tinyMceEditor.execCommand('mceAutoResize', false, null, null);
}
});
//listen for formSubmitting event (the result is callback used to remove the event subscription)
var unsubscribe = scope.$on("formSubmitting", function () {
var formSubmittingListener = scope.$on("formSubmitting", function () {
//TODO: Here we should parse out the macro rendered content so we can save on a lot of bytes in data xfer
// we do parse it out on the server side but would be nice to do that on the client side before as well.
scope.value = tinyMceEditor ? tinyMceEditor.getContent() : null;
@@ -373,7 +381,8 @@ angular.module("umbraco.directives")
// NOTE: this is very important otherwise if this is part of a modal, the listener still exists because the dom
// element might still be there even after the modal has been hidden.
scope.$on('$destroy', function () {
unsubscribe();
formSubmittingListener();
eventsService.unsubscribe(tabShownListener);
if (tinyMceEditor !== undefined && tinyMceEditor != null) {
tinyMceEditor.destroy()
}

17
src/Umbraco.Web.UI.Client/src/common/directives/validation/valtab.directive.js
View File

@@ -6,15 +6,15 @@
* @description Used to show validation warnings for a tab to indicate that the tab content has validations errors in its data.
* In order for this directive to work, the valFormManager directive must be placed on the containing form.
**/
function valTab() {
function valTab(eventsService) {
return {
require: ['^form', '^valFormManager'],
restrict: "A",
link: function (scope, element, attr, ctrs) {
var valFormManager = ctrs[1];
var tabId = "tab" + scope.tab.id;
scope.tabHasError = false;
var tabId = "tab" + scope.tab.id;
scope.tabHasError = false;
//listen for form validation changes
valFormManager.onValidationStatusChanged(function (evt, args) {
@@ -31,8 +31,17 @@ function valTab() {
scope.tabHasError = false;
}
});
var tabShownFunc = function (e) {
var tabContent = element.closest(".umb-panel").find("#" + tabId);
eventsService.emit('valTab.tabShown', { originalEvent: e, tab: scope.tab, content: tabContent });
};
var anchorElement = element.find("a[data-toggle='tab']");
anchorElement.on('shown.bs.tab', tabShownFunc);
scope.$on('$destroy', function () {
anchorElement.off('shown.bs.tab', tabShownFunc);
});
}
};
}
angular.module('umbraco.directives.validation').directive("valTab", valTab);
angular.module('umbraco.directives.validation').directive("valTab", valTab);