From 8be0a2268f6a71092ce339164d68432a3be66c6e Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Mon, 9 May 2016 23:30:09 +0200
Subject: [PATCH] theme-settings: background image can be set with fbrowser
---
js/filebrowser.js | 1 +
js/modal.js | 21 +++++++++++++++++++++
templates/field_fileinput.tpl | 10 ++++++++++
templates/theme_settings.tpl | 4 +++-
4 files changed, 35 insertions(+), 1 deletion(-)
create mode 100644 templates/field_fileinput.tpl
diff --git a/js/filebrowser.js b/js/filebrowser.js
index 648090677c..58d050a743 100644
--- a/js/filebrowser.js
+++ b/js/filebrowser.js
@@ -135,6 +135,7 @@ var FileBrowser = {
this.dataset.filename,
embed,
FileBrowser.id,
+ this.dataset.img
]);
// close model
diff --git a/js/modal.js b/js/modal.js
index a296c9ba9c..8868e06407 100644
--- a/js/modal.js
+++ b/js/modal.js
@@ -48,6 +48,27 @@ $(document).ready(function(){
e.preventDefault();
toggleJotNav(this);
});
+
+ // Open filebrowser for elements with the class "image-select"
+ // The following part handles the filebrowser for field_fileinput.tpl
+ $("body").on("click", ".image-select", function(e){
+ // set a extra attribute to mark the clicked button
+ this.setAttribute("image-input", "select");
+ Dialog.doImageBrowser("input");
+ });
+
+ // Insert filebrowser images into the input field (field_fileinput.tpl)
+ $("body").on("fbrowser.image.input", function(e, filename, embedcode, id, img) {
+ // select the clicked button by it's attribute
+ var elm = $("[image-input='select']")
+ // select the input field which belongs to this button
+ var input = elm.parent(".input-group").children("input");
+ // remove the special indicator attribut from the button
+ elm.removeAttr("image-input");
+ // inserte the link from the image into the input field
+ input.val(img);
+
+ });
});
// overwrite Dialog.show from main js to load the filebrowser into a bs modal
diff --git a/templates/field_fileinput.tpl b/templates/field_fileinput.tpl
new file mode 100644
index 0000000000..ebaa76941d
--- /dev/null
+++ b/templates/field_fileinput.tpl
@@ -0,0 +1,10 @@
+
+<div class="form-group field input file">
+ <label for="id_{{$field.0}}" id="label_{{$field.0}}">{{$field.1}}</label>
+ <div class="input-group" id="{{$field.0}}">
+ <input class="form-control file" name="{{$field.0}}" id="id_{{$field.0}}" type="text" value="{{$field.2}}">{{if $field.4}} <span class="required">{{$field.4}}</span> {{/if}}
+ <span class="input-group-addon image-select"><i class="fa fa-picture-o"></i></span>
+ </div>
+ <span id="help_{{$field.0}}" class="help-block">{{$field.3}}</span>
+ <div id="end_{{$field.0}}" class="field_end"></div>
+</div>
diff --git a/templates/theme_settings.tpl b/templates/theme_settings.tpl
index 55a2b33ee1..ebedfcfb57 100644
--- a/templates/theme_settings.tpl
+++ b/templates/theme_settings.tpl
@@ -1,6 +1,8 @@
+
<link rel="stylesheet" href="{{$baseurl}}/view/theme/frio/frameworks/jRange/jquery.range.css" type="text/css" media="screen" />
<script src="{{$baseurl}}/view/theme/quattro/jquery.tools.min.js"></script>
<script src="{{$baseurl}}/view/theme/frio/frameworks/jRange/jquery.range.js"></script>
+<script type="text/javascript" src="{{$baseurl}}/js/ajaxupload.js" ></script>
{{include file="field_select.tpl" field=$schema}}
@@ -20,7 +22,7 @@
</div>
{{/if}}
-{{if $background_image}}{{include file="field_colorinput.tpl" field=$background_image}}{{/if}}
+{{if $background_image}}{{include file="field_fileinput.tpl" field=$background_image}}{{/if}}
<div id="frio_bg_image_options" style="display: none;">
{{foreach $bg_image_options as $options}}
--
2.39.5