Add multi-page support
This commit is contained in:
parent
c580cbdc11
commit
88f11ab935
@ -59,5 +59,6 @@ define("STRINGS", [
|
||||
"save" => "Save",
|
||||
"edit content" => "Edit Content",
|
||||
"delete" => "Delete",
|
||||
"open" => "Open"
|
||||
"open" => "Open",
|
||||
"page" => "Page"
|
||||
]);
|
@ -37,12 +37,16 @@ if (defined("EDIT_MODE") && EDIT_MODE == true) {
|
||||
max-width: <?php echo ($pubdata["landscape"] == 0 ? $pagesize["width"] : $pagesize["height"]); ?>;
|
||||
min-height: <?php echo ($pubdata["landscape"] == 0 ? $pagesize["height"] : $pagesize["width"]); ?>;
|
||||
}
|
||||
|
||||
.page-safe-line .bottom {
|
||||
top: calc(<?php echo ($pubdata["landscape"] == 0 ? $pagesize["height"] : $pagesize["width"]); ?> - 5mm);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style nonce="<?php echo $SECURE_NONCE; ?>" media="all">
|
||||
<?php
|
||||
$styles = $database->select("tile_styles", ["styleid", "css"]);
|
||||
$tiles = $database->select("tiles", ["tileid", "page", "styleid", "content", "width", "order"], ["pubid" => $pub, "ORDER" => "order"]);
|
||||
$tiles = $database->select("tiles", ["tileid", "page", "styleid", "content", "width", "order"], ["pubid" => $pub, "ORDER" => ["page", "order"]]);
|
||||
foreach ($styles as $style) {
|
||||
?>
|
||||
.tile-style-<?php echo $style["styleid"]; ?> {
|
||||
@ -64,30 +68,48 @@ foreach ($tiles as $tile) {
|
||||
?>
|
||||
</style>
|
||||
|
||||
<div class="pub-content">
|
||||
<div class="tile-bin">
|
||||
<?php
|
||||
foreach ($tiles as $tile) {
|
||||
?>
|
||||
<div class="tile" id="tile-<?php echo $tile["tileid"]; ?>" data-tileid="<?php echo $tile["tileid"]; ?>" data-page="<?php echo $tile["page"]; ?>" data-styleid="<?php echo $tile["styleid"]; ?>" data-width="<?php echo $tile["width"]; ?>" data-order="<?php echo $tile["order"]; ?>">
|
||||
<?php
|
||||
if (defined("EDIT_MODE") && EDIT_MODE == true) {
|
||||
?><div class="btn-group btn-group-sm">
|
||||
<button type="button" class="btn btn-default edit-btn" data-tile="<?php echo $tile["tileid"]; ?>"><i class="fa fa-pencil"></i> <?php lang("edit"); ?></button>
|
||||
<button type="button" class="btn btn-default save-btn" data-tile="<?php echo $tile["tileid"]; ?>"><i class="fa fa-save"></i> <?php lang("save"); ?></button>
|
||||
<button type="button" class="btn btn-default opts-btn" data-tile="<?php echo $tile["tileid"]; ?>" data-toggle="modal" data-target="#tile-options-modal"><i class="fa fa-gear"></i> <?php lang("options"); ?></button>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<div id="tile-<?php echo $tile["tileid"]; ?>-content" class="tile-style-<?php echo $tile["styleid"]; ?>">
|
||||
<div class="tile-html"><?php echo $tile["content"]; ?></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
// Get a list of pages
|
||||
$pages = [];
|
||||
foreach ($tiles as $tile) {
|
||||
if (!in_array($tile["page"], $pages)) {
|
||||
$pages[] = $tile["page"];
|
||||
}
|
||||
}
|
||||
|
||||
foreach ($pages as $page) {
|
||||
?>
|
||||
<div class="pub-content">
|
||||
<div class="page-safe-line">
|
||||
<div class="bottom"></div>
|
||||
</div>
|
||||
<div class="tile-bin">
|
||||
<?php
|
||||
foreach ($tiles as $tile) {
|
||||
if ($tile["page"] == $page) {
|
||||
?>
|
||||
<div class="tile" id="tile-<?php echo $tile["tileid"]; ?>" data-tileid="<?php echo $tile["tileid"]; ?>" data-page="<?php echo $tile["page"]; ?>" data-styleid="<?php echo $tile["styleid"]; ?>" data-width="<?php echo $tile["width"]; ?>" data-order="<?php echo $tile["order"]; ?>">
|
||||
<?php
|
||||
if (defined("EDIT_MODE") && EDIT_MODE == true) {
|
||||
?><div class="btn-group btn-group-sm">
|
||||
<button type="button" class="btn btn-default edit-btn" data-tile="<?php echo $tile["tileid"]; ?>"><i class="fa fa-pencil"></i> <?php lang("edit"); ?></button>
|
||||
<button type="button" class="btn btn-default save-btn" data-tile="<?php echo $tile["tileid"]; ?>"><i class="fa fa-save"></i> <?php lang("save"); ?></button>
|
||||
<button type="button" class="btn btn-default opts-btn" data-tile="<?php echo $tile["tileid"]; ?>" data-toggle="modal" data-target="#tile-options-modal"><i class="fa fa-gear"></i> <?php lang("options"); ?></button>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<div id="tile-<?php echo $tile["tileid"]; ?>-content" class="tile-style-<?php echo $tile["styleid"]; ?>">
|
||||
<div class="tile-html"><?php echo $tile["content"]; ?></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
$content = ob_get_clean();
|
||||
|
||||
if (defined("HTML_ME") || !defined("IN_NEWSPEN")) {
|
||||
|
@ -56,6 +56,10 @@ if ($pub === false) {
|
||||
<label for="order" class="control-label"><i class="fa fa-sort"></i> <?php lang("order"); ?></label>
|
||||
<input type="number" class="form-control" id="order">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="page" class="control-label"><i class="fa fa-file-o"></i> <?php lang("page"); ?></label>
|
||||
<input type="number" class="form-control" id="page">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="style" class="control-label"><i class="fa fa-star"></i> <?php lang("style"); ?></label>
|
||||
<select id="style" class="form-control">
|
||||
@ -95,6 +99,10 @@ if ($pub === false) {
|
||||
<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="page" class="control-label"><i class="fa fa-file-o"></i> <?php lang("page"); ?></label>
|
||||
<input type="number" class="form-control" id="newpage" 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">
|
||||
|
@ -4,12 +4,26 @@
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
margin: 10mm 10mm 10mm 10mm;
|
||||
}
|
||||
|
||||
.pub-content {
|
||||
border: 1px solid grey;
|
||||
margin: 0px auto;
|
||||
box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.75);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-safe-line div {
|
||||
display: none;
|
||||
background-color: grey;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-safe-line .bottom {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.tile {
|
||||
@ -26,19 +40,25 @@
|
||||
}
|
||||
|
||||
@media print {
|
||||
@page {
|
||||
margin: 10mm 10mm 10mm 10mm;
|
||||
}
|
||||
.tile-bin {
|
||||
margin: 0px;
|
||||
overflow: visible;
|
||||
}
|
||||
.pub-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
z-index: 999999;
|
||||
border: 0px;
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.btn-group, .footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-safe-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
@ -94,9 +94,11 @@ $("#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 oldpage = $("#tile-" + tileid).data("page");
|
||||
var newstyle = $("#style").val();
|
||||
var width = $("#width").val();
|
||||
var order = $("#order").val();
|
||||
var page = $("#page").val();
|
||||
$("#tile-" + tileid).data("styleid", newstyle);
|
||||
$("#tile-" + tileid + "-content").removeClass("tile-style-" + oldstyle);
|
||||
$("#tile-" + tileid + "-content").addClass("tile-style-" + newstyle);
|
||||
@ -105,8 +107,9 @@ $("#edit-tile-save-btn").click(function () {
|
||||
$("#tile-" + tileid).css("flex-basis", ((width * 1.0) / (pubcolumns * 1.0) * 100) + "%");
|
||||
$("#tile-" + tileid).data("order", order);
|
||||
$("#tile-" + tileid).css("order", order);
|
||||
$("#tile-" + tileid).data("page", page);
|
||||
saveTile(tileid);
|
||||
if (oldorder != order) {
|
||||
if (oldorder != order || oldpage != page) {
|
||||
// refresh page because the order might not look right
|
||||
safeReload();
|
||||
}
|
||||
@ -126,10 +129,11 @@ $("#edit-tile-del-btn").click(function () {
|
||||
});
|
||||
|
||||
$("#new-tile-save-btn").click(function () {
|
||||
var page = $("#newpage").val();
|
||||
var style = $("#newstyle").val();
|
||||
var width = $("#newwidth").val();
|
||||
var order = $("#neworder").val();
|
||||
newTile(1, style, width, order);
|
||||
newTile(page, style, width, order);
|
||||
});
|
||||
|
||||
$('#tile-options-modal').on('show.bs.modal', function (event) {
|
||||
@ -140,6 +144,7 @@ $('#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('#page').val(tile.data("page"));
|
||||
modal.find('#edit-tile-save-btn').data("tile", tileid);
|
||||
});
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user