Business/SiteWriter
2
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

Add image picker for complex components (close #17)

Browse Source
This commit is contained in:
Skylar Ittner 2018-05-07 02:11:16 -06:00
parent 92cea5c4ff
commit c626e0f8ed
5 changed files with 74 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lang/en_us.php
View File

@ -54,6 +54,7 @@ define("STRINGS", [
"save needed" => "Press Save to see recent changes.",
"saved" => "Saved",
"icon" => "Icon",
"image" => "Image",
"link" => "Link",
"text" => "Text",
"select page or enter url" => "Select a page or enter URL",

53
pages/editor.php
View File

@ -191,6 +191,17 @@ if (!is_empty($VARS['siteid'])) {
</div>
<div id="iconpicker"><i class="fas fa-spin fa-circle-notch ml-2"></i> <?php lang("loading"); ?></div>
</div>
<div class="form-group d-none" id="imageEdit" data-image="">
<label><i class="fas fa-image"></i> <?php lang("image"); ?></label>
<br /> <div class="card d-inline-block mb-2">
<div class="card-body p-1">
<img id="selectedimage" class="img-responsive" />
</div>
</div>
<div id="imagepicker">
<i class="fas fa-spin fa-circle-notch ml-2"></i> <?php lang("loading"); ?>
</div>
</div>
<div class="form-group" id="linkEdit">
<label><i class="fas fa-link"></i> <?php lang("link"); ?></label>
<select id="linkPage" class="form-control">
@ -229,9 +240,9 @@ if (!is_empty($VARS['siteid'])) {
<i class="fas fa-eye"></i> <?php lang("view"); ?>
</a>
<?php if (!$singlepage) { ?>
<div class="btn btn-primary" id="newpagebtn">
<i class="fas fa-plus"></i> <?php lang("new"); ?>
</div>
<div class="btn btn-primary" id="newpagebtn">
<i class="fas fa-plus"></i> <?php lang("new"); ?>
</div>
<?php } ?>
</div>
<span class="badge badge-success d-none" id="savedBadge"><i class="fas fa-check"></i> <?php lang("saved"); ?></span>
@ -241,26 +252,26 @@ if (!is_empty($VARS['siteid'])) {
</div>
</div>
<?php if (!$singlepage) { ?>
<form method="GET" action="app.php" class="col-12 col-sm-6 col-md-4">
<input type="hidden" name="page" value="editor" />
<input type="hidden" name="siteid" value="<?php echo $VARS['siteid']; ?>" />
<div class="input-group">
<select name="slug" class="form-control">
<?php
foreach ($pagedata as $p) {
$selected = "";
if ($slug == $p['slug']) {
$selected = " selected";
<form method="GET" action="app.php" class="col-12 col-sm-6 col-md-4">
<input type="hidden" name="page" value="editor" />
<input type="hidden" name="siteid" value="<?php echo $VARS['siteid']; ?>" />
<div class="input-group">
<select name="slug" class="form-control">
<?php
foreach ($pagedata as $p) {
$selected = "";
if ($slug == $p['slug']) {
$selected = " selected";
}
echo "<option value=\"" . $p['slug'] . "\"$selected>" . $p['title'] . ' (' . $p['slug'] . ')' . "</option>\n";
}
echo "<option value=\"" . $p['slug'] . "\"$selected>" . $p['title'] . ' (' . $p['slug'] . ')' . "</option>\n";
}
?>
</select>
<div class="input-group-append">
<button type="submit" class="btn btn-primary"><?php lang("edit"); ?></button>
?>
</select>
<div class="input-group-append">
<button type="submit" class="btn btn-primary"><?php lang("edit"); ?></button>
</div>
</div>
</div>
</form>
</form>
<?php } ?>
</div>

8
public/themes/identity/inc/header.inc.php
View File

@ -23,7 +23,13 @@
<!-- Main -->
<section id="main">
<header>
<span class="avatar"><img src="<?php get_theme_url(); ?>/images/avatar.jpg" alt="" /></span>
<?php
$img = get_complex_component("header-img", "index", ["image"]);
$url = "file.php?file=" . $img['image'];
?>
<span class="avatar sw-complex" data-json="<?php echo get_escaped_json($img); ?>" data-component="header-img">
<img src="<?php echo $url; ?>" alt="" />
</span>
<h1><?php get_page_clean_title(); ?></h1>
<p><div class="sw-text" data-component="lead">
<?php get_component("lead"); ?>

5
static/css/filepicker.css
View File

@ -8,3 +8,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
cursor: pointer;
color: #2196F3;
}
#selectedimage {
max-height: 200px;
max-width: 200px;
}

30
static/js/editorparent.js
View File

@ -37,6 +37,7 @@ function editComplex(json) {
var content = data.content;
}
$("#iconEdit").removeClass("d-none");
$("#imageEdit").removeClass("d-none");
$("#linkEdit").removeClass("d-none");
$("#textEdit").removeClass("d-none");
$("#linkPage").val("");
@ -60,6 +61,32 @@ function editComplex(json) {
setSelectedIcon();
}
}
if (typeof content.image === 'undefined') {
$("#imageEdit").addClass("d-none");
} else {
$("#imageEdit").data("image", content.image);
if (content.image != "") {
$("#imageEdit #selectedimage").attr("src", "public/file.php?file=" + content.image);
}
function loadComplexImageBrowser(path) {
$.get("lib/filepicker.php", {
path: path,
type: "image"
}, function (data) {
$("#imagepicker").html(data);
$("#imagepicker .filepicker-item").click(function () {
if ($(this).data("type") == "dir") {
loadComplexImageBrowser($(this).data("path"));
} else {
var path = $(this).data("path");
$("#imageEdit").data("image", path);
$("#imageEdit #selectedimage").attr("src", "public/file.php?file=" + path);
}
})
});
}
loadComplexImageBrowser();
}
if (typeof content.link === 'undefined') {
$("#linkEdit").addClass("d-none");
} else {
@ -93,7 +120,7 @@ function loadFilePickerFolder(path, type) {
type: ty
}, function (data) {
$("#fileBrowseModalBody").html(data);
$(".filepicker-item").click(function () {
$("#fileBrowseModalBody .filepicker-item").click(function () {
if ($(this).data("type") == "dir") {
loadFilePickerFolder($(this).data("path"), type);
} else {
@ -121,6 +148,7 @@ $("#editModalSave").on("click", function () {
data["component"] = $("#editModal").data("component");
var content = {};
content["icon"] = $('input[name="selectedicon"]:checked').val();
content["image"] = $("#imageEdit").data("image");
if ($("#linkBox").val() != "") {
content["link"] = $("#linkBox").val();
} else {