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

Moves insert macro dialog to common, creates a tinymce service to put our plugin logic inside instead of having the logic in the controller.

Browse Source
This commit is contained in:
Shannon
2013-09-23 10:36:21 +10:00
parent c6a86d15a2
commit 334b09f351
7 changed files with 198 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js Normal file
View File

@@ -0,0 +1,153 @@
/**
* @ngdoc service
* @name umbraco.services.tinyMceService
*
*
* @description
* A service containing all logic for all of the Umbraco TinyMCE plugins
*/
function tinyMceService(dialogService, $log, imageHelper, assetsService, $timeout) {
return {
/**
* @ngdoc method
* @name umbraco.services.tinyMceService#createInsertEmbeddedMedia
* @methodOf umbraco.services.tinyMceService
*
* @description
* Creates the umbrco insert embedded media tinymce plugin
*
* @param {Object} editor the TinyMCE editor instance
* @param {Object} $scope the current controller scope
*/
createInsertEmbeddedMedia: function (editor, $scope) {
editor.addButton('umbembeddialog', {
icon: 'media',
tooltip: 'Embed',
onclick: function () {
dialogService.embedDialog({
scope: $scope, callback: function (data) {
editor.insertContent(data);
}
});
}
});
},
/**
* @ngdoc method
* @name umbraco.services.tinyMceService#createMediaPicker
* @methodOf umbraco.services.tinyMceService
*
* @description
* Creates the umbrco insert media tinymce plugin
*
* @param {Object} editor the TinyMCE editor instance
* @param {Object} $scope the current controller scope
*/
createMediaPicker: function(editor, $scope) {
editor.addButton('umbmediapicker', {
icon: 'media',
tooltip: 'Media Picker',
onclick: function () {
dialogService.mediaPicker({
scope: $scope, callback: function (img) {
if (img) {
var imagePropVal = imageHelper.getImagePropertyValue({ imageModel: img, scope: $scope });
var data = {
src: (imagePropVal != null && imagePropVal != "") ? imagePropVal : "nothing.jpg",
id: '__mcenew'
};
editor.insertContent(editor.dom.createHTML('img', data));
$timeout(function () {
var imgElm = editor.dom.get('__mcenew');
var size = editor.dom.getSize(imgElm);
$log.log(size);
var newSize = imageHelper.scaleToMaxSize(500, size.w, size.h);
var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;";
editor.dom.setAttrib(imgElm, 'style', s);
editor.dom.setAttrib(imgElm, 'rel', newSize.width + "," + newSize.height);
editor.dom.setAttrib(imgElm, 'id', null);
}, 500);
}
}
});
}
});
},
/**
* @ngdoc method
* @name umbraco.services.tinyMceService#createIconPicker
* @methodOf umbraco.services.tinyMceService
*
* @description
* Creates the umbrco insert icon tinymce plugin
*
* @param {Object} editor the TinyMCE editor instance
* @param {Object} $scope the current controller scope
*/
createIconPicker: function (editor, $scope) {
editor.addButton('umbiconpicker', {
icon: 'media',
tooltip: 'Icon Picker',
onclick: function () {
dialogService.open({
show: true, template: "views/common/dialogs/iconpicker.html", scope: $scope, callback: function (c) {
var data = {
style: 'font-size: 60px'
};
var i = editor.dom.createHTML('i', data);
tinyMCE.activeEditor.dom.addClass(i, c);
editor.insertContent(i);
}
});
}
});
},
/**
* @ngdoc method
* @name umbraco.services.tinyMceService#createUmbracoMacro
* @methodOf umbraco.services.tinyMceService
*
* @description
* Creates the insert umbrco macro tinymce plugin
*
* @param {Object} editor the TinyMCE editor instance
* @param {Object} $scope the current controller scope
*/
createInsertMacro: function (editor, $scope) {
editor.addButton('umbmacro', {
icon: 'custom icon-settings-alt',
tooltip: 'Insert macro',
onclick: function () {
dialogService.open({
show: true, template: "views/common/dialogs/insertmacro.html", scope: $scope, callback: function (c) {
var data = {
style: 'font-size: 60px'
};
var i = editor.dom.createHTML('i', data);
tinyMCE.activeEditor.dom.addClass(i, c);
editor.insertContent(i);
}
});
}
});
}
};
}
angular.module('umbraco.services').factory('tinyMceService', tinyMceService);

9
src/Umbraco.Web.UI.Client/src/less/hacks.less
View File

