Finish tile editor (close #2)
This commit is contained in:
parent
5aff506911
commit
0a82614741
10
action.php
10
action.php
@ -61,6 +61,15 @@ switch ($VARS['action']) {
|
||||
if ($insert) {
|
||||
$data['uid'] = $_SESSION['uid'];
|
||||
$database->insert('publications', $data);
|
||||
// Make a header to get started
|
||||
$database->insert('tiles', [
|
||||
"pubid" => $database->id(),
|
||||
"page" => 1,
|
||||
"styleid" => 1,
|
||||
"content" => "<h1>" . $VARS['name'] . "</h1>",
|
||||
"width" => $VARS['columns'],
|
||||
"order" => 0]
|
||||
);
|
||||
} else {
|
||||
$database->update('publications', $data, ['pubid' => $VARS['pubid']]);
|
||||
}
|
||||
@ -68,6 +77,7 @@ switch ($VARS['action']) {
|
||||
returnToSender("pub_saved");
|
||||
case "deletepub":
|
||||
if ($database->has('publications', ['pubid' => $VARS['pubid']])) {
|
||||
$database->delete('tiles', ['pubid' => $VARS['pubid']]);
|
||||
$database->delete('publications', ['pubid' => $VARS['pubid']]);
|
||||
returnToSender("pub_deleted");
|
||||
}
|
||||
|
@ -16,6 +16,15 @@ if (!defined("IN_NEWSPEN")) {
|
||||
}
|
||||
ob_end_flush();
|
||||
ob_start();
|
||||
|
||||
if (defined("EDIT_MODE") && EDIT_MODE == true) {
|
||||
?>
|
||||
<script nonce="<?php echo $SECURE_NONCE; ?>">
|
||||
var pubid = <?php echo $pub; ?>;
|
||||
var pubcolumns = <?php echo $pubdata["columns"]; ?>;
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<style nonce="<?php echo $SECURE_NONCE; ?>">
|
||||
<?php $pubcss = $database->get("pub_styles", "css", ["styleid" => $pubdata["styleid"]]); ?>
|
||||
|
@ -72,15 +72,53 @@ if ($pub === false) {
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><?php lang("close"); ?></button>
|
||||
<button type="button" class="btn btn-primary" id="modal-save-btn" data-tile=""><?php lang("save"); ?></button>
|
||||
<button type="button" class="btn btn-primary" id="edit-tile-save-btn" data-tile=""><?php lang("save"); ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="new-tile-modal" tabindex="-1" role="dialog" aria-labelledby="new-tile-title">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="new-tile-title"><?php lang("new tile"); ?></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="width" class="control-label"><i class="fa fa-text-width"></i> <?php lang("width"); ?></label>
|
||||
<input type="number" class="form-control" id="newwidth" value="1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="order" class="control-label"><i class="fa fa-sort"></i> <?php lang("order"); ?></label>
|
||||
<input type="number" class="form-control" id="neworder" value="1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="style" class="control-label"><i class="fa fa-star"></i> <?php lang("style"); ?></label>
|
||||
<select id="newstyle" class="form-control">
|
||||
<?php
|
||||
$styles = $database->select("tile_styles", ['styleid', 'stylename']);
|
||||
foreach ($styles as $s) {
|
||||
$si = $s['styleid'];
|
||||
$sn = $s['stylename'];
|
||||
echo "<option value=\"$si\">$sn</option>\n";
|
||||
}
|
||||
?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><?php lang("close"); ?></button>
|
||||
<button type="button" class="btn btn-primary" id="new-tile-save-btn" data-tile=""><?php lang("new tile"); ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group mgn-btm-10px">
|
||||
<div class="btn btn-success" id="new_tile_btn"><i class="fa fa-plus"></i> <?php lang("new tile"); ?></div>
|
||||
<a class="btn btn-primary" id="preview_btn" href="lib/gencontent.php?pubid=1" target="_BLANK"><i class="fa fa-search"></i> <?php lang("preview"); ?></a>
|
||||
<div class="btn btn-success" id="new_tile_btn" data-toggle="modal" data-target="#new-tile-modal"><i class="fa fa-plus"></i> <?php lang("new tile"); ?></div>
|
||||
<a class="btn btn-primary" id="preview_btn" href="lib/gencontent.php?pubid=<?php echo $pub; ?>" target="_BLANK"><i class="fa fa-search"></i> <?php lang("preview"); ?></a>
|
||||
</div>
|
||||
|
||||
<div class="pages-box">
|
||||
|
@ -21,7 +21,7 @@ if (!is_empty($VARS['id'])) {
|
||||
$cloning = true;
|
||||
}
|
||||
$pubdata = $database->select(
|
||||
'publications', [
|
||||
'publications', [
|
||||
'pubname (name)',
|
||||
'pubdate',
|
||||
'styleid',
|
||||
@ -117,10 +117,10 @@ if (!is_empty($VARS['id'])) {
|
||||
|
||||
<div class="panel-footer">
|
||||
<button type="submit" class="btn btn-success"><i class="fa fa-floppy-o"></i> <?php lang("save"); ?></button>
|
||||
<a href="app.php?page=content&pubid=<?php echo htmlspecialchars($VARS['id']); ?>" class="btn btn-primary"><i class="fa fa-pencil"></i> <?php lang('edit content'); ?></a>
|
||||
<?php
|
||||
if ($editing && !$cloning) {
|
||||
?>
|
||||
<a href="app.php?page=content&pubid=<?php echo htmlspecialchars($VARS['id']); ?>" class="btn btn-primary"><i class="fa fa-pencil"></i> <?php lang('edit content'); ?></a>
|
||||
<a href="action.php?action=deletepub&source=home&pubid=<?php echo htmlspecialchars($VARS['id']); ?>" class="btn btn-danger btn-xs pull-right mgn-top-8px"><i class="fa fa-times"></i> <?php lang('delete'); ?></a>
|
||||
<?php
|
||||
}
|
||||
|
@ -9,6 +9,7 @@
|
||||
max-width: 8.5in;
|
||||
margin: 0px auto;
|
||||
box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.75);
|
||||
min-height: 11in;
|
||||
}
|
||||
|
||||
.tile {
|
||||
@ -17,6 +18,7 @@
|
||||
|
||||
.tile-html {
|
||||
font-family: sans-serif;
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
@ -14,9 +14,90 @@ $(".save-btn").click(function () {
|
||||
saveTile(tileid);
|
||||
});
|
||||
|
||||
$("#modal-save-btn").click(function () {
|
||||
var tileid = $("#modal-save-btn").data("tile");
|
||||
var tobesaved = 0;
|
||||
|
||||
function makeNewTileAfterWait(page, style, width, order) {
|
||||
setTimeout(function () {
|
||||
if (tobesaved > 0) {
|
||||
makeNewTileAfterWait(page, style, width, order);
|
||||
} else {
|
||||
$.post("action.php", {
|
||||
action: "savetile",
|
||||
pubid: pubid,
|
||||
page: page,
|
||||
styleid: style,
|
||||
width: width,
|
||||
order: order,
|
||||
content: ""
|
||||
}, function (d) {
|
||||
window.location.href = window.location.href;
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
/**
|
||||
* Make a new tile after saving any tiles being edited.
|
||||
* @param {type} page
|
||||
* @param {type} style
|
||||
* @param {type} width
|
||||
* @param {type} order
|
||||
* @returns {undefined}
|
||||
*/
|
||||
function newTile(page, style, width, order) {
|
||||
// Make sure everything is saved before loading page
|
||||
tobesaved = 0;
|
||||
$(".tile").each(function (i) {
|
||||
var tileid = $(this).data("tileid");
|
||||
if (tileEditing(tileid)) {
|
||||
tobesaved++;
|
||||
saveTile(tileid, function () {
|
||||
tobesaved--;
|
||||
});
|
||||
}
|
||||
});
|
||||
makeNewTileAfterWait(page, style, width, order);
|
||||
}
|
||||
|
||||
function reloadAfterSaveWait() {
|
||||
setTimeout(function () {
|
||||
if (tobesaved > 0) {
|
||||
reloadAfterWait();
|
||||
} else {
|
||||
window.location.href = window.location.href;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function safeReload() {
|
||||
tobesaved = 0;
|
||||
$(".tile").each(function (i) {
|
||||
var tileid = $(this).data("tileid");
|
||||
if (tileEditing(tileid)) {
|
||||
tobesaved++;
|
||||
saveTile(tileid, function () {
|
||||
tobesaved--;
|
||||
});
|
||||
}
|
||||
});
|
||||
reloadAfterSaveWait();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the tile is being edited,
|
||||
* false otherwise.
|
||||
*
|
||||
* @param number tileid
|
||||
* @returns boolean
|
||||
*/
|
||||
function tileEditing(tileid) {
|
||||
return $("#tile-" + tileid + "-content .tile-html").css("display") == "none";
|
||||
}
|
||||
|
||||
$("#edit-tile-save-btn").click(function () {
|
||||
var tileid = $("#edit-tile-save-btn").data("tile");
|
||||
var oldstyle = $("#tile-" + tileid).data("styleid");
|
||||
var oldorder = $("#tile-" + tileid).data("order");
|
||||
var newstyle = $("#style").val();
|
||||
var width = $("#width").val();
|
||||
var order = $("#order").val();
|
||||
@ -24,13 +105,25 @@ $("#modal-save-btn").click(function () {
|
||||
$("#tile-" + tileid + "-content").removeClass("tile-style-" + oldstyle);
|
||||
$("#tile-" + tileid + "-content").addClass("tile-style-" + newstyle);
|
||||
$("#tile-" + tileid).data("width", width);
|
||||
$("#tile-" + tileid).css("width", width);
|
||||
$("#tile-" + tileid).css("width", ((width * 1.0) / (pubcolumns * 1.0) * 100) + "%");
|
||||
$("#tile-" + tileid).css("flex-basis", ((width * 1.0) / (pubcolumns * 1.0) * 100) + "%");
|
||||
$("#tile-" + tileid).data("order", order);
|
||||
$("#tile-" + tileid).css("order", order);
|
||||
saveTile(tileid);
|
||||
if (oldorder != order) {
|
||||
// refresh page because the order might not look right
|
||||
safeReload();
|
||||
}
|
||||
$("#tile-options-modal").modal('hide');
|
||||
});
|
||||
|
||||
$("#new-tile-save-btn").click(function () {
|
||||
var style = $("#newstyle").val();
|
||||
var width = $("#newwidth").val();
|
||||
var order = $("#neworder").val();
|
||||
newTile(1, style, width, order);
|
||||
});
|
||||
|
||||
$('#tile-options-modal').on('show.bs.modal', function (event) {
|
||||
var button = $(event.relatedTarget);
|
||||
var tileid = button.data('tile');
|
||||
@ -39,10 +132,10 @@ $('#tile-options-modal').on('show.bs.modal', function (event) {
|
||||
modal.find('#width').val(tile.data("width"));
|
||||
modal.find('#order').val(tile.data("order"));
|
||||
modal.find('#style').val(tile.data("styleid"));
|
||||
modal.find('#modal-save-btn').data("tile", tileid);
|
||||
modal.find('#edit-tile-save-btn').data("tile", tileid);
|
||||
});
|
||||
|
||||
function saveTile(tileid) {
|
||||
function saveTile(tileid, callback) {
|
||||
var tile = $("#tile-" + tileid);
|
||||
var tile_content = $("#tile-" + tileid + "-content .tile-html");
|
||||
var page = tile.data("page");
|
||||
@ -50,9 +143,9 @@ function saveTile(tileid) {
|
||||
var width = tile.data("width");
|
||||
var order = tile.data("order");
|
||||
var content = "";
|
||||
if (tile_content.css("display") == "none") {
|
||||
content = tile_content.summernote("code");
|
||||
tile_content.summernote("destroy");
|
||||
if (tileEditing(tileid)) {
|
||||
content = tile_content.summernote("code");
|
||||
tile_content.summernote("destroy");
|
||||
} else {
|
||||
content = tile_content.html();
|
||||
}
|
||||
@ -65,6 +158,9 @@ function saveTile(tileid) {
|
||||
width: width,
|
||||
order: order,
|
||||
content: content
|
||||
}, function (resp) {
|
||||
if (null != callback) {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user