Your IP : 216.73.216.79
<?php
/***
* Vvvebjs editor
* base on Vvvebjs editor https://github.com/givanz/VvvebJs
* author allif@bluberry.net
**/
namespace common\widgets\VvvebjsEditor;
use yii\base\Widget;
use yii\helpers\Url;
use yii\web\View;
class VvvebjsEditor extends Widget {
/**
* @var string Editor Height
*/
public $height = '500px';
/**
* @var string Editor width
*/
public $width = '100%';
/**
* @var string PreviewPath
*/
public $previewPath;
/**
* @var string frameId
*/
public $frameId;
/**
* @var string uid
*/
public $uid;
/**
* @var string field
*/
public $field;
/**
* @var string column
*/
public $form;
/**
* @var string column
*/
public $model;
public $save = true;
public function init()
{
$id = (int) $_GET['id'];
if (empty($this->previewPath)) {
$this->previewPath = Url::to(['site/content-preview', 'id' => $id]);
}
if (empty($this->frameId)) {
$this->frameId = 'iframe-vvveb-' . $id . '-' . $this->getId();
}
$this->uid = 'UID' .$this->getId();
}
public function run()
{
/* Register AssetBundle */
$asset = VvvebjsAssets::register($this->getView());
$assetUrl = $asset->baseUrl;
$lcaseId = str_replace('-' ,'', $this->frameId);
$inputId = $this->uid . '-input';
$content = $this->render('index', ['base' => $assetUrl]);
$formId = $this->form->id;
$this->view->registerJs(
<<<JS
if (!funcObj) {
var funcObj = {}
}
funcObj.{$lcaseId}Jquery = function() {
let iframedoc= document.getElementById('$this->frameId').contentDocument || document.getElementById('$this->frameId').contentWindow.document;
let input = document.createElement("script");
input.setAttribute("src", "$assetUrl/libs/builder/inputs.js");
iframedoc.body.appendChild(input);
let builder = document.createElement("script");
builder.setAttribute("src", "$assetUrl/libs/builder/builder.js");
let bs4 = document.createElement("script");
bs4.setAttribute("src", "$assetUrl/js/bootstrap.min.js");
iframedoc.body.appendChild(builder);
iframedoc.body.appendChild(bs4);
}
funcObj.{$lcaseId}Init = function(Vvveb) {
let iframedoc= document.getElementById('$this->frameId').contentDocument || document.getElementById('$this->frameId').contentWindow.document;
let componentWid = document.createElement("script");
componentWid.setAttribute("src", "$assetUrl/libs/builder/components-widgets.js");
let undo = document.createElement("script");
undo.setAttribute("src", "$assetUrl/libs/builder/undo.js");
let formatting = document.createElement("script");
formatting.setAttribute("src", "$assetUrl/libs/codemirror/lib/formatting.js");
let codePluggin = document.createElement("script");
codePluggin.setAttribute("src", "$assetUrl/libs/builder/plugin-codemirror.js");
let codexml = document.createElement("script");
codexml.setAttribute("src", "$assetUrl/libs/codemirror/lib/xml.js");
let componentBs4 = document.createElement("script");
componentBs4.setAttribute("src", "$assetUrl/libs/builder/components-bootstrap4.js");
iframedoc.body.appendChild(formatting);
iframedoc.body.appendChild(codexml);
iframedoc.body.appendChild(undo);
iframedoc.body.appendChild(componentWid);
iframedoc.body.appendChild(componentBs4);
iframedoc.body.appendChild(codePluggin);
}
funcObj.{$lcaseId}CInit = function(Vvveb) {
if(Vvveb.Builder){
Vvveb.Builder.init('$this->previewPath', function(e) {
//run code after page/iframe is loaded
});
Vvveb.Gui.init();
}
}
JS
,
View::POS_HEAD
);
$this->view->registerJs(
<<<JS
(function(){
var iframedoc = document.getElementById('$this->frameId').contentDocument || document.getElementById('$this->frameId').contentWindow.document;
iframedoc.body.innerHTML += `$content`;
let jquery = document.createElement("script");
jquery.setAttribute("src", "$assetUrl/js/jquery.min.js");
let codemirror = document.createElement("script");
codemirror.setAttribute("src", "$assetUrl/libs/codemirror/lib/codemirror.js");
iframedoc.body.appendChild(jquery);
iframedoc.body.appendChild(codemirror);
let sectioninput = document.createElement("script");
sectioninput.setAttribute("type", "text/html")
sectioninput.setAttribute("id", "vvveb-input-sectioninput")
sectioninput.innerHTML = `<label class="header" data-header="{%=key%}" for="header_{%=key%}"><span> {%=header%}</span> <div class="header-arrow"></div></label><input class="header_check" type="checkbox" {% if (typeof expanded !== 'undefined' && expanded == false) { %} {% } else { %}checked="true"{% } %} id="header_{%=key%}"><div class="section" data-section="{%=key%}"></div>`
iframedoc.body.appendChild(sectioninput);
let textinput = document.createElement("script");
textinput.setAttribute("type", "text/html")
textinput.setAttribute("id", "vvveb-input-textinput")
textinput.innerHTML = `<div><input name="{%=key%}" type="text" class="form-control"/></div>`
iframedoc.body.appendChild(textinput);
let textareainput = document.createElement("script");
textareainput.setAttribute("type", "text/html")
textareainput.setAttribute("id", "vvveb-input-textareainput")
textareainput.innerHTML = `<div><textarea name="{%=key%}" rows="3" class="form-control"/></div>`
iframedoc.body.appendChild(textareainput);
let checkboxinput = document.createElement("script");
checkboxinput.setAttribute("type", "text/html")
checkboxinput.setAttribute("id", "vvveb-input-checkboxinput")
checkboxinput.innerHTML = `<div class="custom-control custom-checkbox"><input name="{%=key%}" class="custom-control-input" type="checkbox" id="{%=key%}_check"><label class="custom-control-label" for="{%=key%}_check">{% if (typeof text !== 'undefined') { %} {%=text%} {% } %}</label></div>`
iframedoc.body.appendChild(checkboxinput);
let inputradio = document.createElement("script");
inputradio.setAttribute("type", "text/html")
inputradio.setAttribute("id", "vvveb-input-radioinput")
inputradio.innerHTML = `<div>{% for ( var i = 0; i < options.length; i++ ) { %}<label class="custom-control custom-radio {% if (typeof inline !== 'undefined' && inline == true) { %}custom-control-inline{% } %}" title="{%=options[i].title%}"><input name="{%=key%}" class="custom-control-input" type="radio" value="{%=options[i].value%}" id="{%=key%}{%=i%}" {%if (options[i].checked) { %}checked="{%=options[i].checked%}"{% } %}><label class="custom-control-label" for="{%=key%}{%=i%}">{%=options[i].text%}</label></label>{% } %}</div>`
iframedoc.body.appendChild(inputradio);
let inputbuttonradio = document.createElement("script");
inputbuttonradio.setAttribute("type", "text/html")
inputbuttonradio.setAttribute("id", "vvveb-input-radiobuttoninput")
inputbuttonradio.innerHTML = `<div class="btn-group btn-group-toggle {%if (extraclass) { %}{%=extraclass%}{% } %} clearfix" data-toggle="buttons">{% for ( var i = 0; i < options.length; i++ ) { %}<label class="btn btn-outline-primary {%if (options[i].checked) { %}active{% } %} {%if (options[i].extraclass) { %}{%=options[i].extraclass%}{% } %}" for="{%=key%}{%=i%} " title="{%=options[i].title%}"><input name="{%=key%}" class="custom-control-input" type="radio" value="{%=options[i].value%}" id="{%=key%}{%=i%}" {%if (options[i].checked) { %}checked="{%=options[i].checked%}"{% } %}>{%if (options[i].icon) { %}<i class="{%=options[i].icon%}"></i>{% } %}{%=options[i].text%}</label>{% } %}</div>`
iframedoc.body.appendChild(inputbuttonradio);
let inputheader = document.createElement("script");
inputheader.setAttribute("type", "text/html")
inputheader.setAttribute("id", "vvveb-input-header")
inputheader.innerHTML = `<h6 class="header">{%=header%}</h6>`
iframedoc.body.appendChild(inputheader);
let inputselect = document.createElement("script");
inputselect.setAttribute("type", "text/html")
inputselect.setAttribute("id", "vvveb-input-select")
inputselect.innerHTML = `<div><select class="form-control custom-select">{% for ( var i = 0; i < options.length; i++ ) { %}<option value="{%=options[i].value%}">{%=options[i].text%}</option>{% } %}</select></div>`
iframedoc.body.appendChild(inputselect);
let inputlistinput = document.createElement("script");
inputlistinput.setAttribute("type", "text/html")
inputlistinput.setAttribute("id", "vvveb-input-listinput")
inputlistinput.innerHTML = `<div class="row">{% for ( var i = 0; i < options.length; i++ ) { %}<div class="col-6"><div class="input-group"><input name="{%=key%}_{%=i%}" type="text" class="form-control" value="{%=options[i].text%}"/><div class="input-group-append"><button class="input-group-text btn btn-sm btn-danger"><i class="la la-trash la-lg"></i></button></div></div><br/></div>{% } %}{% if (typeof hide_remove === 'undefined') { %}<div class="col-12"><button class="btn btn-sm btn-outline-primary"><i class="la la-trash la-lg"></i> Add new</button></div>{% } %}</div>`
iframedoc.body.appendChild(inputlistinput);
let inputgrid = document.createElement("script");
inputgrid.setAttribute("type", "text/html")
inputgrid.setAttribute("id", "vvveb-input-grid")
inputgrid.innerHTML = `<div class="row"><div class="mb-1 col-12"><label>Flexbox</label><select class="form-control custom-select" name="col"><option value="">None</option>{% for ( var i = 1; i <= 12; i++ ) { %}<option value="{%=i%}" {% if ((typeof col !== 'undefined') && col == i) { %} selected {% } %}>{%=i%}</option>{% } %}</select><br/></div><div class="col-6"><label>Extra small</label><select class="form-control custom-select" name="col-xs"><option value="">None</option>{% for ( var i = 1; i <= 12; i++ ) { %}<option value="{%=i%}" {% if ((typeof col_xs !== 'undefined') && col_xs == i) { %} selected {% } %}>{%=i%}</option>{% } %}</select><br/></div><div class="col-6"><label>Small</label><select class="form-control custom-select" name="col-sm"><option value="">None</option>{% for ( var i = 1; i <= 12; i++ ) { %}<option value="{%=i%}" {% if ((typeof col_sm !== 'undefined') && col_sm == i) { %} selected {% } %}>{%=i%}</option>{% } %}</select><br/></div><div class="col-6"><label>Medium</label><select class="form-control custom-select" name="col-md"><option value="">None</option>{% for ( var i = 1; i <= 12; i++ ) { %}<option value="{%=i%}" {% if ((typeof col_md !== 'undefined') && col_md == i) { %} selected {% } %}>{%=i%}</option>{% } %}</select><br/></div><div class="col-6 mb-1"><label>Large</label><select class="form-control custom-select" name="col-lg"><option value="">None</option>{% for ( var i = 1; i <= 12; i++ ) { %}<option value="{%=i%}" {% if ((typeof col_lg !== 'undefined') && col_lg == i) { %} selected {% } %}>{%=i%}</option>{% } %}</select><br/></div>{% if (typeof hide_remove === 'undefined') { %}<div class="col-12"><button class="btn btn-sm btn-outline-light text-danger"><i class="la la-trash la-lg"></i> Remove</button></div>{% } %}</div>`
iframedoc.body.appendChild(inputgrid);
let inputtextvalue = document.createElement("script");
inputtextvalue.setAttribute("type", "text/html")
inputtextvalue.setAttribute("id", "vvveb-input-textvalue")
inputtextvalue.innerHTML = `<div class="row"><div class="col-6 mb-1"><label>Value</label><input name="value" type="text" value="{%=value%}" class="form-control"/></div><div class="col-6 mb-1"><label>Text</label><input name="text" type="text" value="{%=text%}" class="form-control"/></div>{% if (typeof hide_remove === 'undefined') { %}<div class="col-12"><button class="btn btn-sm btn-outline-light text-danger"><i class="la la-trash la-lg"></i> Remove</button></div>{% } %}</div>`
iframedoc.body.appendChild(inputtextvalue);
let inputrangeinput = document.createElement("script");
inputrangeinput.setAttribute("type", "text/html")
inputrangeinput.setAttribute("id", "vvveb-input-rangeinput")
inputrangeinput.innerHTML = `<div><input name="{%=key%}" type="range" min="{%=min%}" max="{%=max%}" step="{%=step%}" class="form-control"/></div>`
iframedoc.body.appendChild(inputrangeinput);
let imageinput = document.createElement("script");
imageinput.setAttribute("type", "text/html")
imageinput.setAttribute("id", "vvveb-input-imageinput")
imageinput.innerHTML = `<div><input name="{%=key%}" type="text" class="form-control"/><input name="file" type="file" class="form-control"/></div>`
iframedoc.body.appendChild(imageinput);
let inputcolorinput = document.createElement("script");
inputcolorinput.setAttribute("type", "text/html")
inputcolorinput.setAttribute("id", "vvveb-input-colorinput")
inputcolorinput.innerHTML = `<div><input name="{%=key%}" type="color" {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %} pattern="#[a-f0-9]{6}" class="form-control"/></div>`
iframedoc.body.appendChild(inputcolorinput);
let inputbootstrapcolorpick = document.createElement("script");
inputbootstrapcolorpick.setAttribute("type", "text/html")
inputbootstrapcolorpick.setAttribute("id", "vvveb-input-bootstrap-color-picker-input")
inputbootstrapcolorpick.innerHTML = `<div><div id="cp2" class="input-group" title="Using input value"><input name="{%=key%}" type="text" {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %} class="form-control"/><span class="input-group-append"><span class="input-group-text colorpicker-input-addon"><i></i></span></span></div></div>`
iframedoc.body.appendChild(inputbootstrapcolorpick);
let inputnumberinput = document.createElement("script");
inputnumberinput.setAttribute("type", "text/html")
inputnumberinput.setAttribute("id", "vvveb-input-numberinput")
inputnumberinput.innerHTML = `<div><input name="{%=key%}" type="number" value="{%=value%}" {% if (typeof min !== 'undefined' && min != false) { %}min="{%=min%}"{% } %} {% if (typeof max !== 'undefined' && max != false) { %}max="{%=max%}"{% } %} {% if (typeof step !== 'undefined' && step != false) { %}step="{%=step%}"{% } %} class="form-control"/></div>`
iframedoc.body.appendChild(inputnumberinput);
let inputbutton = document.createElement("script");
inputbutton.setAttribute("type", "text/html")
inputbutton.setAttribute("id", "vvveb-input-button")
inputbutton.innerHTML = `<div><button class="btn btn-sm btn-primary"><i class="la {% if (typeof icon !== 'undefined') { %} {%=icon%} {% } else { %} la-plus {% } %} la-lg"></i> {%=text%}</button></div>`
iframedoc.body.appendChild(inputbutton);
let inputcssunit = document.createElement("script");
inputcssunit.setAttribute("type", "text/html")
inputcssunit.setAttribute("id", "vvveb-input-cssunitinput")
inputcssunit.innerHTML = `<div class="input-group" id="cssunit-{%=key%}"><input name="number" type="number" {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %} {% if (typeof min !== 'undefined' && min != false) { %}min="{%=min%}"{% } %} {% if (typeof max !== 'undefined' && max != false) { %}max="{%=max%}"{% } %} {% if (typeof step !== 'undefined' && step != false) { %}step="{%=step%}"{% } %} class="form-control"/><div class="input-group-append"><select class="form-control custom-select small-arrow" name="unit"><option value="em">em</option><option value="px">px</option><option value="%">%</option><option value="rem">rem</option><option value="auto">auto</option></select></div></div>`
iframedoc.body.appendChild(inputcssunit);
let property = document.createElement("script");
property.setAttribute("type", "text/html")
property.setAttribute("id", "vvveb-property")
property.innerHTML = `<div class="form-group {% if (typeof col !== 'undefined' && col != false) { %} col-sm-{%=col%} d-inline-block {% } else { %}row{% } %}" data-key="{%=key%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}>{% if (typeof name !== 'undefined' && name != false) { %}<label class="{% if (typeof inline === 'undefined' ) { %}col-sm-4{% } %} control-label" for="input-model">{%=name%}</label>{% } %}<div class="{% if (typeof inline === 'undefined') { %}col-sm-{% if (typeof name !== 'undefined' && name != false) { %}8{% } else { %}12{% } } %} input"></div></div>`
iframedoc.body.appendChild(property);
})();
JS
);
// save script
if ($this->save===true) {
$this->view->registerJs(
<<<JS
$('#$formId').on('beforeValidate', function (e) {
let html = document.getElementById('$this->frameId').contentWindow.Vvveb.Builder.getHtml();
$('#$inputId').val(html);
});
JS
);
}
// save script
if (!empty($this->save) && is_callable($this->save)) {
$callback = $this->save;
$callback(
[
'previewPath' => $this->previewPath,
'assetUrl' => $assetUrl,
'formId' => $formId,
'inputId' => $inputId,
'frameId' => $this->frameId,
'uid' => $this->uid,
'id' => $this->getId(),
'view' => $this->view
]
);
}
return
$this->form->field($this->model, $this->field)->hiddenInput(['id' => $inputId])->label(false)
.
<<<HTML
<iframe width="$this->width" height="$this->height" allowfullscreen id="$this->frameId"></iframe>
HTML;
}
}