@@ -90,4 +90,11 @@ iframe, .content-column-body {
.mce-tinymce{border: 1px solid @grayLight !important; }
.mce-panel{background: @grayLighter !important; border-color: @grayLight !important;}
.mce-btn-group, .mce-btn{border: none !important; background: none !important;}
.mce-ico{font-size: 12px !important; color: @blackLight !important;}
.mce-ico{font-size: 12px !important; color: @blackLight !important;}
/* Special case to support helviticons for the tiny mce button controls */
.mce-ico.mce-i-custom[class^="icon-"],
.mce-ico.mce-i-custom[class*=" icon-"] {
font-family: icomoon;
font-size:16px !important;
}

8
src/Umbraco.Web.UI.Client/src/views/templates/insertmacro.controller.js → src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.controller.js
View File

@@ -1,6 +1,6 @@
/**
* @ngdoc controller
* @name Umbraco.Editors.Templates.InsertMacroController
* @name Umbraco.Dialogs.InsertMacroController
* @function
*
* @description
@@ -21,10 +21,6 @@ function InsertMacroController($scope, entityResource, macroResource, umbPropEdi
$scope.submit({ selectedMacro: $scope.selectedMacro });
} else {
$scope.wizardStep = "paramSelect";
////update the view on each editor to be correct
//_.each(data, function (item) {
// item.view = umbPropEditorHelper.getViewPath(item.view);
//});
$scope.macroParams = data;
}
});
@@ -104,4 +100,4 @@ function InsertMacroController($scope, entityResource, macroResource, umbPropEdi
}
angular.module("umbraco").controller("Umbraco.Editors.Templates.InsertMacroController", InsertMacroController);
angular.module("umbraco").controller("Umbraco.Dialogs.InsertMacroController", InsertMacroController);

2
src/Umbraco.Web.UI.Client/src/views/templates/insertmacro.html → src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.html
View File

@@ -1,4 +1,4 @@
<div class="umb-panel show-validation" ng-controller="Umbraco.Editors.Templates.InsertMacroController">
<div class="umb-panel show-validation" ng-controller="Umbraco.Dialogs.InsertMacroController">
<form novalidate name="insertMacroForm" ng-submit="submitForm()">

112
src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
View File

@@ -1,91 +1,45 @@
angular.module("umbraco")
.controller("Umbraco.Editors.RTEController",
function($rootScope, $scope, dialogService, $log, imageHelper, assetsService, $timeout){
function ($rootScope, $scope, dialogService, $log, imageHelper, assetsService, $timeout, tinyMceService) {
assetsService.loadJs("lib/tinymce/tinymce.min.js", $scope).then(function(){
//we need to add a timeout here, to force a redraw so TinyMCE can find
//the elements needed
$timeout(function(){
tinymce.DOM.events.domLoaded = true;
tinymce.init({
mode: "exact",
elements: $scope.model.alias+"_rte",
skin: "umbraco",
menubar : false,
statusbar: false,
height: 340,
toolbar: "bold italic | styleselect | alignleft aligncenter alignright | bullist numlist | outdent indent | link image mediapicker iconpicker embeddialog",
setup : function(editor) {
editor.on('blur', function(e) {
$scope.$apply(function() {
assetsService.loadJs("lib/tinymce/tinymce.min.js", $scope).then(function () {
//we need to add a timeout here, to force a redraw so TinyMCE can find
//the elements needed
$timeout(function () {
tinymce.DOM.events.domLoaded = true;
tinymce.init({
mode: "exact",
elements: $scope.model.alias + "_rte",
skin: "umbraco",
//plugins: "pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,advlist,umbracolink,umbracoanchor,umbracostyles,umbracocharmap,umbracomacro,umbracosave,umbracomedia",
//plugins: "umbmacro",
menubar: false,
statusbar: false,
height: 340,
toolbar: "bold italic | styleselect | alignleft aligncenter alignright | bullist numlist | outdent indent | link image umbmediapicker umbiconpicker umbembeddialog umbmacro",
setup: function (editor) {
editor.on('blur', function (e) {
$scope.$apply(function () {
$scope.model.value = editor.getContent();
});
});
editor.addButton('mediapicker', {
icon: 'media',
tooltip: 'Media Picker',
onclick: function(){
dialogService.mediaPicker({scope: $scope, callback: function(img){
if(img){
var imagePropVal = imageHelper.getImagePropertyValue({imageModel: img, scope: $scope});
var data = {
src: (imagePropVal != null && imagePropVal != "") ? imagePropVal: "nothing.jpg",
id: '__mcenew'
};
//Create the insert media plugin
tinyMceService.createMediaPicker(editor, $scope);
editor.insertContent(editor.dom.createHTML('img', data));
$timeout(function(){
var imgElm = editor.dom.get('__mcenew');
var size = editor.dom.getSize(imgElm);
$log.log(size);
//Create the insert icon plugin
tinyMceService.createIconPicker(editor, $scope);
//Create the insert icon plugin
tinyMceService.createInsertEmbeddedMedia(editor, $scope);
var newSize = imageHelper.scaleToMaxSize(500, size.w, size.h);
var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;";
editor.dom.setAttrib(imgElm, 'style', s);
editor.dom.setAttrib(imgElm, 'rel', newSize.width + "," + newSize.height);
editor.dom.setAttrib(imgElm, 'id', null);
}, 500);
}
}});
}
});
//Create the insert macro plugin
tinyMceService.createInsertMacro(editor, $scope);
editor.addButton('iconpicker', {
icon: 'media',
tooltip: 'Icon Picker',
onclick: function(){
dialogService.open({show: true, template: "views/common/dialogs/iconpicker.html", scope: $scope, callback: function(c){
var data = {
style: 'font-size: 60px'
};
var i = editor.dom.createHTML('i', data);
tinyMCE.activeEditor.dom.addClass(i, c);
editor.insertContent(i);
}});
}
});
editor.addButton('embeddialog', {
icon: 'media',
tooltip: 'Embed',
onclick: function () {
dialogService.embedDialog({
scope: $scope, callback: function (data) {
editor.insertContent(data);
}
});
}
});
}
});
}, 1);
}
});
}, 1);
});
});
});
});

2
src/Umbraco.Web.UI/umbraco_client/Editors/EditTemplate.js
View File

@@ -11,7 +11,7 @@
var self = this;
UmbClientMgr.openAngularModalWindow({
template: "views/templates/insertmacro.html",
template: "views/common/dialogs/insertmacro.html",
dialogData: {
renderingEngine: "WebForms",
selectedAlias: alias

4
src/umbraco.interfaces/umbraco.interfaces.csproj
View File

@@ -142,10 +142,6 @@
<Compile Include="IDataEditor.cs">
<SubType>Code</SubType>
</Compile>
<Compile Include="IDataEditorAjaxAlternative.cs" />
<Compile Include="IDataFieldWithButtons.cs">
<SubType>Code</SubType>
</Compile>
<Compile Include="IDataPrevalue.cs">
<SubType>Code</SubType>
</Compile>