Browse Source

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
3.1 v1.13.0
cedric@yterium.com 9 years ago
parent
commit
6fc9d0aca6
  1. 8
      .gitattributes
  2. 10
      css/barre_outils.css
  3. 56
      css/barre_outils_prive.css
  4. BIN
      css/img/arrow_in.png
  5. BIN
      css/img/arrow_out.png
  6. 0
      css/img/handle.png
  7. 0
      css/img/menu.png
  8. 0
      css/img/submenu.png
  9. 60
      javascript/jquery.previsu_spip.js
  10. 2
      paquet.xml

8
.gitattributes vendored

@ -5,9 +5,11 @@ barre_outils/forum.php -text
/barre_outils_icones.css.html -text
css/barre_outils.css -text
css/barre_outils_prive.css -text
css/images/handle.png -text
css/images/menu.png -text
css/images/submenu.png -text
css/img/arrow_in.png -text
css/img/arrow_out.png -text
css/img/handle.png -text
css/img/menu.png -text
css/img/submenu.png -text
formulaires/configurer_porte_plume.html -text
icones_barre/aelig-maj.png -text
icones_barre/aelig.png -text

10
css/barre_outils.css

@ -46,7 +46,7 @@
width:22px; height:5px;
margin-left:auto;
margin-right:auto;
background-image:url(images/handle.png);
background-image:url(img/handle.png);
cursor:ns-resize;
}
@ -73,8 +73,8 @@
background:#EEE;
border-radius: 5px 5px 0 0;
}
.markItUp .markItUpTabs a.on { background: #fff; border-bottom: 1px solid #fff; box-shadow: 1px 1px #eee inset; }
.markItUp .markItUpTabs a:hover {background:#fff;}
.markItUp .markItUpTabs a.on { background-color: #fff; border-bottom: 1px solid #fff; box-shadow: 1px 1px #eee inset; }
.markItUp .markItUpTabs a:hover {background-color:#fff;}
/***************************/
/* previsu */
@ -142,7 +142,7 @@
}
.markItUp .markItUpHeader ul .markItUpDropMenu {
/*background:inherit url(images/menu.png) no-repeat 100% 80%;
/*background:inherit url(img/menu.png) no-repeat 100% 80%;
padding-right:10px;*/
}
@ -172,7 +172,7 @@
float:left;
}
.markItUp .markItUpHeader ul ul .markItUpDropMenu {
background:#F5F5F5 url(images/submenu.png) no-repeat 50% 50%;
background:#F5F5F5 url(img/submenu.png) no-repeat 50% 50%;
}
.markItUp .markItUpHeader ul .separateur {
border-left: 1px solid #d2d2d2;

56
css/barre_outils_prive.css

@ -12,3 +12,59 @@
font-size: 1.05em;
line-height: 1.4em;
}
.markItUp .markItUpContainer.fullscreen {
position: fixed;
top:0;
left:0;
height: 100%;
width: 100%;
background: #DDD;
z-index: 1000;
}
.markItUp .fullscreen .markItUpHeader{
position: absolute;
top:0;
right: 50%;
width: 50%;
max-width: 40em;
}
.markItUp .fullscreen .markItUpEditor{
position: absolute;
top:0;
right: 50%;
width: 50%;
max-width: 40em;
height: 95% !important;
margin-top: 30px;
}
.markItUp .fullscreen .markItUpPreview{
position: absolute;
top:0;
left: 50%;
width: 50%;
max-width: 40em;
height: 95% !important;
margin-top: 30px;
display: block !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.markItUp .fullscreen .markItUpTabs {
position: absolute;
left: 50%;
width: 50%;
max-width: 40em;
}
.markItUp .fullscreen .markItUpTabs .previsuVoir,
.markItUp .fullscreen .markItUpTabs .previsuEditer,
.markItUp .fullscreen .markItUpFooter {
display: none;
}
.markItUp .markItUpTabs .fullscreen {text-indent: -1000em;font-size:1px;background: url(img/arrow_out.png) center no-repeat;width: 16px;}
.markItUp .fullscreen .markItUpTabs .fullscreen {background-image: url(img/arrow_in.png);}

BIN
css/img/arrow_in.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 633 B

BIN
css/img/arrow_out.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 684 B

0
css/images/handle.png → css/img/handle.png

Before

Width:  |  Height:  |  Size: 258 B

After

Width:  |  Height:  |  Size: 258 B

0
css/images/menu.png → css/img/menu.png

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

0
css/images/submenu.png → css/img/submenu.png

Before

Width:  |  Height:  |  Size: 240 B

After

Width:  |  Height:  |  Size: 240 B

60
javascript/jquery.previsu_spip.js

@ -6,7 +6,8 @@
previewParserPath: '' ,
previewParserVar: 'data',
textEditer: 'Editer',
textVoir: 'Voir'
textVoir: 'Voir',
textFullScreen: 'Plein écran'
};
$.extend(options, settings);
@ -21,13 +22,49 @@
$$.addClass("pp_previsualisation");
tabs = $('<div class="markItUpTabs"></div>').prependTo($$.parent());
$(tabs).append(
'<a href="#fullscreen" class="fullscreen">' + options.textFullScreen + '</a>' +
'<a href="#previsuVoir" class="previsuVoir">' + options.textVoir + '</a>' +
'<a href="#previsuEditer" class="previsuEditer on">' + options.textEditer + '</a>'
);
preview = $('<div class="markItUpPreview"></div>').insertAfter(tabs);
preview.hide();
var is_full_screen = false;
$('.fullscreen').click(function(){
mark = $(this).parent().parent();
mark.toggleClass('fullscreen');
objet = mark.parents('.formulaire_spip')[0].className.match(/formulaire_editer_(\w+)/);
champ = mark.parents('li')[0].className.match(/editer_(\w+)/);
if (mark.is('.fullscreen')){
is_full_screen = true;
if (!mark.is('.livepreview')){
var original_texte="";
function refresh_preview(){
var texte = $(mark).find('textarea.pp_previsualisation').val();
if (original_texte == texte){
return;
}
renderPreview($(mark).find('.markItUpPreview').addClass('ajaxLoad'),
texte,
champ[1].toUpperCase(),
(objet ? objet[1] : ''));
original_texte = texte;
}
var timerPreview=null;
mark.addClass('.livepreview').find('.markItUpEditor').bind('keyup click change focus refreshpreview',function(){
if (is_full_screen){
if (timerPreview) clearTimeout(timerPreview);
timerPreview = setTimeout(refresh_preview,500);
}
})
}
mark.find('.markItUpEditor').trigger('refreshpreview');
}
else
is_full_screen = false;
});
$('.previsuVoir').click(function(){
mark = $(this).parent().parent();
objet = mark.parents('.formulaire_spip')[0].className.match(/formulaire_editer_(\w+)/);
@ -42,17 +79,10 @@
$(mark).find('.markItUpEditor').hide();
$(mark).find('.markItUpFooter').hide();
$(this).addClass('on').next().removeClass('on');
$(mark).find('.markItUpPreview').show()
.addClass('ajaxLoad')
.html(renderPreview(
renderPreview($(mark).find('.markItUpPreview').show().addClass('ajaxLoad'),
$(mark).find('textarea.pp_previsualisation').val(),
champ[1].toUpperCase(),
(objet ? objet[1] : ''))
)
.removeClass('ajaxLoad');
//ouvre un nouvel onglet lorsqu'on clique sur un lien dans la prévisualisation
$(".markItUpPreview a").attr("target","blank");
(objet ? objet[1] : ''));
return false;
});
@ -68,8 +98,7 @@
}
function renderPreview(val, champ, objet) {
var phtml;
function renderPreview(node, val, champ, objet) {
if (options.previewParserPath !== '') {
$.ajax( {
type: 'POST',
@ -79,11 +108,12 @@
+'&objet='+objet
+'&' + options.previewParserVar+'='+encodeURIComponent(val),
success: function(data) {
phtml = data;
node.html(data).removeClass('ajaxLoad');
//ouvre un nouvel onglet lorsqu'on clique sur un lien dans la prévisualisation
$("a",node).attr("target","blank");
}
} );
}
return phtml;
}
init();

2
paquet.xml

@ -1,7 +1,7 @@
<paquet
prefix="porte_plume"
categorie="edition"
version="1.12.3"
version="1.13.0"
etat="stable"
compatibilite="[3.0.0;3.1.*]"
logo="images/porte-plume-32.png"

Loading…
Cancel
Save