From 02eac9829303a8e53dc0bc4f7096571d48b1f769 Mon Sep 17 00:00:00 2001
From: Bago <github@bago.org>
Date: Tue, 17 May 2022 08:58:43 +0200
Subject: [PATCH] new basic 'src' widget for background images

---
 src/css/style_mosaico_content.less | 106 +++++++++++++++++------------
 src/js/app.js                      |   2 +
 src/js/viewmodel.js                |   8 +++
 src/js/widgets/src.js              |  15 ++++
 src/tmpl/widget-src.tmpl.html      |  39 +++++++++++
 5 files changed, 126 insertions(+), 44 deletions(-)
 create mode 100644 src/js/widgets/src.js
 create mode 100644 src/tmpl/widget-src.tmpl.html

diff --git a/src/css/style_mosaico_content.less b/src/css/style_mosaico_content.less
index fe68923c5..9c7ddcbbb 100644
--- a/src/css/style_mosaico_content.less
+++ b/src/css/style_mosaico_content.less
@@ -65,7 +65,8 @@
   opacity: .8;
 }
 
-#main-edit-area .img-wysiwyg {
+#main-edit-area .img-wysiwyg,
+#main-edit-area .widget-src {
   // required for imgdroppable zones
   position: relative;
   /* This should emulate the stlye of the replaced image... */
@@ -85,6 +86,7 @@
    display: block;
   }
 }
+
 #main-edit-area .isdraggingimg .ui-droppable.img-wysiwyg {
   &:before {
     .makeDroppable();
@@ -206,53 +208,61 @@
   opacity: 1;
 }
 
-#main-edit-area .tool {
-  .button-style();
+#main-edit-area, 
+#main-toolbox {
 
-  display: inline-block;
-  text-align: center;
-  width: 25px;
-  height: 25px;
-  // border-radius: 3px;
-  font-size: 20px;
-  padding: 3px;
-  padding-bottom: 2px;
-  margin: 0;
-  min-height: 25px;
-  
-  box-shadow: 0 0 5px @mosaico-button-shadow-color;
-  
-  cursor: pointer;
+  .tool {
+    .button-style();
 
-  input.fileupload {
-    padding-top: 50px;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    width: 35px;
+    height: 33px;
+    // border-radius: 3px;
+    font-size: 20px;
+    padding: 3px;
+    padding-bottom: 2px;
+    margin: 0;
+    min-height: 35px;
+    
+    box-shadow: 0 0 5px @mosaico-button-shadow-color;
+    
+    cursor: pointer;
+
+    input.fileupload {
+      padding-top: 50px;
+    }
   }
-}
-#main-edit-area .tool:hover {
-  background-color: @mosaico-button-background-color-hover;
-}
-#main-edit-area .tools .tool.handle {
-  float: left;
-  margin-left: 16px;
-  cursor: move;
-}
-#main-edit-area .tools .tool.moveup,
-#main-edit-area .tools .tool.movedown {
-  float: left;
-  margin-left: 3px;
-}
 
-#main-edit-area .tools .tool.delete,
-#main-edit-area .tools .tool.clone {
-  float: right;
-  margin-left: 3px;
-}
+  .tool:hover {
+    background-color: @mosaico-button-background-color-hover;
+  }
+  .tools .tool.handle {
+    float: left;
+    margin-left: 16px;
+    cursor: move;
+  }
+  .tools .tool.moveup,
+  .tools .tool.movedown {
+    float: left;
+    margin-left: 3px;
+  }
+  
+  .tools .tool.delete,
+  .tools .tool.clone {
+    float: right;
+    margin-left: 3px;
+  }
+  
+  .tools .tool.delete {
+    margin-right: 16px;
+  }
 
-#main-edit-area .tools .tool.delete {
-  margin-right: 16px;
 }
 
-#main-edit-area .midtools {
+#main-edit-area .midtools,
+#main-toolbox .midtools {
   // display: none;
   visibility: hidden;
   z-index: 30; 
@@ -261,12 +271,18 @@
   // width: 100%;
   text-align: left;
 }
+#main-toolbox .midtools {
+  visibility: visible;
+  bottom: 6px;
+}
+
 #main-edit-area .img-wysiwyg:hover .midtools {
   // display: block;
   visibility: visible;
 }
 // nascondo un po' di cose durante l'upload
