Changeset 78782 in spip-zone


Ignore:
Timestamp:
Nov 24, 2013, 3:33:28 PM (6 years ago)
Author:
cedric@…
Message:

Nouvelle fonctionnalité : edition en mode plein écran split-screen avec l'édition de texte à gauche et la prévisu live à droite.

Il faudrait synchroniser les scrolls entre les 2 vues, mais c'est non trivial, car à cause des notes de bas de page on peut être à 100% du scroll en édition et que le texte modifié corresponde à 50% du scroll en prévisu.
Sans doute faudrait-il repérer la portion de texte qui change entre 2 mises à jour de la prévisu et positionner le scroll dessus si besoin ?

A priori OK sur FF et Safari, a tester plus largement sur les autres navigateurs.

On renomme le dossier css/images en css/img par convention

Location:
_core_/plugins/porte_plume
Files:
2 added
4 edited
1 moved

Legend:

Unmodified
Added
Removed
  • _core_/plugins/porte_plume/css/barre_outils.css

    r65728 r78782  
    4747        margin-left:auto;
    4848        margin-right:auto;
    49         background-image:url(images/handle.png);
     49        background-image:url(img/handle.png);
    5050        cursor:ns-resize;
    5151}
     
    7474        border-radius: 5px 5px 0 0;
    7575}
    76 .markItUp .markItUpTabs a.on { background: #fff; border-bottom: 1px solid #fff; box-shadow: 1px 1px #eee inset; }
    77 .markItUp .markItUpTabs a:hover {background:#fff;}
     76.markItUp .markItUpTabs a.on { background-color: #fff; border-bottom: 1px solid #fff; box-shadow: 1px 1px #eee inset; }
     77.markItUp .markItUpTabs a:hover {background-color:#fff;}
    7878
    7979/***************************/
     
    143143
    144144.markItUp .markItUpHeader ul .markItUpDropMenu {
    145         /*background:inherit url(images/menu.png) no-repeat 100% 80%;
     145        /*background:inherit url(img/menu.png) no-repeat 100% 80%;
    146146        padding-right:10px;*/
    147147       
     
    173173}
    174174.markItUp .markItUpHeader ul ul .markItUpDropMenu {
    175         background:#F5F5F5 url(images/submenu.png) no-repeat 50% 50%;
     175        background:#F5F5F5 url(img/submenu.png) no-repeat 50% 50%;
    176176}
    177177.markItUp .markItUpHeader ul .separateur {
  • _core_/plugins/porte_plume/css/barre_outils_prive.css

    r35751 r78782  
    1313        line-height: 1.4em;
    1414}
     15
     16
     17.markItUp .markItUpContainer.fullscreen {
     18    position: fixed;
     19    top:0;
     20    left:0;
     21    height: 100%;
     22    width: 100%;
     23    background: #DDD;
     24    z-index: 1000;
     25}
     26.markItUp .fullscreen .markItUpHeader{
     27    position: absolute;
     28    top:0;
     29    right: 50%;
     30    width: 50%;
     31    max-width: 40em;
     32}
     33.markItUp .fullscreen .markItUpEditor{
     34    position: absolute;
     35    top:0;
     36    right: 50%;
     37    width: 50%;
     38    max-width: 40em;
     39    height: 95% !important;
     40    margin-top: 30px;
     41}
     42
     43.markItUp .fullscreen .markItUpPreview{
     44    position: absolute;
     45    top:0;
     46    left: 50%;
     47    width: 50%;
     48    max-width: 40em;
     49    height: 95% !important;
     50    margin-top: 30px;
     51    display: block !important;
     52    -moz-box-sizing: border-box;
     53    -webkit-box-sizing: border-box;
     54    box-sizing: border-box;
     55}
     56
     57.markItUp .fullscreen .markItUpTabs {
     58    position: absolute;
     59    left: 50%;
     60    width: 50%;
     61    max-width: 40em;
     62}
     63.markItUp .fullscreen .markItUpTabs .previsuVoir,
     64.markItUp .fullscreen .markItUpTabs .previsuEditer,
     65.markItUp .fullscreen .markItUpFooter {
     66    display: none;
     67}
     68
     69.markItUp .markItUpTabs .fullscreen {text-indent: -1000em;font-size:1px;background: url(img/arrow_out.png) center no-repeat;width: 16px;}
     70.markItUp .fullscreen .markItUpTabs .fullscreen {background-image: url(img/arrow_in.png);}
  • _core_/plugins/porte_plume/javascript/jquery.previsu_spip.js

    r65727 r78782  
    77                        previewParserVar:       'data',
    88                        textEditer:     'Editer',
    9                         textVoir:       'Voir'
     9                        textVoir:       'Voir',
     10                        textFullScreen: 'Plein écran'
    1011                };
    1112                $.extend(options, settings);
     
    2223                                tabs = $('<div class="markItUpTabs"></div>').prependTo($$.parent());
    2324                                $(tabs).append(
     25                                        '<a href="#fullscreen" class="fullscreen">' + options.textFullScreen + '</a>' +
    2426                                        '<a href="#previsuVoir" class="previsuVoir">' + options.textVoir + '</a>' +
    2527                                        '<a href="#previsuEditer" class="previsuEditer on">' + options.textEditer + '</a>'
     
    2830                                preview = $('<div class="markItUpPreview"></div>').insertAfter(tabs);
    2931                                preview.hide();
    30                                
     32
     33                                var is_full_screen = false;
     34                                $('.fullscreen').click(function(){
     35                                        mark = $(this).parent().parent();
     36                                        mark.toggleClass('fullscreen');
     37                                        objet = mark.parents('.formulaire_spip')[0].className.match(/formulaire_editer_(\w+)/);
     38                                        champ = mark.parents('li')[0].className.match(/editer_(\w+)/);
     39                                        if (mark.is('.fullscreen')){
     40                                                is_full_screen = true;
     41                                                if (!mark.is('.livepreview')){
     42                                                        var original_texte="";
     43                                                        function refresh_preview(){
     44                                                                var texte = $(mark).find('textarea.pp_previsualisation').val();
     45                                                                if (original_texte == texte){
     46                                                                        return;
     47                                                                }
     48                                                                renderPreview($(mark).find('.markItUpPreview').addClass('ajaxLoad'),
     49                                                                                texte,
     50                                                                                champ[1].toUpperCase(),
     51                                                                                (objet ? objet[1] : ''));
     52                                                                original_texte = texte;
     53                                                        }
     54                                                        var timerPreview=null;
     55                                                        mark.addClass('.livepreview').find('.markItUpEditor').bind('keyup click change focus refreshpreview',function(){
     56                                                                if (is_full_screen){
     57                                                                        if (timerPreview) clearTimeout(timerPreview);
     58                                                                        timerPreview = setTimeout(refresh_preview,500);
     59                                                                }
     60                                                        })
     61                                                }
     62                                                mark.find('.markItUpEditor').trigger('refreshpreview');
     63                                        }
     64                                        else
     65                                                is_full_screen = false;
     66                                });
     67
    3168                                $('.previsuVoir').click(function(){
    3269                                        mark = $(this).parent().parent();
     
    4380                                        $(mark).find('.markItUpFooter').hide();
    4481                                        $(this).addClass('on').next().removeClass('on');
    45                                         $(mark).find('.markItUpPreview').show()
    46                                                 .addClass('ajaxLoad')
    47                                                 .html(renderPreview(
     82                                        renderPreview($(mark).find('.markItUpPreview').show().addClass('ajaxLoad'),
    4883                                                        $(mark).find('textarea.pp_previsualisation').val(),
    4984                                                        champ[1].toUpperCase(),
    50                                                         (objet ? objet[1] : ''))
    51                                                 )
    52                                                 .removeClass('ajaxLoad');
    53                                        
    54                                         //ouvre un nouvel onglet lorsqu'on clique sur un lien dans la prévisualisation
    55                                         $(".markItUpPreview a").attr("target","blank");
     85                                                        (objet ? objet[1] : ''));
    5686
    5787                                        return false;
     
    6999
    70100
    71                         function renderPreview(val, champ, objet) {
    72                                 var phtml;
     101                        function renderPreview(node, val, champ, objet) {
    73102                                if (options.previewParserPath !== '') {
    74103                                        $.ajax( {
     
    80109                                                        +'&' + options.previewParserVar+'='+encodeURIComponent(val),
    81110                                                success: function(data) {
    82                                                         phtml = data;
     111                                                        node.html(data).removeClass('ajaxLoad');
     112                                                        //ouvre un nouvel onglet lorsqu'on clique sur un lien dans la prévisualisation
     113                                                        $("a",node).attr("target","blank");
    83114                                                }
    84115                                        } );
    85116                                }
    86                                 return phtml;
    87117                        }
    88118       
  • _core_/plugins/porte_plume/paquet.xml

    r73966 r78782  
    22        prefix="porte_plume"
    33        categorie="edition"
    4         version="1.12.3"
     4        version="1.13.0"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.1.*]"
Note: See TracChangeset for help on using the changeset viewer.