switch for publish and draft

This commit is contained in:
Diego Najar 2019-01-04 14:18:40 +01:00
parent 6560816099
commit bd559904ec
4 changed files with 126 additions and 41 deletions

View File

@ -340,3 +340,62 @@ img.profilePicture {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
/* Switch button */
.switch {
position: relative;
height: 26px;
width: 120px;
background: #f3f3f3;
border: 1px solid #ced4d9;
border-radius: 2px;
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 25px;
font-size: 11px;
text-align: center;
cursor: pointer;
margin: 0 !important;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
.switch-input {
display: none;
}
.switch-input:checked + .switch-label {
font-weight: bold;
color: #fff;
transition: 0.15s ease-out;
transition-property: color, text-shadow;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
left: 50%;
}
.switch-selection {
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
display: block;
width: 58px;
height: 21px;
border-radius: 2px;
background-color: #6c757d;
transition: left 0.15s ease-out;
}

View File

@ -87,7 +87,9 @@ function table($type) {
echo '<td class="pt-3 text-center d-none d-sm-table-cell w-25">'.PHP_EOL; echo '<td class="pt-3 text-center d-none d-sm-table-cell w-25">'.PHP_EOL;
echo '<a class="btn btn-outline-secondary btn-sm mb-1" href="'.HTML_PATH_ADMIN_ROOT.'edit-content/'.$page->key().'"><span class="oi oi-pencil"></span> '.$L->g('Edit').'</a>'.PHP_EOL; echo '<a class="btn btn-outline-secondary btn-sm mb-1" href="'.HTML_PATH_ADMIN_ROOT.'edit-content/'.$page->key().'"><span class="oi oi-pencil"></span> '.$L->g('Edit').'</a>'.PHP_EOL;
if (count($page->children())==0) {
echo '<button type="button" class="btn btn-outline-danger btn-sm deletePageButton mb-1" data-toggle="modal" data-target="#jsdeletePageModal" data-key="'.$page->key().'"><span class="oi oi-trash"></span> '.$L->g('Delete').'</button>'.PHP_EOL; echo '<button type="button" class="btn btn-outline-danger btn-sm deletePageButton mb-1" data-toggle="modal" data-target="#jsdeletePageModal" data-key="'.$page->key().'"><span class="oi oi-trash"></span> '.$L->g('Delete').'</button>'.PHP_EOL;
}
echo '</td>'; echo '</td>';
echo '</tr>'; echo '</tr>';
@ -143,7 +145,9 @@ function table($type) {
echo '<td class="pt-3 text-center d-none d-sm-table-cell w-25">'.PHP_EOL; echo '<td class="pt-3 text-center d-none d-sm-table-cell w-25">'.PHP_EOL;
echo '<a class="btn btn-outline-secondary btn-sm mb-1" href="'.HTML_PATH_ADMIN_ROOT.'edit-content/'.$page->key().'"><span class="oi oi-pencil"></span> '.$L->g('Edit').'</a>'.PHP_EOL; echo '<a class="btn btn-outline-secondary btn-sm mb-1" href="'.HTML_PATH_ADMIN_ROOT.'edit-content/'.$page->key().'"><span class="oi oi-pencil"></span> '.$L->g('Edit').'</a>'.PHP_EOL;
if (count($page->children())==0) {
echo '<button type="button" class="btn btn-outline-danger btn-sm deletePageButton mb-1" data-toggle="modal" data-target="#jsdeletePageModal" data-key="'.$page->key().'"><span class="oi oi-trash"></span> '.$L->g('Delete').'</button>'.PHP_EOL; echo '<button type="button" class="btn btn-outline-danger btn-sm deletePageButton mb-1" data-toggle="modal" data-target="#jsdeletePageModal" data-key="'.$page->key().'"><span class="oi oi-trash"></span> '.$L->g('Delete').'</button>'.PHP_EOL;
}
echo '</td>'; echo '</td>';
echo '</tr>'; echo '</tr>';

View File

@ -60,22 +60,22 @@ echo Bootstrap::formOpen(array(
</div> </div>
<div id="jseditorToolbarLeft"> <div id="jseditorToolbarLeft">
<button type="button" class="btn btn-sm btn-primary" id="jsbuttonSave"><?php echo ($page->draft()?$L->g('Publish'):$L->g('Save')) ?></button> <button type="button" class="btn btn-sm btn-primary" id="jsbuttonSave"><?php echo $L->g('Save') ?></button>
<?php if($page->draft()): ?> <!-- <?php if (count($page->children())==0): ?>
<button type="button" class="btn btn-sm btn-secondary" id="jsbuttonDraft"><?php $L->p('Save as draft') ?></button>
<?php endif; ?>
<?php if (count($page->children())==0): ?>
<button type="button" class="btn btn-sm btn-danger" id="jsbuttonDelete" data-toggle="modal" data-target="#jsdeletePageModal"><?php $L->p('Delete') ?></button> <button type="button" class="btn btn-sm btn-danger" id="jsbuttonDelete" data-toggle="modal" data-target="#jsdeletePageModal"><?php $L->p('Delete') ?></button>
<?php endif; ?> <?php endif; ?> -->
<a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn btn-sm btn-secondary"><?php $L->p('Cancel') ?></a> <span class="d-inline-block align-middle ml-1">
<div class="switch">
<input type="radio" class="switch-input" name="switch" value="" id="jsPublishSwitch" <?php echo (!$page->draft()?'checked':'') ?>>
<label for="jsPublishSwitch" class="switch-label switch-label-off">Publish</label>
<input type="radio" class="switch-input" name="switch" value="" id="jsDraftSwitch" <?php echo ($page->draft()?'checked':'') ?>>
<label for="jsDraftSwitch" class="switch-label switch-label-on">Draft</label>
<span class="switch-selection"></span>
</div>
</span>
</div> </div>
<?php if($page->draft()): ?>
<div class="alert alert-warning p-1 mt-1 mb-0"><?php $L->p('the-content-is-saved-as-a-draft-to-publish-it') ?></div>
<?php endif; ?>
<?php if($page->scheduled()): ?> <?php if($page->scheduled()): ?>
<div class="alert alert-warning p-1 mt-1 mb-0"><?php $L->p('scheduled') ?>: <?php echo $page->date(SCHEDULED_DATE_FORMAT) ?></div> <div class="alert alert-warning p-1 mt-1 mb-0"><?php $L->p('scheduled') ?>: <?php echo $page->date(SCHEDULED_DATE_FORMAT) ?></div>
@ -83,6 +83,14 @@ echo Bootstrap::formOpen(array(
</div> </div>
<script> <script>
$(document).ready(function() { $(document).ready(function() {
$("#jsPublishSwitch").on("click", function() {
$("#jstype").val("published");
});
$("#jsDraftSwitch").on("click", function() {
$("#jstype").val("draft");
});
$("#jsoptionsSidebar").on("click", function() { $("#jsoptionsSidebar").on("click", function() {
$("#jseditorSidebar").toggle(); $("#jseditorSidebar").toggle();
$("#jsshadow").toggle(); $("#jsshadow").toggle();
@ -177,11 +185,11 @@ echo Bootstrap::formOpen(array(
// Type // Type
echo Bootstrap::formSelectBlock(array( echo Bootstrap::formSelectBlock(array(
'name'=>'typeTMP', 'name'=>'typeSelector',
'label'=>$L->g('Type'), 'label'=>$L->g('Type'),
'selected'=>$page->type(), 'selected'=>$page->type(),
'options'=>array( 'options'=>array(
'published'=>'- '.$L->g('Default').' -', 'default'=>'- '.$L->g('Default').' -',
'sticky'=>$L->g('Sticky'), 'sticky'=>$L->g('Sticky'),
'static'=>$L->g('Static') 'static'=>$L->g('Static')
), ),
@ -382,11 +390,16 @@ echo Bootstrap::formOpen(array(
<script> <script>
$(document).ready(function() { $(document).ready(function() {
// Button Publish or Save // Button Save
$("#jsbuttonSave").on("click", function() { $("#jsbuttonSave").on("click", function() {
// Get the type // Get the type from the selector
var type = $("#jstypeTMP option:selected").val(); var typeSelector = $("#jstypeSelector option:selected").val();
$("#jstype").val(type); // Get the type from the switch
var typeSwitch = $("#jstype").val();
// Set the type from the selector if the switch is publish
if ((typeSelector!='default') && (typeSwitch=='published')) {
$("#jstype").val(typeSelector);
}
// Get the content // Get the content
$("#jscontent").val( editorGetContent() ); $("#jscontent").val( editorGetContent() );

View File

@ -54,13 +54,29 @@ echo Bootstrap::formOpen(array(
</div> </div>
<div id="jseditorToolbarLeft"> <div id="jseditorToolbarLeft">
<button type="button" class="btn btn-sm btn-primary" id="jsbuttonSave"><?php $L->p('Publish') ?></button> <button type="button" class="btn btn-sm btn-primary" id="jsbuttonSave"><?php $L->p('Save') ?></button>
<button type="button" class="btn btn-sm btn-secondary" id="jsbuttonDraft"><?php $L->p('Save as draft') ?></button>
<a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn btn-sm btn-secondary"><?php $L->p('Cancel') ?></a> <span class="d-inline-block align-middle ml-1">
<div class="switch">
<input type="radio" class="switch-input" name="switch" value="" id="jsPublishSwitch" checked>
<label for="jsPublishSwitch" class="switch-label switch-label-off">Publish</label>
<input type="radio" class="switch-input" name="switch" value="" id="jsDraftSwitch">
<label for="jsDraftSwitch" class="switch-label switch-label-on">Draft</label>
<span class="switch-selection"></span>
</div>
</span>
</div> </div>
</div> </div>
<script> <script>
$(document).ready(function() { $(document).ready(function() {
$("#jsPublishSwitch").on("click", function() {
$("#jstype").val("published");
});
$("#jsDraftSwitch").on("click", function() {
$("#jstype").val("draft");
});
$("#jsoptionsSidebar").on("click", function() { $("#jsoptionsSidebar").on("click", function() {
$("#jseditorSidebar").toggle(); $("#jseditorSidebar").toggle();
$("#jsshadow").toggle(); $("#jsshadow").toggle();
@ -147,11 +163,11 @@ echo Bootstrap::formOpen(array(
// Type // Type
echo Bootstrap::formSelectBlock(array( echo Bootstrap::formSelectBlock(array(
'name'=>'typeTMP', 'name'=>'typeSelector',
'label'=>$L->g('Type'), 'label'=>$L->g('Type'),
'selected'=>'', 'selected'=>'',
'options'=>array( 'options'=>array(
'published'=>'- '.$L->g('Default').' -', 'default'=>'- '.$L->g('Default').' -',
'sticky'=>$L->g('Sticky'), 'sticky'=>$L->g('Sticky'),
'static'=>$L->g('Static') 'static'=>$L->g('Static')
), ),
@ -320,23 +336,16 @@ echo Bootstrap::formOpen(array(
<script> <script>
$(document).ready(function() { $(document).ready(function() {
// Button Publish or Save // Button Save
$("#jsbuttonSave").on("click", function() { $("#jsbuttonSave").on("click", function() {
// Get the type // Get the type from the selector
var type = $("#jstypeTMP option:selected").val(); var typeSelector = $("#jstypeSelector option:selected").val();
$("#jstype").val(type); // Get the type from the switch
var typeSwitch = $("#jstype").val();
// Get the content // Set the type from the selector if the switch is publish
$("#jscontent").val( editorGetContent() ); if ((typeSelector!='default') && (typeSwitch=='published')) {
$("#jstype").val(typeSelector);
// Submit the form }
$("#jsform").submit();
});
// Button Save as draft
$("#jsbuttonDraft").on("click", function() {
// Set the type as draft
$("#jstype").val("draft");
// Get the content // Get the content
$("#jscontent").val( editorGetContent() ); $("#jscontent").val( editorGetContent() );