Browse Source

Version pour 3.3 (sans jqueryui)

v2 v1.2.0
ARNO* 1 year ago
parent
commit
89f98ae0d0
  1. 8
      centre_image_fonctions.php
  2. 102
      centre_image_gestion.js
  3. 6
      imgs/croix-centre-image.svg
  4. 5
      paquet.xml

8
centre_image_fonctions.php

@ -283,8 +283,12 @@ function centre_image_visage($fichier) {
* @return string
**/
function centre_image_header_prive($flux) {
$flux .= "\n<script type='text/javascript' src='".find_in_path("centre_image_gestion.js")."'></script>\n";
$flux .= "\n<script>var croix = '".find_in_path("imgs/croix-centre-image.png")."'</script>";
$flux .= "\n<script type='text/javascript' src='".timestamp(find_in_path("prive/javascript/Sortable.min.js"))."'></script>\n";
$flux .= "\n<script type='text/javascript' src='".timestamp(find_in_path("centre_image_gestion.js"))."'></script>\n";
$flux .= "\n<script>var croix = '".timestamp(find_in_path("imgs/croix-centre-image.svg"))."'</script>";
$flux .= "<style>
.croix_centre_image {cursor: move;touch-action: none;-webkit-user-drag: none; position: absolute; margin-left: -15px; margin-top: -15px; width: 30px; height:30px; background:transparent!important;}
</style>";
return $flux;
}

102
centre_image_gestion.js

@ -1,15 +1,105 @@
var centre_image_pos_gauche = 0;
var centre_image_pos_gauche_init = 0;
var centre_image_pos_haut = 0;
var centre_image_pos_haut_init = 0;
var t_centre_actif;
var centre_image_x_init = 0;
var centre_image_x_max;
var centre_image_y_init = 0;
var centre_image_y_max;
$(document).on("click", ".lity_bloquer", function(){ return false;})
$(document).on("touchstart MSPointerDown pointerdown mousedown", "img.croix_centre_image", function(e){
var event = e.originalEvent;
event.preventDefault();
event.stopPropagation();
var t = $(this);
// Casse-pied: bloquer le comportement de la lightbox Lity
t.parents("a").addClass("lity_bloquer").removeClass("lity-enabled");
t_centre_actif = t;
centre_image_pos_gauche_init = event.pageX || event.targetTouches[0].pageX;
centre_image_pos_haut_init = event.pageY || event.targetTouches[0].pageY;
centre_image_pos_gauche = centre_image_pos_gauche_init;
centre_image_pos_haut = centre_image_pos_haut_init;
x_init = parseInt(t.css("left"));
x_max = t.parent().width() ;
y_init = parseInt(t.css("top"));
y_max = t.parent().height();
}).on("touchmove MSPointerMove pointermove mousemove", function(e){
if (t_centre_actif) {
var event = e.originalEvent;
centre_image_pos_gauche = event.pageX || event.targetTouches[0].pageX;
centre_image_pos_haut = event.pageY || event.targetTouches[0].pageY;
var decal = parseInt(centre_image_pos_gauche) - parseInt(centre_image_pos_gauche_init);
var decalY = parseInt(centre_image_pos_haut) - parseInt(centre_image_pos_haut_init);
var x = x_init+decal;
x = Math.max(0, x);
x = Math.min(x, x_max);
var y = y_init+decalY;
y = Math.max(0, y);
y = Math.min(y, y_max);
t_centre_actif.css("left", x+"px").css("top", y+"px");
event.preventDefault();
}
}).on("touchend MSPointerUp pointerup mouseup", function(e){
if (t_centre_actif) {
var event = e.originalEvent;
e.preventDefault();
e.stopPropagation();
var el = t_centre_actif.parent("a");
var lien = el.attr("href");
var url = lien.replace(/^\.\.\//, '');
url = url.split('?').shift();
var x = parseInt(t_centre_actif.css("left")) / x_max;
var y = parseInt(t_centre_actif.css("top")) / y_max;
x = Math.max(0, x);
x = Math.min(1, x);
y = Math.max(0, y);
y = Math.min(1, y);
$.ajax("index.php?action=centre_image_forcer&x="+x+"&y="+y+"&url="+url);
t_centre_actif = false;
setTimeout(function(){
el.removeClass("lity_bloquer").addClass("lity-enabled");
}, 100);
}
})
function centre_image_croix(el, x, y) {
if (el.find("img.croix_centre_image").length == 0) {
el.css("display", "inline-block").css("position", "relative")
.find("img").addClass("img_source").css("border", "1px solid green")
.find("img").addClass("img_source").css("outline", "1px solid green").css("display", "block")
.parent()
.prepend("<img src='"+croix+"' class='croix_centre_image' style='cursor: move; position: absolute; margin-left: -7px; margin-top: -7px; margin-right: -7px; margin-bottom: -7px;background:transparent;'>");
.prepend("<img src='"+croix+"' class='croix_centre_image'>");
}
el.find("img.croix_centre_image").css("left", x+"px").css("top", y+"px")
.draggable({
el.find("img.croix_centre_image").css("left", x+"px").css("top", y+"px");
/*
new Sortable(el[0],{
containment: "parent",
stop: function(event, ui) {
draggable: "img.croix_centre_image",
onChange: function(event, ui) {
var lien = el.attr("href");
var url = lien.replace(/^\.\.\//, '');
url = url.split('?').shift();
@ -28,6 +118,7 @@ function centre_image_croix(el, x, y) {
$.ajax("index.php?action=centre_image_forcer&x="+x+"&y="+y+"&url="+url);
}
});
*/
}
function centre_image_calculer_croix(el) {
@ -46,6 +137,7 @@ jQuery.fn.centre_images = function() {
var lien = $(this).attr("href");
var url = lien.replace(/^\.\.\//, '');
url = url.split('?').shift();
if ($(this).parents(".spip_documents").length == 0) {
$(this).attr("data-root-url", url);

6
imgs/croix-centre-image.svg

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M8.987,6.013L8.987,0L6.013,0L6.013,6.013L0,6.013L0,8.987L6.013,8.987L6.013,15L8.987,15L8.987,8.987L15,8.987L15,6.013L8.987,6.013Z" style="fill:white;"/>
<path d="M8.014,6.986L8.014,0.999L6.986,0.999L6.986,6.986L0.999,6.986L0.999,8.014L6.986,8.014L6.986,14.001L8.014,14.001L8.014,8.014L14.001,8.014L14.001,6.986L8.014,6.986Z"/>
</svg>

After

Width:  |  Height:  |  Size: 794 B

5
paquet.xml

@ -1,9 +1,9 @@
<paquet
prefix="centre_image"
categorie="multimedia"
version="1.1.0"
version="1.2.0"
etat="stable"
compatibilite="[3.0.19;3.3.*]"
compatibilite="[3.2.99;3.3.*]"
logo="prive/themes/spip/images/centre_image-64.png"
documentation="https://23forward.com/Plugin-centre_image"
>
@ -16,6 +16,5 @@
<licence lien="http://www.gnu.org/licenses/gpl-3.0.html">GPL</licence>
<necessite nom="medias" compatibilite="[2.7.64;[" />
<pipeline nom="header_prive" action="header_prive" />
<pipeline nom="jqueryui_plugins" action="jqueryui_plugins" />
</paquet>
Loading…
Cancel
Save