This commit is contained in:
2026-05-13 17:11:09 +02:00
commit ea63897455
2785 changed files with 359868 additions and 0 deletions

View File

@@ -0,0 +1,170 @@
<?php
include_once('conf/conf.php');
?>
<!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="<?php echo PRISM_CSS; ?>" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row margin-bottom-md">
<div class="choice-title">
<span><?php echo BREAKPOINT; ?></span>
</div>
<div class="col-md-12">
<div class="text-center">
<a href="#" class="breakpoint-tooltip" data-toggle="tooltip" data-placement="bottom" title="<?php echo BLOCKS_WILL_BE_STACKED_ON_XS_DEVICES; ?>"><div class="choice selector select-breakpoint" data-attr="col-xs"><span class="bootstrap-icon-phone prepend"></span>xs</div></a>
<a href="#" class="breakpoint-tooltip" data-toggle="tooltip" data-placement="bottom" title="<?php echo BLOCKS_WILL_BE_STACKED_ON_XS_SMALL_DEVICES; ?>"><div class="choice selector select-breakpoint" data-attr="col-sm"><span class="bootstrap-icon-tablet prepend"></span>sm</div></a>
<a href="#" class="breakpoint-tooltip" data-toggle="tooltip" data-placement="bottom" title="<?php echo BLOCKS_WILL_BE_STACKED_ON_XS_SMALL_MEDIUM_DEVICES; ?>"><div class="choice selector select-breakpoint" data-attr="col-md"><span class="bootstrap-icon-tablet-landscape prepend"></span>md</div></a>
<a href="#" class="breakpoint-tooltip" data-toggle="tooltip" data-placement="bottom" title="<?php echo BLOCKS_WILL_NEVER_BE_STACKED; ?>"><div class="choice selector select-breakpoint" data-attr="col-lg"><span class="bootstrap-icon-screen prepend"></span>lg</div></a>
</div>
</div>
</div>
<div class="row margin-bottom-md" id="cols">
<div class="choice-title">
<span><?php echo COLS; ?></span>
</div>
<div class="row col-sm-12"><p class="alert alert-info text-center col-sm-6 col-sm-offset-3"><?php echo DRAG_DROP_ELEMENTS_TO_PREVIEW; ?></p></div>
<div class="col-xs-1"><p>1/12</p></div>
<div class="col-xs-2"><p>2/12</p></div>
<div class="col-xs-3"><p>3/12</p></div>
<div class="col-xs-4"><p>4/12</p></div>
<div class="col-xs-5"><p>5/12</p></div>
<div class="col-xs-6"><p>6/12</p></div>
<div class="col-xs-7"><p>7/12</p></div>
<div class="col-xs-8"><p>8/12</p></div>
<div class="col-xs-9"><p>9/12</p></div>
<div class="col-xs-10"><p>10/12</p></div>
<div class="col-xs-11"><p>11/12</p></div>
<div class="col-xs-12"><p>12/12</p></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="row margin-bottom-md dropzone" id="test-wrapper">
<div class="row"><h2><?php echo DROP_ELEMENTS_HERE; ?></h2></div>
</div>
</div>
<div class="row margin-bottom-md">
<div class="choice-title margin-bottom-md">
<span><?php echo TIPS_TEMPLATE; ?></span>
</div>
<div class="col-xs-12">
<span><?php echo TIPS_TEMPLATE_CONTENT; ?></span>
</div>
</div>
<div class="row">
<div id="code-title">
<a href="#" id="code-slide-link"><?php echo CODE; ?> <i class="glyphicon glyphicon-arrow-up"></i></a>
</div>
<div class="col-sm-12" id="code-wrapper">
<pre></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/colorpicker.min.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="js/iconset/iconset-glyphicon.min.js"></script>
<script type="text/javascript" src="js/bootstrap-iconpicker.min.js"></script>
<script type="text/javascript" src="<?php echo PRISM_JS; ?>"></script>
<script type="text/javascript">
var breakpoint = 'col-xs';
var newBreakpoint = 'col-xs';
/* add property for drop and data transfer */
jQuery.event.props.push('dataTransfer');
$.noConflict();
jQuery(document).ready(function ($) {
makeResponsive();
getBootstrapStyles();
$('a[data-toggle="tooltip"]').tooltip();
/* breakpoint */
$('.selector.select-breakpoint').each(function (event, element) {
/* set style on load */
if ($(element).attr('data-attr') =="col-xs") {
$(element).addClass('active');
}
$(element).on('click', function (event) {
newBreakpoint = $(this).attr('data-attr');
$('.selector.select-breakpoint').removeClass('active');
$(this).addClass('active');
updateClasses(breakpoint);
updateCode();
});
});
$('#cols div').attr('draggable','true').on({
dragstart: function (e) {
$(this).css('opacity', '0.5');
/* store data to transfer */
e.dataTransfer.setData('text', '.' + $(this).attr('class'));
},
dragenter: function (e) {
e.preventDefault();
},
dragleave: function () {
},
dragover: function (e) {
e.preventDefault();
},
dragend: function () {
$(this).css('opacity', '1');
}
});
makeDropable('#test-wrapper');
function makeDropable(element)
{
$(element).on({
dragenter: function (e) {
e.preventDefault();
},
dragover: function (e) {
e.preventDefault();
$('#test-wrapper div.row h2').animate({opacity: "-=2"}, 500,function () {
$(this).remove();
});
return false;
},
drop: function (e) {
e.preventDefault();
var data = e.dataTransfer.getData('text');
data = $('#cols').find(data).clone().css('opacity', '1').wrap('<div>').parent().html();
var newElement = $(this).find('div.row').append(data);
updateClasses('col-xs');
$(newElement).sortable({
callback: updateCode
});
updateCode();
}
});
}
function updateClasses(bpt)
{
$('#test-wrapper').find('div[class^="' + bpt + '"]').each(function () {
var oldClass = $(this).attr('class');
var newClass = oldClass.replace(bpt, newBreakpoint);
$(this).removeClass(oldClass).addClass(newClass);
});
breakpoint = newBreakpoint;
}
});
</script>
</body>
</html>