Update
This commit is contained in:
371
public/admin/plugins/tmce/bootstrap/bootstrap-image.php
Normal file
371
public/admin/plugins/tmce/bootstrap/bootstrap-image.php
Normal file
@@ -0,0 +1,371 @@
|
||||
<?php
|
||||
include_once('conf/conf.php');
|
||||
|
||||
/* images path for file browser */
|
||||
|
||||
$get_path = parse_url($_GET['images_path']);
|
||||
$img_dir = $get_path['path']; // ex : '/dir/img/' with or without slashes
|
||||
$current_path = parse_url($_SERVER['HTTP_REFERER']);
|
||||
$img_path = '/files/media/'; // default
|
||||
if (preg_match('`^/`', $img_dir)) { // absolute url sended
|
||||
$img_path = $img_dir;
|
||||
if (!preg_match('`/$`', $img_dir)) { // add final slash if needed
|
||||
$img_path .= '/';
|
||||
}
|
||||
}
|
||||
|
||||
$root = rtrim($_SERVER['DOCUMENT_ROOT'], '/'); // remove final slash if needed
|
||||
|
||||
if (!is_file($root . $img_path . 'secure.php')) {
|
||||
$security_msg = '<body><div class="container"><p> </p><p class="alert alert-danger">Your images dir is not authorized.</p><p class="text-center">Please create an empty file named <strong><i>secure.php</i></strong> and save it into <strong><i>' . $img_path . '</i></strong> to allow access.</p></div><body>';
|
||||
}
|
||||
|
||||
if (isset($_GET['imgSrc'])) {
|
||||
$imgSrc = preg_replace('/\r|\n/', '', urldecode($_GET['imgSrc']));
|
||||
$imgAlt = preg_replace('/\r|\n/', '', urldecode($_GET['imgAlt']));
|
||||
$imgWidth = preg_replace('/\r|\n/', '', urldecode($_GET['imgWidth']));
|
||||
$imgHeight = preg_replace('/\r|\n/', '', urldecode($_GET['imgHeight']));
|
||||
$imgStyle = preg_replace('/\r|\n/', '', urldecode($_GET['imgStyle']));
|
||||
$imgResponsive = preg_replace('/\r|\n/', '', urldecode($_GET['imgResponsive']));
|
||||
$imgCode = build_image();
|
||||
} else {
|
||||
$imgSrc = str_replace('bootstrap-image.php', '', $_SERVER['SCRIPT_NAME']) . 'img/tinymce-bootstrap-plugin-small-preview.png';
|
||||
$imgAlt = '';
|
||||
$imgWidth = '';
|
||||
$imgHeight = '';
|
||||
$imgStyle = '';
|
||||
$imgResponsive = 'true';
|
||||
$imgCode = build_image();
|
||||
}
|
||||
|
||||
function build_image()
|
||||
{
|
||||
global $imgSrc;
|
||||
global $imgAlt;
|
||||
global $imgWidth;
|
||||
global $imgHeight;
|
||||
global $imgStyle;
|
||||
global $imgResponsive;
|
||||
if (@getimagesize($imgSrc) || @getimagesize($_SERVER['DOCUMENT_ROOT'] . $imgSrc)) {
|
||||
$info = new SplFileInfo($imgSrc);
|
||||
if (preg_match('`jpg|jpeg|png|gif`', strtolower($info))) {
|
||||
$img = '<img src="' . $imgSrc . '"';
|
||||
if (!empty($imgWidth)) {
|
||||
$img .= ' width="' . $imgWidth . '"';
|
||||
}
|
||||
if (!empty($imgHeight)) {
|
||||
$img .= ' height="' . $imgHeight . '"';
|
||||
}
|
||||
$imgClass = '';
|
||||
if (!empty($imgStyle)) {
|
||||
$imgClass .= $imgStyle;
|
||||
}
|
||||
if ($imgResponsive !== 'false') {
|
||||
if (empty($imgClass)) {
|
||||
$imgClass = 'img-responsive';
|
||||
} else {
|
||||
$imgClass .= ' img-responsive';
|
||||
}
|
||||
}
|
||||
if (!empty($imgClass)) {
|
||||
$img .= ' class="' . $imgClass . '"';
|
||||
}
|
||||
$img .= ' alt="' . $imgAlt . '"';
|
||||
$img .= ' />';
|
||||
|
||||
return $img;
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<link rel="stylesheet" href="<?php echo $bootstrap_css_path; ?>">
|
||||
<link rel="stylesheet" href="css/plugin.min.css">
|
||||
<link href='jquery-file-tree/jqueryFileTree.css' rel='stylesheet' type='text/css'>
|
||||
<link href="<?php echo PRISM_CSS; ?>" type="text/css" rel="stylesheet" />
|
||||
</head>
|
||||
<?php
|
||||
if (isset($security_msg)) {
|
||||
exit($security_msg);
|
||||
}
|
||||
?>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row margin-bottom-md">
|
||||
<div class="choice-title">
|
||||
<span><?php echo IMAGE; ?></span>
|
||||
</div>
|
||||
<div class="col-sm-6 text-center margin-bottom-md">
|
||||
<button type="button" class="btn btn-primary" id="browseBtn"><?php echo BROWSE; ?></button>
|
||||
</div>
|
||||
<div class="col-sm-6 text-center" id="thumb-div">
|
||||
<?php echo $imgCode; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row margin-bottom-md">
|
||||
<div class="choice-title">
|
||||
<span><?php echo IMAGE_STYLE; ?></span>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="text-center">
|
||||
<div class="choice selector select-style">
|
||||
<img src="<?php echo $imgSrc; ?>" class="" data-attr="none"><br><br>
|
||||
<label>none</label>
|
||||
</div>
|
||||
<div class="choice selector select-style">
|
||||
<img src="<?php echo $imgSrc; ?>" class="img-rounded"><br><br>
|
||||
<label>rounded</label>
|
||||
</div>
|
||||
<div class="choice selector select-style">
|
||||
<img src="<?php echo $imgSrc; ?>" class="img-circle"><br><br>
|
||||
<label>circle</label>
|
||||
</div>
|
||||
<div class="choice selector select-style">
|
||||
<img src="<?php echo $imgSrc; ?>" class="img-thumbnail"><br><br>
|
||||
<label>thumbnail</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="choice-title">
|
||||
<span><?php echo OTHERS; ?></span>
|
||||
</div>
|
||||
<div class="text-center col-xs-10 col-xs-offset-1">
|
||||
<div class="form-horizontal col-sm-4">
|
||||
<div class="form-group">
|
||||
<label class="col-xs-6 text-right"><?php echo RESPONSIVE; ?> : </label>
|
||||
<div class="btn-group btn-toggle col-xs-6" id="responsive">
|
||||
<button class="btn btn-sm btn-success active" data-attr="false"><?php echo NO; ?></button>
|
||||
<button class="btn btn-sm btn-default" data-attr="true"><?php echo YES; ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-horizontal col-sm-4">
|
||||
<div class="form-group">
|
||||
<label class="col-xs-6 text-right" id="width-label"><?php echo WIDTH; ?> :</label>
|
||||
<div class="input-group col-xs-6">
|
||||
<input type="text" class="form-control" name="img-width" id="img-width" value="<?php echo $imgWidth; ?>">
|
||||
<span class="input-group-addon">px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-horizontal col-sm-4">
|
||||
<div class="form-group">
|
||||
<label class="col-xs-6 text-right" id="height-label"><?php echo HEIGHT; ?> :</label>
|
||||
<div class="input-group col-xs-6">
|
||||
<input type="text" class="form-control" name="img-height" id="img-height" value="<?php echo $imgHeight; ?>">
|
||||
<span class="input-group-addon">px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-horizontal col-sm-8 col-sm-offset-2">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 col-xs-6 text-right" id="alt-label"><?php echo ALT_TEXT; ?> :</label>
|
||||
<div class="col-sm-8 col-xs-6">
|
||||
<input type="text" class="form-control" name="img-alt" value="<?php echo $imgAlt; ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="preview">
|
||||
<div id="preview-title" class="margin-bottom-md">
|
||||
<span class="btn-primary"><?php echo PREVIEW; ?></span>
|
||||
</div>
|
||||
<div class="col-sm-12 margin-bottom-md center-img text-center test-icon-wrapper" id="test-wrapper">
|
||||
<?php echo $imgCode; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="code-title">
|
||||
<a href="#" id="code-slide-link">code <i class="glyphicon glyphicon-arrow-up"></i></a>
|
||||
</div>
|
||||
<div class="col-sm-12 text-center" id="code-wrapper">
|
||||
<pre><?php
|
||||
echo htmlspecialchars($imgCode);
|
||||
?></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="<?php echo JQUERY_JS ?>"></script>
|
||||
<script type="text/javascript" src="<?php echo BOOTSTRAP_JS ?>"></script>
|
||||
<script type="text/javascript" src="js/utils.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.htmlClean.min.js"></script>
|
||||
<script type="text/javascript" src="jquery-file-tree/jqueryFileTree.js"></script>
|
||||
<script type="text/javascript" src="<?php echo PRISM_JS; ?>"></script>
|
||||
<script type="text/javascript">
|
||||
var imgSrc = '<?php echo $imgSrc; ?>';
|
||||
var imgAlt = '<?php echo $imgAlt; ?>';
|
||||
var imgWidth = '<?php echo $imgWidth; ?>';
|
||||
var imgHeight = '<?php echo $imgHeight; ?>';
|
||||
var imgStyle = '<?php echo $imgStyle; ?>';
|
||||
var imgResponsive = <?php echo $imgResponsive; ?>;
|
||||
var imgCode = '<?php echo $imgCode; ?>';
|
||||
var imgPath = '<?php echo $img_path; ?>';
|
||||
$.noConflict();
|
||||
jQuery(document).ready(function ($) {
|
||||
|
||||
makeResponsive();
|
||||
|
||||
/* file browser */
|
||||
|
||||
$('#file-tree-wrapper').hide();
|
||||
$('#browseBtn').on('click', function () {
|
||||
$('#file-tree-content').fileTree({ root: imgPath }, function (file) {
|
||||
openFile(file);
|
||||
});
|
||||
$('#file-tree-wrapper').fadeIn(500);
|
||||
});
|
||||
$('#file-tree-wrapper').find('.btn-default').on('click', function () {
|
||||
$('#file-tree-wrapper').fadeOut(500);
|
||||
});
|
||||
|
||||
/* image style */
|
||||
|
||||
$('.selector.select-style').each(function (event, element) {
|
||||
|
||||
/* set style on load */
|
||||
|
||||
if (imgStyle === '') {
|
||||
if ($(element).find('img').attr('data-attr') == "none") {
|
||||
$(element).addClass('active');
|
||||
}
|
||||
} else if ($(element).find('img').hasClass(imgStyle)) {
|
||||
$(element).addClass('active');
|
||||
}
|
||||
|
||||
$(element).on('click', function (event) {
|
||||
$('.selector.select-style').removeClass('active');
|
||||
imgStyle = $(this).find('img').attr('class');
|
||||
$(this).addClass('active');
|
||||
$('#test-wrapper').find('img').removeClass('img-rounded').removeClass('img-circle').removeClass('img-thumbnail').addClass(imgStyle);
|
||||
updateCode();
|
||||
});
|
||||
});
|
||||
|
||||
$('#responsive').on('click', changeImgResponsive);
|
||||
|
||||
/* on load */
|
||||
|
||||
updateCode();
|
||||
|
||||
function changeImgResponsive()
|
||||
{
|
||||
var checked = toggleBtn(this);
|
||||
if (checked) {
|
||||
imgResponsive = true;
|
||||
$('#test-wrapper').find('img').addClass('img-responsive');
|
||||
} else {
|
||||
imgResponsive = false;
|
||||
$('#test-wrapper').find('img').removeClass('img-responsive');
|
||||
}
|
||||
updateCode();
|
||||
}
|
||||
|
||||
/* change image responsive (enabled/disabled) */
|
||||
|
||||
if (imgResponsive) { // on load
|
||||
$('#responsive').trigger('click');
|
||||
}
|
||||
|
||||
/* image width / height */
|
||||
|
||||
$('#img-width').on('keyup', function () {
|
||||
changeImgSize($(this).val(), 'width');
|
||||
});
|
||||
$('#img-height').on('keyup', function () {
|
||||
changeImgSize($(this).val(), 'height');
|
||||
});
|
||||
|
||||
/* alt text */
|
||||
|
||||
$('input[name="img-alt"]').on('keyup', changeImgAlt);
|
||||
|
||||
function changeImgAlt()
|
||||
{
|
||||
imgAlt = $('input[name="img-alt"]').prop('value');
|
||||
$('#test-wrapper').find('img').attr('alt', imgAlt);
|
||||
updateCode();
|
||||
}
|
||||
|
||||
/**
|
||||
* changeImgSize
|
||||
* @param int val
|
||||
* @param string widthHeight 'width' or 'height'
|
||||
* @return void
|
||||
*/
|
||||
function changeImgSize(val, widthHeight)
|
||||
{
|
||||
if (val % 1 === 0) { // check if val is an integer
|
||||
$('#test-wrapper').find('img').attr(widthHeight, val);
|
||||
} else {
|
||||
$('#test-wrapper').find('img').removeAttr(widthHeight);
|
||||
}
|
||||
updateCode();
|
||||
}
|
||||
|
||||
function openFile(file)
|
||||
{
|
||||
var extension = file.substr( (file.lastIndexOf('.') +1) ).toLowerCase();
|
||||
switch (extension) {
|
||||
case 'jpg':
|
||||
case 'jpeg':
|
||||
case 'png':
|
||||
case 'gif':
|
||||
$('#image-file-preview').html('<img src="' + file + '" alt="">');
|
||||
$('#file-tree-wrapper').find('.btn-primary').removeAttr('disabled').on('click', function () {
|
||||
imgSrc = file;
|
||||
var img = $('<img>');
|
||||
img.attr('src', imgSrc).attr('alt', imgAlt);
|
||||
if (imgWidth !== '') {
|
||||
img.attr('width', imgWidth);
|
||||
}
|
||||
if (imgHeight !== '') {
|
||||
img.attr('width', imgHeight);
|
||||
}
|
||||
if (imgStyle !== '') {
|
||||
img.addClass(imgStyle);
|
||||
}
|
||||
if (imgResponsive) {
|
||||
img.addClass('img-responsive');
|
||||
}
|
||||
$('#thumb-div').html($('#image-file-preview').html());
|
||||
$('#test-wrapper').html(img);
|
||||
updateCode();
|
||||
$('#file-tree-wrapper').fadeOut(500);
|
||||
$('#image-file-preview').find('.btn-primary').attr('disabled');
|
||||
});
|
||||
break;
|
||||
default:
|
||||
$('#image-file-preview').html('<p class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><?php echo PLEASE_CHOOSE_AN_IMAGE ?></p>');
|
||||
$('#image-file-preview').find('.btn-primary').attr('disabled');
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div id="file-tree-wrapper">
|
||||
<div id="file-tree">
|
||||
<div id="file-tree-content"></div>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
<div class="choice-title margin-bottom-md">
|
||||
<span class="btn-primary"><?php echo PREVIEW; ?></span>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div id="image-file-preview"></div>
|
||||
<div class="btn-group pull-right">
|
||||
<button type="button" class="btn btn-primary" disabled="disabled"><?php echo OK; ?></button>
|
||||
<button type="button" class="btn btn-default"><?php echo CANCEL; ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user