Business/NewsPen
2
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

Finish tile editor (close #2)

Browse Source
This commit is contained in:
Skylar Ittner 2017-12-01 20:47:00 -07:00
parent 5aff506911
commit 0a82614741
6 changed files with 169 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
action.php
View File

@ -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");
}

9
lib/gencontent.php
View File

@ -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"]]); ?>

44
pages/content.php
View File

@ -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">&times;</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">

4
pages/editpub.php
View File

@ -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>
&nbsp; <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) {
?>
&nbsp; <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
}

2
static/css/content.css
View File

@ -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 {

114
static/js/content.js
View File

@ -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();
}
});
}