static function bootstrap()
{
// include libs
$whichend = is_backend() ? 'backend' : 'frontend';
// jquery-ui
if (!Asset::checkAssetAdded('jquery-ui', 'js', $whichend)) {
$js = "<script src='" . uri('libraries/jquery-ui/jquery-ui.min.js', false) . "'></script>";
Asset::addDynamicAsset('jquery-ui', 'js', $whichend, $js);
}
if (!Asset::checkAssetAdded('jquery-ui', 'css', $whichend)) {
$js = "<link rel=\"stylesheet\" href=\"" . uri('libraries/jquery-ui/jquery-ui.theme.min.css', false) . "\">";
$js .= "\n<link rel=\"stylesheet\" href=\"" . uri('libraries/jquery-ui/jquery-ui.structure.min.css', false) . "\">";
Asset::addDynamicAsset('jquery-ui', 'css', $whichend, $js);
}
}
public function render($module, $model)
{
$rtn = "";
$prepopulate = '($object->isNew() ? ' . "(isset(\$_POST['{$this->name}']) ? htmlentities(\$_POST['{$this->name}']) : '')" . ' : htmlentities($object->get' . format_as_class_name($this->name) . '()))';
$rtn .= "\n<div class='form-group'>\r\n <label for='{$this->name}'>{$this->name}</label>\r\n <textarea class='form-control' rows='5' id='{$this->name}' name='{$this->name}'" . ($this->required ? ' required' : '') . ">[[[ echo {$prepopulate} ]]]</textarea>\r\n</div>\r\n";
// ckeditor
if ($this->wysiwyg) {
if (!Asset::checkAssetAdded('ckeditor', 'js', 'backend')) {
$js = "\n<script type='text/javascript' src='" . uri('libraries/ckeditor/ckeditor.js', false) . "'></script>\n";
Asset::addDynamicAsset('ckeditor', 'js', 'backend', $js);
$rtn .= $js;
}
$rtn .= "<script type='text/javascript'>CKEDITOR.replace('{$this->name}');</script>";
}
return $rtn;
}
public function render($module, $model)
{
$rtn = "";
$rtn .= "\n<div class='form-group' id='{$this->name}'>\r\n <label class='col-sm-2 control-label'>{$this->name} " . ($this->required ? $this->mandatory_field : '') . "</label>\r\n <div class='col-sm-10'>\r\n <textarea name='{$this->name}' style='display: none;'></textarea>\r\n <div class='file-fields'" . ($this->multiple ? " style='border: 1px solid #999; padding: 6px;'" : "") . "></div>\r\n" . ($this->multiple ? " <button style='margin-top:6px;' class='add btn btn-primary btn-sm' type='button'>[[[ echo i18n(array('en' => 'Add image', 'zh' => '添加图片')) ]]]</button>" : "") . "\r\n </div>\r\n</div>\r\n<div class='hr-line-dashed'></div>\r\n";
$rtn .= "\r\n[[[\r\n // get json string of prepopulated image links\r\n \$prepopulate = \$object->isNew() ? '' : \$object->get" . format_as_class_name($this->name) . "();\r\n if (\$prepopulate != '') {\r\n \$tokens = explode(\"\\n\", trim(\$prepopulate));\r\n \$prepopulate = array();\r\n foreach (\$tokens as \$token) {\r\n \$prepopulate[] = trim(\$token, \"\\n\\r\");\r\n }\r\n }\r\n]]]\r\n";
// include jquery-ui, when we've got multiple images
if ($this->multiple) {
if (!Asset::checkAssetAdded('jquery-ui', 'js', 'backend')) {
$js = "\n<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js'></script>\n";
Asset::addDynamicAsset('jquery-ui', 'js', 'backend', $js);
$rtn .= $js;
}
}
// js
$rtn .= "\n<script>\r\n \$(function(){\r\n var container = \$('#{$this->name}');\r\n" . ($this->multiple ? "\r\n \$('.file-fields', container).sortable({\r\n update: function(event, ui) {updateHiddenTextarea(container);}\r\n });\r\n" : "") . "\r\n // initial value to pop\r\n var initial_images = [[[ echo \$prepopulate == '' ? '\"\"' : json_encode(\$prepopulate); ]]];\r\n if (initial_images != '') {\r\n for (var i in initial_images) {\r\n img = initial_images[i];\r\n var html = addImageRow(img, false);\r\n \$('.file-fields', container).append(html);\r\n }\r\n } else {\r\n var html = addImageRow(false, true);\r\n \$('.file-fields', container).append(html);\r\n }\r\n\r\n updateHiddenTextarea(container);\r\n // action when click select file button\r\n \$(document).on('click', '#{$this->name} .select', function(){\r\n var tr = \$(this).parents('.file-field');\r\n \$('input[type=file]', tr).click();\r\n \$('.upload', tr).prop('disabled', false);\r\n });\r\n // action when file filed is changed (we do validation here)\r\n \$(document).on('change', '#{$this->name} input[type=file]', function(){\r\n var tr = \$(this).parents('.file-field');\r\n var file = this.files[0];\r\n if (!file.type.match(/^image/)) {\r\n alert('[[[ echo i18n(array('en' => 'Upload file needs to be an image file', 'zh' => '上传文件需为图片文件')) ]]]');\r\n } else if (file.size > (1 * 1000 * 1000)) {\r\n alert('[[[ echo i18n(array('en' => 'File size should be less than', 'zh' => '文件大小应小于')) . ' 2MB' ]]]');\r\n } else {\r\n var reader = new FileReader();\r\n reader.onload = (function(e){\r\n \$('.preview', tr).html('<img src=\"'+e.target.result+'\" style=\"height:150px;\" />');\r\n });\r\n reader.readAsDataURL(this.files[0]);\r\n }\r\n });\r\n // action when adding an new image row\r\n \$(document).on('click', '#{$this->name} .add', function(){\r\n var html = addImageRow(false, true);\r\n \$('.file-fields', container).append(html);\r\n });\r\n // action when uploading image via ajax\r\n \$(document).on('click', '#{$this->name} .upload', function(){\r\n var tr = \$(this).parents('.file-field');\r\n var file_field = \$('input[type=file]', tr);\r\n var file = file_field[0].files[0];\r\n\r\n var formData = new FormData();\r\n formData.append('file', file, file.name);\r\n \$('.btn', tr).prop('disabled', true);\r\n \$('.upload i', tr).removeClass('fa-upload').addClass('fa-spin').addClass('fa-spinner');\r\n \$.ajax({\r\n url: '[[[ echo uri(\"modules/{$module}/controllers/backend/" . $model . "_form_field_{$this->name}.php\" ,false) ]]]',\r\n type: 'POST',\r\n data: formData,\r\n cache: false,\r\n dataType: 'json',\r\n processData: false, // Don't process the files\r\n contentType: false, // Set content type to false as jQuery will tell the server its a query string request\r\n success: function(data, textStatus, jqXHR) {\r\n if (typeof(data.error) !== 'undefined') {\r\n alert('[[[ echo i18n(array('en' => 'Error: ', 'zh' => '错误: ')) ]]]' + data.error);\r\n } else {\r\n tr.html(addImageRow(data.uri, false));;\r\n \$('.remove',tr).data('uri', data.uri);\r\n updateHiddenTextarea(container);\r\n }\r\n \$('.btn', tr).prop('disabled', false);\r\n \$('.upload i', tr).removeClass('fa-spin').removeClass('fa-spinner').addClass('fa-upload');\r\n },\r\n error: function(jqXHR, textStatus, errorThrown) {\r\n alert('[[[ echo i18n(array('en' => 'ajax error: ', 'zh' => 'ajax失败')) ]]]: ' + textStatus);\r\n \$('.btn', tr).prop('disabled', false);\r\n \$('.upload i', tr).removeClass('fa-spin').removeClass('fa-spinner').addClass('fa-upload');\r\n }\r\n });\r\n });\r\n // action when removing an image\r\n \$(document).on('click', '#{$this->name} .remove', function(){\r\n var tr = \$(this).parents('.file-field');\r\n if (typeof(\$(this).data('uri')) !== 'undefined') {\r\n var img = \$(this).data('uri');\r\n \$('.btn', tr).prop('disabled', true);\r\n \$('.remove i', tr).addClass('fa-spin').addClass('fa-spinner').removeClass('fa-remove');\r\n // ajax to remove the image\r\n \$.ajax({\r\n url: '[[[ echo uri(\"modules/{$module}/controllers/backend/" . $model . "_form_field_{$this->name}\".\"_remove.php\" ,false) ]]]?path=' + encodeURIComponent(img),\r\n type: 'POST',\r\n dataType: 'json',\r\n success: function(data, textStatus, jqXHR) {\r\n if (typeof(data.error) !== 'undefined') {\r\n alert('[[[ echo i18n(array('en' => 'Error: ', 'zh' => '错误: ')) ]]]' + data.error);\r\n" . (!$this->multiple ? "tr.html(addImageRow(false, true));" : "tr.fadeOut(function(){tr.remove();});") . "\r\n updateHiddenTextarea(container);\r\n } else {\r\n" . (!$this->multiple ? "tr.html(addImageRow(false, true));" : "tr.fadeOut(function(){tr.remove();});") . "\r\n updateHiddenTextarea(container);\r\n }\r\n },\r\n error: function(jqXHR, textStatus, errorThrown) {\r\n alert('[[[ echo i18n(array('en' => 'ajax error: ', 'zh' => 'ajax失败')) ]]]: ' + textStatus);\r\n \$('.btn', tr).prop('disabled', false);\r\n \$('.remove i', tr).removeClass('fa-spin').removeClass('fa-spinner').addClass('fa-remove');\r\n updateHiddenTextarea(container); \r\n }\r\n });\r\n } else {\r\n" . ($this->multiple ? "tr.fadeOut();" : "") . "\r\n }\r\n });\r\n\r\n // functions\r\n function addImageRow(img, isnew) {\r\n var img_html = img ? '<img src=\"/[[[ echo get_sub_root() ]]]'+img+'\" style=\"height:150px;\" />' : '<div style=\"height:150px;width:200px;background-color:#AAA;\"></div>';\r\n var upload_button = isnew ? \r\n '<button type=\"button\" class=\"btn btn-default btn-sm upload\" disabled><i class=\"fa fa-upload\"></i></button>' :\r\n '<!-- <button type=\"button\" class=\"btn btn-default btn-sm upload\" disabled><i class=\"fa fa-upload\"></i></button> -->';\r\n var select_button = isnew ?\r\n '<button type=\"button\" class=\"btn btn-default btn-sm select\"><i class=\"fa fa-file\"></i></button>' :\r\n '<!-- <button type=\"button\" class=\"btn btn-default btn-sm select\"><i class=\"fa fa-file\"></i></button> -->';\r\n var data_uri = isnew ? '' : 'data-uri=\"'+img+'\"';\r\n return ('\\n\\\r\n <div class=\"file-field\" style=\"margin-bottom:6px; position:relative;\">\\n\\\r\n <div class=\"preview\">'+img_html+'</div>\\n\\\r\n <div class=\"btn-group\" style=\"position:absolute; bottom:5px; left:5px; \" aria-label=\"...\">\\n\\\r\n <input type=\"file\" class=\"btn btn-default btn-sm\" style=\"display:none;\" />\\n\\\r\n '+select_button+'\\n\\\r\n '+upload_button+'\\n\\\r\n <button type=\"button\" class=\"btn btn-default btn-sm remove\" '+data_uri+'><i class=\"fa fa-remove\"></i></button>\\n\\\r\n </div>\\n\\\r\n </div>');\r\n }\r\n\r\n function updateHiddenTextarea(container) {\r\n var html = '';\r\n \$('.preview img', container).each(function(){\r\n var uri = \$(this).attr('src');\r\n // remove subroot\r\n var subroot = '[[[ echo get_sub_root() ]]]';\r\n uri = uri.substr(subroot.length+1, uri.length-1);\r\n html = html + uri + " . '"\\n"' . ";\r\n });\r\n \$('textarea', container).val(html);\r\n }\r\n });\r\n</script>\r\n";
return $rtn;
}
public function render($module, $model)
{
$rtn = "";
$prepopulate = '($object->isNew() ? ' . "(isset(\$_POST['{$this->name}']) ? htmlentities(\$_POST['{$this->name}']) : '')" . ' : htmlentities($object->get' . format_as_class_name($this->name) . '()))';
$rtn .= "\n<div class='form-group'>\r\n <label class='col-sm-2 control-label' for='{$this->name}'>{$this->name} " . ($this->required ? $this->mandatory_field : '') . "</label>\r\n <div class='col-sm-10'>\r\n <textarea class='form-control' rows='5' id='{$this->name}' name='{$this->name}'" . ($this->required ? ' required' : '') . ">[[[ echo {$prepopulate} ]]]</textarea>\r\n </div>\r\n</div>\r\n<div class='hr-line-dashed'></div>\r\n";
// ckeditor
if ($this->wysiwyg) {
if (!Asset::checkAssetAdded('ckeditor', 'js', 'backend')) {
$js = "\n<script type='text/javascript' src='" . uri('libraries/ckeditor/ckeditor.js', false) . "'></script>\n";
Asset::addDynamicAsset('ckeditor', 'js', 'backend', $js);
$rtn .= $js;
}
$toolbar = false;
if ($this->wysiwyg_toolbar) {
$toolbar_name = "TOOLBAR_" . strtoupper($this->wysiwyg_toolbar);
$toolbar = constant("self::{$toolbar_name}");
}
$rtn .= "<script type='text/javascript'>CKEDITOR.replace('{$this->name}'" . ($toolbar ? ", {$toolbar}" : "") . ");</script>";
}
return $rtn;
}
<?php
// include jquery-ui library if not
if (is_frontend()) {
$already_included_at_frontend = Asset::checkAssetAdded('jquery-ui', 'js', 'frontend') || Asset::checkAssetAdded('jquery_ui', 'js', 'frontend');
if (!$already_included_at_frontend) {
echo "\n" . '<script type="text/javascript" src="' . uri('modules/core/assets/jquery-ui-1.11.4.custom/jquery-ui.min.js') . '"></script>' . "\n";
echo "\n" . '<script type="text/javascript">loadCSS("' . uri('modules/core/assets/jquery-ui-1.11.4.custom/jquery-ui.min.css') . '")</script>' . "\n";
Asset::addDynamicAsset('jquery_ui', 'js', 'frontend', '<script type="text/javascript" src="' . uri('modules/core/assets/jquery-ui-1.11.4.custom/jquery-ui.min.js') . '"></script>');
}
} else {
if (is_backend()) {
$already_included_at_backend = Asset::checkAssetAdded('jquery-ui', 'js', 'backend') || Asset::checkAssetAdded('jquery_ui', 'js', 'backend');
if (!$already_included_at_backend) {
echo "\n" . '<script type="text/javascript" src="' . uri('modules/core/assets/jquery-ui-1.11.4.custom/jquery-ui.min.js') . '"></script>' . "\n";
echo "\n" . '<script type="text/javascript">loadCSS("' . uri('modules/core/assets/jquery-ui-1.11.4.custom/jquery-ui.min.css') . '")</script>' . "\n";
Asset::addDynamicAsset('jquery_ui', 'js', 'backend', '<script type="text/javascript" src="' . uri('modules/core/assets/jquery-ui-1.11.4.custom/jquery-ui.min.js') . '"></script>');
}
}
}
?>
<script type='text/javascript'>
$('#69Wf0 .datepicker').datepicker({
dateFormat: '@'
,altField: "#69Wf0 .altFormat", altFormat: "yy-mm-dd"
,changeMonth: 1
,changeYear: 1
,yearRange: 'c-5:c+10'
});
$('#69Wf0 .input-group-addon').css('cursor', 'pointer').on('click', function(){
$('#69Wf0 .datepicker').datepicker('show');
static function bootstrap($name)
{
// include libs
$whichend = is_backend() ? 'backend' : 'frontend';
// jquery-ui
if (!Asset::checkAssetAdded('jquery-ui', 'js', $whichend)) {
$js = "<script src='" . uri('libraries/jquery-ui/jquery-ui.min.js', false) . "'></script>";
Asset::addDynamicAsset('jquery-ui', 'js', $whichend, $js);
}
if (!Asset::checkAssetAdded('jquery-ui', 'css', $whichend)) {
$js = "<link rel=\"stylesheet\" href=\"" . uri('libraries/jquery-ui/jquery-ui.theme.min.css', false) . "\">\n";
$js .= " <link rel=\"stylesheet\" href=\"" . uri('libraries/jquery-ui/jquery-ui.structure.min.css', false) . "\">";
Asset::addDynamicAsset('jquery-ui', 'css', $whichend, $js);
}
// plupload
if (!Asset::checkAssetAdded('plupload', 'js', $whichend)) {
$js = "<script type='text/javascript' src='" . uri('libraries/plupload/js/plupload.full.min.js', false) . "'></script>";
Asset::addDynamicAsset('plupload', 'js', $whichend, $js);
}
// plupload queue js
if (!Asset::checkAssetAdded('plupload_queue', 'js', $whichend)) {
$js = "<script type='text/javascript' src='" . uri('libraries/plupload/js/jquery.plupload.queue/jquery.plupload.queue.min.js', false) . "'></script>";
Asset::addDynamicAsset('plupload_queue', 'js', $whichend, $js);
}
// plupload queue css
if (!Asset::checkAssetAdded('plupload_queue', 'css', $whichend)) {
$css = "<link type='text/css' rel='stylesheet' href='" . uri('libraries/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css') . "' media='screen' />";
Asset::addDynamicAsset('plupload_queue', 'css', $whichend, $css);
}
// plupload language js
if (!Asset::checkAssetAdded('plupload_i18n', 'js', $whichend)) {
$js = "<script type='text/javascript' src='" . uri('libraries/plupload') . "/js/i18n/" . (get_language() == 'zh' ? 'zh_CN' : 'en') . ".js'></script>";
Asset::addDynamicAsset('plupload_i18n', 'js', $whichend, $js);
}
// plupload markup css
if (!Asset::checkAssetAdded('plupload_markup', 'css', $whichend)) {
$css = '<!-- plupload markup style -->
<style>
.file-container {height:auto;border:none;box-shadow:none;list-style:none;}
.file-container:after {content:" ";display:table;clear:both;*zoom: 1;}
.uploaded-file {margin-bottom:5px;margin-right:5px;float:left;padding:2px;border:1px solid #DDD;width:85px;height:110px;background-color:#FFF;}
.uploaded-file a {display:block;width:80px;height:80px;overflow:hidden;color:#666;text-align:center;line-height:80px;}
.uploaded-file button {display:block;width:80px;height:20px;text-align:center;margin-top:3px;}
</style>';
Asset::addDynamicAsset('plupload_markup', 'css', $whichend, $css);
}
// plupload markup js
if (!Asset::checkAssetAdded('plupload_markup', 'js', $whichend)) {
$js = '<!-- js functions for plupload file widget -->
<script type="text/javascript">
function textareaToFilelist(textarea, max_file_number) {
// build the list
textarea.hide();
var formGroup = textarea.parents(\'.form-group\').first();
var content = jQuery.trim(textarea.val());;
var files = content.split("\\n");
// remove and rebuild file container
$(\'.file-container\', formGroup).remove();
var container = $(\'<ul class="form-control file-container"></ul>\');
for (i in files) {
var file = files[i];
if (file == \'\') {
break;
}
// get file name
var tokens = file.split(\'/\');
var fileName = tokens[tokens.length-1];
var cell = \'\';
tokens = fileName.split(\'.\');
var extension = tokens[tokens.length-1];
var extension_icon = \'\';
switch (extension.toLowerCase()) {
case \'doc\':
case \'docx\':
extension_icon = \'word\'; break;
case \'pdf\':
extension_icon = \'pdf\'; break;
case \'txt\':
extension_icon = \'text\'; break;
case \'csv\':
case \'xls\':
extension_icon = \'excel\'; break;
case \'zip\':
case \'rar\':
extension_icon = \'archive\'; break;
case \'mp3\':
extension_icon = \'audio\'; break;
case \'mp4\':
case \'flv\':
extension_icon = \'video\'; break;
}
extension_icon = \'<i class="fa fa-file-\'+extension_icon+\'-o"></i>\';
if (tokens[tokens.length-1].match(/(jpg|jpeg|png|gif)/i)) {
cell = \'<a style="background:#EEE url(\'+"/"+site.settings.subroot+(site.settings.subroot == "" ? "" : "/")+file+\') center no-repeat;background-size:contain" target=_blank href="\'+"/"+site.settings.subroot+(site.settings.subroot == "" ? "" : "/")+file+\'"></a>\';
} else {
cell = \'<a style="background:#EEE;font-size:45px;" target=_blank href="\'+"/"+site.settings.subroot+(site.settings.subroot == "" ? "" : "/")+file+\'">\'+extension_icon+\'</a>\';
}
// build file item
var regx = \'/\'+extension+\'/gi\'; // regx to replace extension
container.append(
$(\'<li id="\'+tokens[0]+\'_uploaded" class="uploaded-file">\'+cell+\'<button data-furi="\'+file+\'" class="delete btn btn-xs btn-danger"><i class="fa fa-trash"></i></button></li>\')
);
}
textarea.after(container);
// add addMore button if not exist
if ($(\'.addMore\', formGroup).length == 0) {
container.after(
$(\'<div class="form-control" style="border:none;box-shadow:none;"><button style="display:none;" class="addMore btn btn-sm btn-primary"><i class="fa fa-plus"></i> ' . i18n(array("en" => "Add new file", "zh" => "添加新文件")) . '</button></div>\')
);
$(\'.addMore\', formGroup).on(\'click\', function(){
$(this).fadeOut(function(){
$(\'.uploader\', formGroup).fadeIn();
});
return false;
});
}
container.sortable({
update: function(event, ui){
filelistToTextarea(container, max_file_number);
}
});
container.disableSelection();
checkMaxItemReached(max_file_number, textarea, $(\'.addMore\', formGroup), $(\'.uploader\', formGroup));
}
function filelistToTextarea(filelist, max_file_number) {
var content = "";
$(\'.delete\', filelist).each(function(){
content += $(this).data(\'furi\') + "\\n";
});
content = jQuery.trim(content);
var formGroup = filelist.parents(\'.form-group\').first();
var textarea = $(\'textarea\', formGroup);
textarea.val(content);
checkMaxItemReached(max_file_number, textarea, $(\'.addMore\', formGroup), $(\'.uploader\', formGroup));
}
function checkMaxItemReached(max, textarea, addButton, uploader) {
var content = jQuery.trim(textarea.val());;
var files = content.split("\\n");
if (max > files.length || (files.length == 1 && files[0] == "")) {
addButton.show();
uploader.hide();
} else {
addButton.fadeOut(function(){
uploader.fadeOut();
});
}
}
</script>
<!-- END OF js functions for plupload file widget -->';
Asset::addDynamicAsset('plupload_markup', 'js', $whichend, $js);
}
}
