switch markdown editor media picker dialog with overlay component

This commit is contained in:
Mads Rasmussen
2015-10-28 15:01:43 +01:00
parent e54a478458
commit 0b1854e73e
2 changed files with 40 additions and 15 deletions

View File

@@ -8,6 +8,28 @@ function MarkdownEditorController($scope, assetsService, dialogService, $timeout
$scope.model.value = $scope.model.config.defaultValue;
}
function openMediaPicker(callback) {
$scope.mediaPickerOverlay = {};
$scope.mediaPickerOverlay.view = "mediaPicker";
$scope.mediaPickerOverlay.show = true;
$scope.mediaPickerOverlay.submit = function(model) {
var selectedImagePath = model.selectedImages[0].image;
callback(selectedImagePath);
$scope.mediaPickerOverlay.show = false;
$scope.mediaPickerOverlay = null;
};
$scope.mediaPickerOverlay.close = function(model) {
$scope.mediaPickerOverlay.show = false;
$scope.mediaPickerOverlay = null;
};
}
assetsService
.load([
"lib/markdown/markdown.converter.js",
@@ -29,15 +51,10 @@ function MarkdownEditorController($scope, assetsService, dialogService, $timeout
//subscribe to the image dialog clicks
editor2.hooks.set("insertImageDialog", function (callback) {
dialogService.mediaPicker({
callback: function (data) {
callback(data.image);
}
});
openMediaPicker(callback);
return true; // tell the editor that we'll take care of getting the image url
});
}, 200);
});
@@ -46,4 +63,4 @@ function MarkdownEditorController($scope, assetsService, dialogService, $timeout
})
}
angular.module("umbraco").controller("Umbraco.PropertyEditors.MarkdownEditorController", MarkdownEditorController);
angular.module("umbraco").controller("Umbraco.PropertyEditors.MarkdownEditorController", MarkdownEditorController);

View File

@@ -1,7 +1,15 @@
<div ng-controller="Umbraco.PropertyEditors.MarkdownEditorController" class="wmd-panel">
<div id="wmd-button-bar-{{model.alias}}"></div>
<textarea ng-model="model.value" class="wmd-input" id="wmd-input-{{model.alias}}"></textarea>
<div ng-show="model.config.preview" id="wmd-preview-{{model.alias}}" class="wmd-panel wmd-preview"></div>
</div>
<div class="wmd-panel" ng-controller="Umbraco.PropertyEditors.MarkdownEditorController">
<div id="wmd-button-bar-{{model.alias}}"></div>
<textarea class="wmd-input" id="wmd-input-{{model.alias}}" ng-model="model.value"></textarea>
<div class="wmd-panel wmd-preview" id="wmd-preview-{{model.alias}}" ng-show="model.config.preview"></div>
<umb-overlay
ng-if="mediaPickerOverlay.show"
model="mediaPickerOverlay"
position="right"
view="mediaPickerOverlay.view">
</umb-overlay>
</div>