-#main-edit-area .uploading {
+#main-edit-area .uploading,
+#main-toolbox .uploading {
   .midtools {
     // display: none !important;
     visibility: hidden !important;
@@ -298,7 +314,8 @@
   visibility: visible;
 }
 
-#main-edit-area .midtools {
+#main-edit-area .midtools,
+#main-toolbox .midtools {
   margin-left: 4px;
   .tool {
     // z-index: 20;
@@ -306,7 +323,8 @@
   }
 }
 
-#main-edit-area .tools {
+#main-edit-area .tools,
+#main-toolbox .tools {
   position: absolute;
   // display: none;
   visibility: hidden;
diff --git a/src/js/app.js b/src/js/app.js
index a54f7957a..e7276e805 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -127,6 +127,8 @@ var start = function(options, templateFile, templateMetadata, jsorjson, customEx
     require("./widgets/font.js"), 
     require("./widgets/integer.js"), 
     require("./widgets/select.js"), 
+    require("./widgets/src.js"), 
+    require("./widgets/textarea.js"), 
     require("./widgets/url.js"), 
     colorPlugin, 
     utilPlugin, 
diff --git a/src/js/viewmodel.js b/src/js/viewmodel.js
index 8309999e6..a7e3e27c5 100644
--- a/src/js/viewmodel.js
+++ b/src/js/viewmodel.js
@@ -35,6 +35,7 @@ function initializeEditor(content, blockDefs, thumbPathConverter, galleryUrl) {
     }),
     selectedBlock: ko.observable(null),
     selectedItem: ko.observable(null),
+    selectedImage: ko.observable(null),
     selectedTool: ko.observable(0),
     selectedImageTab: ko.observable(0),
     dragging: ko.observable(false),
