givanz / VvvebJs

Drag and drop page builder library written in vanilla javascript without dependencies or build tools.
https://www.vvveb.com/vvvebjs/editor.html
Apache License 2.0
6.91k stars 1.59k forks source link

Make a draft feature? #293

Closed vinumweb closed 8 months ago

vinumweb commented 1 year ago

Big request here: Is there any way you can make a draft feature. So when user clicks a draft button besides the save button it will save the page into a folder called draft?

givanz commented 1 year ago

You can easily achieve this by duplicating the existing save button and add a new parameter to save url like draft=true you can add the following code to editor.html in #top-panel near the existing save button

<div class="btn-group me-3 float-end" role="group">
  <button class="btn btn-primary btn-icon" title="Save draft" id="save-draft-btn" 
  data-vvveb-action="saveAjax" data-vvveb-url="save.php?draft=true">

    <span class="loading d-none">
    <i class="la la-save"></i>
      <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
      </span>
      <span>Saving draft </span> ... </span>

    <span class="button-text">
      <i class="la la-save"></i> <span>Save draft</span>
    </span> 

  </button>
</div>  

then edit save.php and inside sanitizeFileName function check if the draft parameter is sent and change the save path

function sanitizeFileName($file) {
    //sanitize, remove double dot .. and remove get parameters if any
    $file = __DIR__ . (isset($_GET['draft']) ? '/draft' : '') . '/' . preg_replace('@\?.*$@' , '', preg_replace('@\.{2,}@' , '', preg_replace('@[^\/\\a-zA-Z0-9\-\._]@', '', $file))); // change this line
    //allow only .html extension
    $file = preg_replace('/\..+$/', '', $file) . '.html';
    return $file;
}
vinumweb commented 1 year ago

Thanks!