Changeset 33152 in spip-zone for _plugins_/insertion_modele


Ignore:
Timestamp:
Nov 23, 2009, 9:57:10 AM (11 years ago)
Author:
zeraxp@…
Message:
  • ajout de l'icone pour porte plume
  • liste de toutes les images du site
  • ajout de texte d'aide pour l'utilisation
  • pagination sur les images de la modale
  • utilisation de "prettyphoto" et pas fancybox pour la partie publique ( possible d'utiliser thickbox aussi, le sélecteur est dans cfg)

TODO :

  • il serait bon d'améliorer l'interface de sélection des photos, on est preneur d'avis
  • il faut utiliser les pipelines sur les docs pour générer les miniatures, car au premier appel ajax ca ne les génére pas...enfin c'est un peu plus complexe ( des idées sinon ? ).
Location:
_plugins_/insertion_modele
Files:
7 added
4 deleted
7 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/insertion_modele/css/inserer_modeles_prive.css

    r33089 r33152  
    99/* CSS CORPS MODAL
    1010/* ***************** */
    11 .img_presentation {display:block;padding:1px;border:1px solid #999966;}
    12 .image_select {display:block;float:left;text-align:center;margin:0px 0px 1px 4px;}
    13 .first_photo {margin-left:0px;}
    14 .clearfix {width:100%;overflow:auto;}
    15 .inserer_images_boutons {text-align:right;}
    16 .inserer_images_boutons input, .inserer_images_boutons a {margin:0 !important;display:inline-block;border:none;background:url(../images/back_bt.gif) no-repeat top left;color:black;font-size:10px;font-weight:bold;text-align:center;text-decoration:none;vertical-align:middle;}
    17 .inserer_images_boutons input {width:70px;height:20px;text-align:center;padding:0 0 3px 0;}
    18 .inserer_images_boutons a {width:60px;height:14px;padding:3px 5px;text-align:center;}
    19 .inserer_modeles_erreur {padding:5px;border:1px solid red;color:red;font-weight:bold;margin-bottom:10px;}
    20 .image_droite {float:right;width:124px;}
    21 #alignement {clear:both;padding:20px 0;overflow:auto;width:100%;}
    22 #alignement .image_select {width:94px;text-align:center;padding:0 15px;margin:0 !important;}
    23 #alignement .image_select label span{display:block;font-weight:bold;}
    24 #formulaire_gauche {float:left;width:245px;}
    25 #formulaire_gauche .ligne_form_input {position:relative;padding-left:85px;text-align:right;margin-bottom:10px;}
    26 #formulaire_gauche .ligne_form .input_text{width:160px;}
    27 #formulaire_gauche .ligne_form_input label {position:absolute;top:5px;left:0;font-weight:bold;font-size:11px;}
    28 #formulaire_gauche .ligne_form_check {position:relative;padding-left:190px;text-align:right;margin-bottom:10px;}
    29 #formulaire_gauche .ligne_form_check label {position:absolute;top:3px;left:0;font-weight:bold;font-size:11px;}
    30 .explications {color:#adadad;padding:10px;border:1px solid #adadad;-moz-border-radius:7px;-webkit-border-radius:5px;position:relative;font-size:10px;margin-bottom:20px;}
    31 .explications h1 {position:absolute;top:-13px;left:10px;padding:0 5px;border:1px solid #adadad;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#adadad;color:white;font-size:11px;font-weight:normal;}
    32 .explications p {margin:0;}
     11#modale_images .img_presentation {display:block;padding:1px;border:1px solid #999966;}
     12#modale_images .image_select {display:block;float:left;text-align:center;margin:0px 0px 1px 4px;}
     13#modale_images .first_photo {margin-left:0px;}
     14#modale_images .inserer_images_boutons {text-align:right;clear:both;}
     15#modale_images .inserer_images_boutons input, .inserer_images_boutons a {margin:0 !important;display:inline-block;border:none;background:url(../images/back_bt.gif) no-repeat top left;color:black;font-size:10px;font-weight:bold;text-align:center;text-decoration:none;vertical-align:middle;}
     16#modale_images .inserer_images_boutons input {width:70px;height:20px;text-align:center;padding:0 0 3px 0;}
     17#modale_images .inserer_images_boutons a {width:60px;height:14px;padding:3px 5px;text-align:center;}
     18#modale_images .inserer_modeles_erreur {padding:5px;border:1px solid red;color:red;font-weight:bold;margin-bottom:15px;-moz-border-radius:8px;-webkit-border-radius:8px;}
     19#modale_images .image_droite {float:right;width:124px;}
     20#modale_images #alignement {clear:both;padding:20px 0;overflow:auto;width:100%;}
     21#modale_images #alignement .image_select {width:94px;text-align:center;padding:0 15px;margin:0 !important;}
     22#modale_images #alignement .image_select label span{display:block;font-weight:bold;}
     23#modale_images #formulaire_gauche {float:left;width:245px;}
     24#modale_images #formulaire_gauche .ligne_form_input {position:relative;padding-left:85px;text-align:right;margin-bottom:10px;}
     25#modale_images #formulaire_gauche .ligne_form .input_text{width:160px;}
     26#modale_images #formulaire_gauche .ligne_form_input label {position:absolute;top:5px;left:0;font-weight:bold;font-size:11px;}
     27#modale_images #formulaire_gauche .ligne_form_check {position:relative;padding-left:190px;text-align:right;margin-bottom:10px;}
     28#modale_images #formulaire_gauche .ligne_form_check label {position:absolute;top:3px;left:0;font-weight:bold;font-size:11px;}
     29#modale_images .explications {color:#adadad;padding:10px;border:1px solid #adadad;-moz-border-radius:7px;-webkit-border-radius:5px;position:relative;font-size:10px;margin-bottom:20px;}
     30#modale_images .explications h1 {position:absolute;top:-13px;left:10px;padding:0 5px;border:1px solid #adadad;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#adadad;color:white;font-size:11px;font-weight:normal;}
     31#modale_images .explications p {margin:0;}
     32
     33#modale_images #onglets {padding-left:30px;}
     34#modale_images #onglets a {padding:3px 5px;display:inline-block;font-weight:bold;color:#999966;border-color:#999966;border-style:solid;border-width:1px 1px 0 1px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-webkit-border-radius-topleft:5px;-webkit-border-radius-topright:5px;}
     35#modale_images #onglets a:hover, #modale_images #onglets a.on {background-color:#D9D9D9;}
     36
     37/**********************/
     38/* Pagination
     39/**********************/
     40#modale_images .pagination {text-align:center;margin:0 0 10px 0;padding:5px 0;border:1px solid #999966;background-color:#D9D9D9;-moz-border-radius:10px;-webkit-border-radius:10px;}
     41#modale_images .pagination a, #modale_images .pagination span, #modale_images .pagination strong, #modale_images .pagination .separateur {color:white;vertical-align:middle;display:inline-block !important;padding:0 2px;font-weight:bold;}
     42#modale_images .pagination .on {color:#999966;}
  • _plugins_/insertion_modele/edit_parametres_images.html

    r33089 r33152  
    33<div class="explications">
    44        <h1>Explications</h1>
    5         <p><strong>Largeur : </strong>Correspond &agrave; la taille de l&rsquo;image lorsque le texte est align&eacute; avec l&rsquo;image.[ La taille par d&eacute;faut est de (#CONFIG{inserer_modeles/largeur_defaut})px (pixels)]<br/><em>Pr&eacute;cisions : Dans le cas d&rsquo;une image en taille maximum, ce n&rsquo;est pas pris en compte ([(#CONFIG{inserer_modeles/largeur_max})px]).</em></p>
    6         <p><strong>Hauteur : </strong>Correspond &agrave; la hauteur de l&rsquo;image. Peut &ecirc;tre utilis&eacute; avec les 3 type d&rsquo;insertions d&rsquo;images.</p>
    7         <p><strong>Zoom : </strong>Permet d&rsquo;activer un effet de zoom sur le clic d&rsquo;une image (si elle est trop petite, le d&eacute;sactiver)</p>
     5        <p><strong>Largeur : </strong>Fixe la taille de l&rsquo;image dans les cas gauche et droite seulement.<br/><em>[La taille par d&eacute;faut est de (#CONFIG{inserer_modeles/largeur_defaut})px (pixels)] et la largeur maximum est[ (#CONFIG{inserer_modeles/largeur_max})px]</em></p>
     6        <p><strong>Hauteur : </strong>Correspond &agrave; la hauteur de l&rsquo;image.</p>
     7        <p><strong>Zoom : </strong>Permet de d&eacute;sactiver le zoom sur le clic de l&rsquo;image</p>
    88        <p><strong>Titre / Description : </strong>Ajoute le texte et le titre de <em>l&rsquo;image</em> sous la photo.</p>
    99</div>
     
    2929        </div>
    3030</div>
    31 <div id="div_image_select" class="clearfix image_droite">
     31<div id="div_image_select" class="image_droite">
    3232<BOUCLE_doc(DOCUMENTS){id_document}{extension IN jpg,jpeg,gif,png}>
    3333[(#FICHIER||image_adaptee{120,90,[(#TITRE|textebrut)],img_presentation,''})]
  • _plugins_/insertion_modele/inserer_modeles_fonctions.php

    r33089 r33152  
    44        include_spip('inc/filtres_images');
    55
    6         //      Si pas de fichier pas la peine de se faire du mal, il va rien se passer... =)
    76        if (!$fichier) return '';
    87
  • _plugins_/insertion_modele/inserer_modeles_pipelines.php

    r33089 r33152  
    1616function inserer_modeles_porte_plume_lien_classe_vers_icone($flux){
    1717        return array_merge($flux, array(
    18                 'outil_barre_img_dft' => 'barre-tableau.png',
     18                'outil_barre_img_dft' => 'barre-is.png',
    1919        ));
    2020}
    2121
    2222function inserer_modeles_header_prive($flux) {
    23         $flux .= '<script type="text/javascript" src="' . _DIR_PLUGIN_INSERER_MODELES . 'javascript/jquery-fieldselection.js"></script>' . "\n";
    2423        $flux .= '<script type="text/javascript" src="' . _DIR_PLUGIN_INSERER_MODELES . 'javascript/inserer_modeles.js"></script>' . "\n";
    2524        $flux.= '<link rel="stylesheet" type="text/css" href="' . _DIR_PLUGIN_INSERER_MODELES . 'css/inserer_modeles_prive.css" />' . "\n";
    26         $flux.= '<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="' . _DIR_PLUGIN_INSERER_MODELES . 'css/inserer_modeles_prive_IE.css" /><! endif -->' . "\n";
     25        return $flux;
     26}
     27
     28function inserer_modeles_insert_head($flux) {
     29        $flux.= '<link rel="stylesheet" type="text/css" href="' . _DIR_PLUGIN_INSERER_MODELES . 'css/inserer_modeles_public.css" />' . "\n";
    2730        return $flux;
    2831}
  • _plugins_/insertion_modele/javascript/inserer_modeles.js

    r33089 r33152  
     1/*
     2 * jQuery plugin: fieldSelection - v0.1.0 - last change: 2006-12-16
     3 * (c) 2006 Alex Brem <alex@0xab.cd> - http://blog.0xab.cd
     4 */
     5(function() {
     6        var fieldSelection = {
     7                getSelection: function() {
     8                        var e = this.jquery ? this[0] : this;
     9                        return (
     10                                /* mozilla / dom 3.0 */
     11                                ('selectionStart' in e && function() {
     12                                        var l = e.selectionEnd - e.selectionStart;
     13                                        return { start: e.selectionStart, end: e.selectionEnd, length: l, text: e.value.substr(e.selectionStart, l) };
     14                                }) ||
     15                                /* exploder */
     16                                (document.selection && function() {
     17                                        e.focus();
     18                                        var r = document.selection.createRange();
     19                                        if (r == null) {
     20                                                return { start: 0, end: e.value.length, length: 0 }
     21                                        }
     22                                        var re = e.createTextRange();
     23                                        var rc = re.duplicate();
     24                                        re.moveToBookmark(r.getBookmark());
     25                                        rc.setEndPoint('EndToStart', re);
     26                                        return { start: rc.text.length, end: rc.text.length + r.text.length, length: r.text.length, text: r.text };
     27                                }) ||
     28                                /* browser not supported */
     29                                function() {
     30                                        return { start: 0, end: e.value.length, length: 0 };
     31                                }
     32                        )();
     33                },
     34                replaceSelection: function() {
     35                        var e = this.jquery ? this[0] : this;
     36                        var text = arguments[0] || '';
     37                        return (
     38                                /* mozilla / dom 3.0 */
     39                                ('selectionStart' in e && function() {
     40                                        e.value = e.value.substr(0, e.selectionStart) + text + e.value.substr(e.selectionEnd, e.value.length);
     41                                        return this;
     42                                }) ||
     43                                /* exploder */
     44                                (document.selection && function() {
     45                                        e.focus();
     46                                        document.selection.createRange().text = text;
     47                                        return this;
     48                                }) ||
     49                                /* browser not supported */
     50                                function() {
     51                                        e.value += text;
     52                                        return this;
     53                                }
     54                        )();
     55                }
     56        };
     57        jQuery.each(fieldSelection, function(i) { jQuery.fn[i] = this; });
     58})();
     59
    160var curseur;
     61var datas;
     62
    263$(document).ready(function() {
    364        // Insertion du div de la modale
     
    2586                }
    2687               
    27                 // Mettre dans les pipeline de document la création des vignettes pour ne pas avoir une page vide !
     88                datas = "objet=" + objet + "&id_objet=" + id_objet ;
     89               
     90                // TODO : Mettre dans les pipeline de document la création des vignettes pour ne pas avoir une page vide !
    2891               
    2992                // Recupérer les images en AJAX pour l'afficher dans la modal
    3093                $.ajax({
    3194                        type: "GET",
    32                         url: "?exec=modal_images",
    33                         data: "objet=" + objet + "&id_objet=" + id_objet,
     95                        url: "?exec=modale_images_select",
     96                        data: datas,
    3497                        success: function(r){$("#modale_images").html(r);},
    3598                        async: false
    3699                }).responseText;
    37100
    38                 recalculTailleMask ()
    39                
     101                recalculTailleMask ();
     102
    40103                // la transition du mask (simple fade)
    41104                $('#inserer_modeles_mask').fadeIn(500);
     
    108171function submitInsererModelesSelectImage(){
    109172        $("#select_image").unbind("submit");
    110        
     173        $("#onglets a").unbind("click");
     174
     175        $("#onglets a").click(function(){
     176                var url = $(this).attr("href");
     177                ajaxIS(url,$("#list_images"),datas);
     178                $("#onglets a.on").removeClass("on");
     179                $(this).addClass("on");
     180
     181                return false;
     182        });
     183
    111184        $("#select_image").submit(function(){                   
    112185                $("#div_image_select").fadeTo("fast",0.5);
     
    114187                $.ajax({
    115188                        type: "GET",
    116                         url: "?exec=modal_images_parametres",
     189                        url: "?exec=modale_images_parametres",
    117190                        data: inputs,
    118191                        success:function(r){
     
    136209        });
    137210}
     211
     212function ajaxIS (url, conteneur, datas){
     213        datas = "url=" + url + "&" + datas;
     214        $.ajax({
     215                type: "GET",
     216                url: "?exec=modale_liste_images",
     217                data: datas,
     218                success:function(r){
     219                        conteneur.html(r).fadeTo("fast", 1);
     220                },
     221                async: false
     222        });
     223}
  • _plugins_/insertion_modele/modeles/image.html

    r33096 r33152  
    22#SET{largeur,#ENV{largeur}}
    33#SET{hauteur,#ENV{hauteur}}
    4 [(#ENV{align}|=={gauche}|oui)#SET{classe_align,is_document_gauche}]
    5 [(#ENV{align}|=={droite}|oui)#SET{classe_align,is_document_droite}]
     4#SET{align,#ENV{align,centre}}
     5#SET{classe_align,is_document_#GET{align}}
     6[(#GET{align}|!={centre}|oui)[(#ENV{largeur}|non)[(#ENV{hauteur}|non)#SET{largeur,#CONFIG{inserer_modeles/largeur_defaut}}]]]
     7[(#GET{align}|=={centre}|oui)#SET{largeur,#CONFIG{inserer_modeles/largeur_max}}]
    68#SET{classes,#CONFIG{inserer_modeles/classes_liens}|concat{' image_texte'}|concat{' ',#GET{classe_align}}}
    7 [(#ENV{align}|!={centre}|oui)[(#ENV{largeur}|non)[(#ENV{hauteur}|non)#SET{largeur,#CONFIG{inserer_modeles/largeur_defaut}}]]]
    8 [(#ENV{align}|=={centre}|oui)#SET{largeur,#CONFIG{inserer_modeles/largeur_max}}]
    99<BOUCLE_doc(DOCUMENTS){id_document=#ENV{id,#ENV{id_document,0}}}{extension IN jpg,jpeg,gif,png}>
    1010#SET{image,#FICHIER||image_adaptee{#GET{largeur},#GET{hauteur},#TITRE|attribut_html}}
  • _plugins_/insertion_modele/plugin.xml

    r33090 r33152  
    11<plugin>
    22        <nom>Insertion modèles</nom>
    3         <auteur>Quentin</auteur>
     3        <auteur>Sephyria</auteur>
    44        <version>0.1</version>
    55        <etat>dev</etat>
     
    2121                <inclure>inserer_modeles_pipelines.php</inclure>
    2222        </pipeline>
     23        <pipeline>
     24                <nom>insert_head</nom>
     25                <inclure>inserer_modeles_pipelines.php</inclure>
     26        </pipeline>
    2327        <necessite id="SPIP" version="[2.0.0;]" />
    2428        <necessite id="porte_plume" version="[1.2.2;]" />
    2529        <necessite id="cfg" version="[1.14.1;]" />
     30        <necessite id="spip_bonux" version="[1.8.5;]" />
    2631</plugin>
Note: See TracChangeset for help on using the changeset viewer.