@@ -171,6 +172,10 @@ function initializeEditor(content, blockDefs, thumbPathConverter, galleryUrl) {
 
   // gallery-images.tmpl.html
   viewModel.addImage = function(img) {
+    if (viewModel.selectedImage() !== null) {
+      viewModel.selectedImage()(img.url);
+      return true;
+    }
     var selectedImg = $('#main-wysiwyg-area .selectable-img.selecteditem');
     if (selectedImg.length == 1 && typeof img == 'object' && typeof img.url !== 'undefined') {
       ko.contextFor(selectedImg[0])._src(img.url);
@@ -274,6 +279,7 @@ function initializeEditor(content, blockDefs, thumbPathConverter, galleryUrl) {
       // On selectItem if we were on "Blocks" toolbox tab we move to "Content" toolbox tab.
       if (item !== null && viewModel.selectedTool() === 0) viewModel.selectedTool(1);
     }
+    viewModel.selectedImage(null);
     return false;
   }.bind(viewModel, viewModel.selectedItem);
 
@@ -465,6 +471,8 @@ function initializeEditor(content, blockDefs, thumbPathConverter, galleryUrl) {
   // you can ovverride this method if you want to browse images using an external tool
   // if you call _src(yourSrc) you will set a new source for the image.
   viewModel.selectImage = function(_src) {
+    viewModel.selectedItem(null);
+    viewModel.selectedImage(_src);
     viewModel.showGallery(true);
   };
 
diff --git a/src/js/widgets/src.js b/src/js/widgets/src.js
new file mode 100644
index 000000000..ce6a489ab
--- /dev/null
+++ b/src/js/widgets/src.js
@@ -0,0 +1,15 @@
+"use strict";
+/* global global: false */
+
+var widgetPlugin = {
+  widget: function($, ko, kojqui) {
+    return {
+      widget: 'src',
+      html: function(propAccessor, onfocusbinding, parameters) {
+        return '<span data-bind="template: { name: \'widget-src\', data: { _src: ' + propAccessor + ' } }"></span>';
+      }
+    };
+  },
+};
+
+module.exports = widgetPlugin;
diff --git a/src/tmpl/widget-src.tmpl.html b/src/tmpl/widget-src.tmpl.html
new file mode 100644
index 000000000..399a2f9dd
--- /dev/null
+++ b/src/tmpl/widget-src.tmpl.html
@@ -0,0 +1,39 @@
+<table tabfocus="0" cellspacing="0" cellpadding="0" data-drop-content="Drop here" data-bind="click: function(obj, evt) { $root.selectImage(_src); return true; }, clickBubble: false, fudroppable: { activeClass: 'ui-state-highlight', hoverClass: 'ui-state-draghover' }, extdroppable: { options: { accept: '.image', activeClass: 'ui-state-highlight', hoverClass: 'ui-state-draghover', tolerance: 'pointer' }, data: _src, dragged: $root.fileToImage }, attr: { 'data-drop-content': $root.t('Drop here') }"
+  class="widget-src selectable-img" style="display: table; margin: 0; min-height: 50px;"><tr><td class="uploadzone" style="padding: 0">
+  <div class="mo-uploadzone"></div>
+
+  <div class="midtools" data-bind="tooltips: {}">
+    <!-- ko if: _src() != '' -->
+    <div title="Remove image" class="tool delete" data-bind="attr: { title: $root.t('Remove image') }, click: _src.bind(_src, ''), clickBubble: false"><i class="fa fa-fw fa-trash-o"></i></div>
+    <!-- ko if: typeof $root.editImage !== 'undefined' -->
+    <div title="Open the image editing tool" class="tool edit" data-bind="attr: { title: $root.t('Open the image editing tool') }, click: $root.editImage.bind($element, _src), clickBubble: false"><i class="fa fa-fw fa-pencil"></i></div>
+    <!-- /ko -->
+    <!-- /ko -->
+    <!-- ko if: _src() == '' -->
+    <div title="Upload a new image" data-bind="attr: { title: $root.t('Upload a new image') }" class="tool upload" style="position: relative; overflow: hidden;"><i class="fa fa-fw fa-upload"></i>
+      <input class="fileupload nofile" type="file" accept="image/png, image/jpeg, image/gif" name="files[]" data-bind="fileupload: { data: _src, onerror: $root.notifier.error, onfile: $root.loadImage, canvasPreview: true }" style="z-index: 20; position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; font-size: 999px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; cursor: inherit; display: block">
+    </div>
+    <!-- ko if: typeof $root.selectImage !== 'undefined' -->
+    <div title="Select from gallery" class="tool gallery" data-bind="attr: { title: $root.t('Select from gallery') }, click: $root.selectImage.bind($element, _src), clickBubble: true"><i class="fa fa-fw fa-picture-o"></i></div>
+    <!-- /ko -->
+    <!-- /ko -->
+  </div>
+
+  <!-- ko if: _src() == '' -->
+    <span class="fileuploadtext" style="text-align: center; display: -ms-flexbox; display: flex; align-items: center; flex-align: center; justify-content: center; padding: 1em; position: absolute; top: 0; left: 0; right: 0; bottom: 0;"><span class="textMiddle" style=" text-shadow: 1px 1px 0 #FFFFFF, 0 0 10px #FFFFFF; font-weight: bold;" data-bind="text: $root.t('Drop an image here')">Drop an image here</span></span>
+  <!-- /ko -->
+
+  <!-- ko if: _src() != '' -->
+  <img style="display: block; max-width: 100%;" src="" data-bind="preloader: _src, wysiwygSrc: { src: _src.preloaded, placeholder: { width: 160, height: 100 }, width: 400, height: null }" />
+  <!-- /ko -->
+
+  <div title="Drop an image here or click the upload button" data-bind="attr: { title: $root.t('Drop an image here or click the upload button') }, tooltips: {}" class="workzone" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;">
+    <!-- ko if: _src.preloaded && _src() != _src.preloaded() -->PRELOADING....<!-- /ko -->
+    <!-- ko if: _src() != '' -->
+      <input class="fileupload withfile" type="file" accept="image/png, image/jpeg, image/gif" name="files[]" data-bind="fileupload: { data: _src, onerror: $root.notifier.error, onfile: $root.galleryRecent.unshift.bind($root.galleryRecent), canvasPreview: true }" style="z-index: -20; position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; font-zie: 999px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; cursor: inherit; display: block">
+    <!-- /ko -->
+    <div class="progress" style="opacity: .5; width: 80%; margin-left: 10%; position: absolute; bottom: 30%; height: 20px; border: 2px solid black;">
+      <div class="progress-bar progress-bar-success" style="height: 20px; background-color: black; "></div>
+    </div>
+  </div>
+</td></tr></table>
\ No newline at end of file