Add multi-page support

master
Skylar Ittner 7 years ago
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
// 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>
</div>
<?php
<?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…
Cancel
Save