Add special checks and preview for svg files media files for v8

umbraco · Aug 23, 2019 · ac4128d · ac4128d
1 parent 11f2855
commit ac4128d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/...mbraco.Web.UI.Client/src/common/directives/components/media/umbmedianodeinfo.directive.js b/...mbraco.Web.UI.Client/src/common/directives/components/media/umbmedianodeinfo.directive.js
@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    function MediaNodeInfoDirective($timeout, $location, eventsService, userService, dateHelper, editorService) {
+    function MediaNodeInfoDirective($timeout, $location, eventsService, userService, dateHelper, editorService, mediaHelper) {
 
         function link(scope, element, attrs, ctrl) {
 
@@ -28,6 +28,9 @@
 
                 // make sure dates are formatted to the user's locale
                 formatDatesToLocal();
+
+                // set media file extension initially
+                setMediaExtension();
             }
 
             function formatDatesToLocal() {
@@ -49,6 +52,10 @@
                 }
             }
 
+            function setMediaExtension() {
+                scope.node.extension = mediaHelper.getFileExtension(scope.nodeUrl);
+            }
+
             scope.openMediaType = function (mediaType) {
                 var editor = {
                     id: mediaType.id,
@@ -62,6 +69,16 @@
                 editorService.mediaTypeEditor(editor);
             };
 
+            scope.openSVG = function () {
+                var popup = window.open('', '_blank');
+                var html = '<!DOCTYPE html><body><img src="' + scope.nodeUrl + '"/>' +
+                    '<script>history.pushState(null, null,"' + $location.$$absUrl + '");</script></body>';
+
+                popup.document.open();
+                popup.document.write(html);
+                popup.document.close();
+            }
+
             // watch for content updates - reload content when node is saved, published etc.
             scope.$watch('node.updateDate', function(newValue, oldValue){
                 if(!newValue) { return; }
@@ -72,6 +89,9 @@
 
                 // Update the create and update dates
                 formatDatesToLocal();
+
+                //Update the media file format
+                setMediaExtension();
             });
 
             //ensure to unregister from all events!

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/media/umb-media-node-info.html b/src/Umbraco.Web.UI.Client/src/views/components/media/umb-media-node-info.html
@@ -12,9 +12,15 @@
 
                 <ul ng-if="nodeUrl" class="nav nav-stacked" style="margin-bottom: 0;">
                     <li>
-                        <a href="{{nodeUrl}}" target="_blank">
-                            <i class="icon icon-out"></i>
-                            <span>{{nodeFileName}}</span>
+                        <ng-container ng-if="node.extension != 'svg'">
+                            <a href="{{nodeUrl}}" target="_blank">
+                                <i class="icon icon-out"></i>
+                                <span>{{nodeFileName}}</span>
+                            </a>
+                        </ng-container>
+                        <a ng-if="node.extension == 'svg'">
+                            <i class="icon icon-window-popin"></i>
+                            <span ng-click="openSVG()">{{nodeFileName}}</span>
                         </a>
                     </li>
                 </ul>