From 93113f5175c1fbc0a75d758de03f9b953d229c1f Mon Sep 17 00:00:00 2001
From: Fredrik Karlsson <flommy@outlook.com>
Date: Tue, 20 Oct 2020 14:49:13 +0200
Subject: [PATCH] Added open to field-file dropdown menu

---
 modules/Cockpit/assets/components.js             | 16 +++++++++++++++-
 modules/Cockpit/assets/components/field-file.tag | 16 ++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/modules/Cockpit/assets/components.js b/modules/Cockpit/assets/components.js
index 49e66b2c0..aa80ca13c 100755
--- a/modules/Cockpit/assets/components.js
+++ b/modules/Cockpit/assets/components.js
@@ -2263,7 +2263,7 @@ riot.tag2('field-date', '<input ref="input" class="uk-width-1-1" bind="{opts.bin
 
 });
 
-riot.tag2('field-file', '<div class="uk-panel uk-panel-box uk-panel-card "> <div ref="uploadprogress" class="uk-margin uk-hidden"> <div class="uk-progress"> <div ref="progressbar" class="uk-progress-bar" style="width: 0%;">&nbsp;</div> </div> </div> <div class="uk-flex uk-flex-middle"> <input class="uk-form-blank uk-flex-item-1" type="text" ref="input" bind="{opts.bind}" placeholder="{opts.placeholder || App.i18n.get(\'No file selected...\')}"> <span class="uk-margin-small-left" data-uk-dropdown="pos:\'bottom-center\'"> <button type="button" class="uk-button" ref="picker" title="{App.i18n.get(\'Pick file\')}" onclick="{selectAsset}"><i class="uk-icon-paperclip"></i></button> <div class="uk-dropdown" if="{App.$data.acl.finder}"> <ul class="uk-nav uk-nav-dropdown uk-dropdown-close"> <li class="uk-nav-header">{App.i18n.get(\'Source\')}</li> <li><a onclick="{selectAsset}">{App.i18n.get(\'Select Asset\')}</a></li> <li><a onclick="{selectFile}">{App.i18n.get(\'Select File\')}</a></li> </ul> </div> </span> </div> </div>', '', '', function(opts) {
+riot.tag2('field-file', '<div class="uk-panel uk-panel-box uk-panel-card "> <div ref="uploadprogress" class="uk-margin uk-hidden"> <div class="uk-progress"> <div ref="progressbar" class="uk-progress-bar" style="width: 0%;">&nbsp;</div> </div> </div> <div class="uk-flex uk-flex-middle"> <input class="uk-form-blank uk-flex-item-1" type="text" ref="input" bind="{opts.bind}" placeholder="{opts.placeholder || App.i18n.get(\'No file selected...\')}"> <span class="uk-margin-small-left" data-uk-dropdown="pos:\'bottom-center\'"> <button type="button" class="uk-button" ref="picker" title="{App.i18n.get(\'Pick file\')}" onclick="{selectAsset}"><i class="uk-icon-paperclip"></i></button> <div class="uk-dropdown" if="{App.$data.acl.finder}"> <ul class="uk-nav uk-nav-dropdown uk-dropdown-close"> <li if="{shouldShowOpen()}" class="uk-nav-header">{App.i18n.get(\'Open\')}</li> <li if="{shouldShowOpen()}"><a onclick="{open}">{App.i18n.get(\'Open in new tab\')}</a></li> <li class="uk-nav-header">{App.i18n.get(\'Source\')}</li> <li><a onclick="{selectAsset}">{App.i18n.get(\'Select Asset\')}</a></li> <li><a onclick="{selectFile}">{App.i18n.get(\'Select File\')}</a></li> </ul> </div> </span> </div> </div>', '', '', function(opts) {
 
         var $this = this, $input;
 
@@ -2336,6 +2336,20 @@ riot.tag2('field-file', '<div class="uk-panel uk-panel-box uk-panel-card "> <div
             });
         }.bind(this)
 
+        this.shouldShowOpen = function() {
+            return $this.refs.input.value.trim().length > 0;
+        }.bind(this)
+
+        this.open = function() {
+            var url = $this.refs.input.value.trim();
+            if (url) {
+                if (!url.match(/^(https?:)?\/\/?/i)) {
+                    url = SITE_URL + "/" + url;
+                }
+                var win = window.open(url, '_blank');
+                win.focus();
+            }
+        }.bind(this)
 });
 
 riot.tag2('field-gallery', '<div ref="uploadprogress" class="uk-margin uk-hidden"> <div class="uk-progress"> <div ref="progressbar" class="uk-progress-bar" style="width: 0%;">&nbsp;</div> </div> </div> <div ref="panel"> <div ref="imagescontainer" class="uk-sortable uk-grid uk-grid-match uk-grid-small uk-flex-center uk-grid-gutter uk-grid-width-medium-1-4" show="{images && images.length}"> <div data-idx="{idx}" each="{img,idx in images}"> <div class="uk-panel uk-panel-box uk-panel-thumbnail uk-panel-framed uk-visible-hover"> <div class="uk-bg-transparent-pattern uk-position-relative" style="min-height:120px;"> <canvas class="uk-responsive-width" width="200" height="150"></canvas> <div class="uk-position-absolute uk-position-cover uk-flex uk-flex-middle"> <div class="uk-width-1-1 uk-text-center"> <cp-thumbnail riot-src="{img.path.match(/^(http\\:|https\\:|\\/\\/)/) ? img.path : (SITE_URL+\'/\'+img.path.replace(/^\\//, \'\'))}" height="120"></cp-thumbnail> </div> </div> </div> <div class="uk-invisible uk-margin-top"> <ul class="uk-grid uk-grid-small uk-flex-center uk-text-small"> <li data-uk-dropdown="pos:\'bottom-center\'"> <a class="uk-text-muted" onclick="{parent.selectAsset}" title="{App.i18n.get(\'Select image\')}" data-uk-tooltip><i class="uk-icon-image"></i></a> <div class="uk-dropdown"> <ul class="uk-nav uk-nav-dropdown uk-dropdown-close"> <li class="uk-nav-header">{App.i18n.get(\'Source\')}</li> <li><a onclick="{parent.selectAsset}">{App.i18n.get(\'Select Asset\')}</a></li> <li show="{App.$data.acl.finder}"><a onclick="{parent.selectImage}">{App.i18n.get(\'Select Image\')}</a></li> </ul> </div> </li> <li><a class="uk-text-muted" onclick="{parent.showMeta}" title="{App.i18n.get(\'Edit meta data\')}" data-uk-tooltip><i class="uk-icon-cog"></i></a></li> <li><a class="uk-text-muted" href="{img.path.match(/^(http\\:|https\\:|\\/\\/)/) ? img.path : (SITE_URL+\'/\'+img.path.replace(/^\\//, \'\'))}" data-uk-lightbox="type:\'image\'" title="{App.i18n.get(\'Full size\')}" data-uk-tooltip><i class="uk-icon-eye"></i></a></li> <li><a class="uk-text-danger" onclick="{parent.remove}" title="{App.i18n.get(\'Remove image\')}" data-uk-tooltip><i class="uk-icon-trash-o"></i></a></li> </ul> </div> </div> </div> </div> <div class="uk-text-center {images && images.length ? \'uk-margin-top\':\'\'}"> <div class="uk-text-muted" if="{images && !images.length}"> <img class="uk-svg-adjust" riot-src="{App.base(\'/assets/app/media/icons/gallery.svg\')}" width="100" data-uk-svg> <p>{App.i18n.get(\'Gallery is empty\')}</p> </div> <div class="uk-display-inline-block uk-position-relative" data-uk-dropdown="pos:\'bottom-center\'"> <a class="uk-text-large" onclick="{selectAssetsImages}"> <i class="uk-icon-plus-circle" title="{App.i18n.get(\'Add images\')}" data-uk-tooltip></i> </a> <div class="uk-dropdown" if="{App.$data.acl.finder}"> <ul class="uk-nav uk-nav-dropdown uk-text-left uk-dropdown-close"> <li class="uk-nav-header">{App.i18n.get(\'Select\')}</li> <li><a onclick="{selectAssetsImages}">Asset</a></li> <li><a onclick="{selectimages}">{App.i18n.get(\'Finder\')}</a></li> </ul> </div> </div> </div> <div class="uk-modal uk-sortable-nodrag" ref="modalmeta"> <div class="uk-modal-dialog"> <div class="uk-modal-header"><h3>{App.i18n.get(\'Image Meta\')}</h3></div> <div class="uk-grid uk-grid-match uk-grid-gutter" if="{image}"> <div class="uk-grid-margin uk-width-medium-{field.width}" each="{field,name in meta}" no-reorder> <div class="uk-panel"> <label class="uk-text-small uk-text-bold"> <i class="uk-icon-pencil-square uk-margin-small-right"></i> {field.label || name} </label> <div class="uk-margin uk-text-small uk-text-muted"> {field.info || \' \'} </div> <div class="uk-margin"> <cp-field type="{field.type || \'text\'}" bind="image.meta[\'{name}\']" opts="{field.options || {}}"></cp-field> </div> </div> </div> </div> <div class="uk-modal-footer uk-text-right"><button class="uk-button uk-button-large uk-button-link uk-modal-close">{App.i18n.get(\'Close\')}</button></div> </div> </div> </div>', '', '', function(opts) {
diff --git a/modules/Cockpit/assets/components/field-file.tag b/modules/Cockpit/assets/components/field-file.tag
index e6080734b..f5949343e 100755
--- a/modules/Cockpit/assets/components/field-file.tag
+++ b/modules/Cockpit/assets/components/field-file.tag
@@ -18,6 +18,8 @@
 
                 <div class="uk-dropdown" if="{App.$data.acl.finder}">
                     <ul class="uk-nav uk-nav-dropdown uk-dropdown-close">
+                        <li if="{ shouldShowOpen() }" class="uk-nav-header">{ App.i18n.get('Open') }</li>
+                        <li if="{ shouldShowOpen() }"><a onclick="{ open }">{ App.i18n.get('Open in new tab') }</a></li>
                         <li class="uk-nav-header">{ App.i18n.get('Source') }</li>
                         <li><a onclick="{ selectAsset }">{ App.i18n.get('Select Asset') }</a></li>
                         <li><a onclick="{ selectFile }">{ App.i18n.get('Select File') }</a></li>
@@ -104,6 +106,20 @@
             });
         }
 
+        shouldShowOpen() {
+            return $this.refs.input.value.trim().length > 0;
+        }
+
+        open() {
+            var url = $this.refs.input.value.trim();
+            if (url) {
+                if (!url.match(/^(https?:)?\/\/?/i)) {
+                    url = SITE_URL + "/" + url;
+                }
+                var win = window.open(url, '_blank');
+                win.focus();
+            }
+        }
     </script>
 
 </field-file>