Browse Source

fix du loading : on pose une class crayon-loading sur le conteneur (crayon ou crayon-html) et on gere en css les effets de style sur le contenu

pull/1/head
Cerdic 3 years ago
parent
commit
1a903d57b6
  1. 28
      css/crayons.css
  2. 68
      js/crayons.js

28
css/crayons.css

@ -2,7 +2,7 @@
.crayon-icones em {display:none;}
.crayon-boutons,
.crayon-searching { float: right;padding:0;text-align: right;}
.crayon-searching { float: right;padding:0;text-align: right;z-index: 3}
.crayon-boutons button { border:1px solid; cursor: pointer;display:inline-block; padding:0.25rem 0.4rem;}
.crayon-boutons .crayon-submit { background: #e6efc2 url(images/crayon-ok.svg) 0.15rem center no-repeat; background-size:1.3rem; color: #264409; border-color: #c6d880;float:right;margin-bottom: 0.5rem;margin-left:0.5rem;padding-left:1.5rem;}
.crayon-boutons .crayon-cancel { background: #fbe3e4 url(images/crayon-cancel.svg) center center no-repeat; background-size:1.3rem;color: #8a1f11; border-color: #fbc2c4;width: 2.5rem; text-indent: -3000em;}
@ -13,7 +13,7 @@
.small .crayon-boutons .crayon-cancel {float:left;}
.crayon-init { position: relative; }
.crayon-init .crayon-icones {display: none;float:right;text-align: right; position: relative; top:0; left:0;width:1.5em;max-width:2rem;;min-width:1rem;height:0;cursor: pointer;z-index:4999;}
.crayon-init .crayon-icones {display: none;float:right;text-align: right; position: relative; top:0; left:0;width:1.5em;max-width:2rem;min-width:1rem;height:0;z-index:4999;}
.crayon-icones>span {position: absolute;top:0;right: 0;left: auto;width: 100%;height: 0;padding-bottom: 100%;}
.crayon-icones>em { position:absolute; left:0; }
@ -23,6 +23,10 @@
.crayon-changed.crayon-hover em.crayon-img-changed {background-color:#fff; filter:grayscale(100%)}
.crayon-changed.crayon-hover em.crayon-crayon {z-index:2;background-color: rgba(255,255,255,0.5);}
.crayon-loading .crayon-icones, .crayon-loading .crayon-icones span,.crayon-loading .crayon-icones em.crayon-searching {display: block !important;}
.crayon-loading .crayon-icones em.crayon-crayon {display: none !important;}
em.crayon-edit,
em.crayon-crayon,
em.crayon-img-changed { cursor: pointer; border:0; }
@ -32,13 +36,13 @@ em.crayon-img-changed { cursor: pointer; border:0; }
.crayon-icones .crayon-img-changed,
.crayon-icones .crayon-searching,
.crayon-icones .crayon-edit { position:absolute;left:0;top:0;width: 100%; height:100%; border-radius: 25%; border:1px solid #ddd; background-size: 90% !important;}
.crayon-icones .crayon-crayon {background: #fff url(images/crayon.svg) no-repeat center;}
.crayon-icones .crayon-crayon {background: #fff url(images/crayon.svg) no-repeat center;cursor: pointer;}
.crayon-icones .crayon-img-changed {background: transparent url(images/crayon-changed.svg) no-repeat center;border:0;}
/* TODO ?*/
.crayon-icones em.crayon-searching { background: url(images/searching.gif) no-repeat; /*height: 13px; width: 13px;*/ }
/* deprecated? */
.crayon-icones em.crayon-edit { background: url(images/edit.png) no-repeat; /*height: 20px; width: 20px; */}
.crayon-icones em.crayon-searching { background: url(images/searching.gif) no-repeat; border-color:transparent }
/* deprecated? je ne trouve aucun bout de code js qui pose crayon-edit */
.crayon-icones em.crayon-edit { background: url(images/edit.png) no-repeat;}
.formulaire_crayon .crayon-active { font: inherit; display:block;border: 1px solid #ddd;padding:0.25em;}
@ -51,21 +55,27 @@ em.crayon-img-changed { cursor: pointer; border:0; }
.crayon-html .crayon-boutons { position:absolute; right:0; }
.crayon-html .small .crayon-boutons {position: relative;}
.crayon.crayon-loading { opacity: 0.7;text-shadow: 0 0 50px red;filter:grayscale(50%);}
.crayon-html.crayon-loading {filter:grayscale(70%) blur(3px);}
.crayon-invalide { display: block; background-color: #ff8888; border: 1px dashed #ff0000; }
.crayon-invalide p { margin:0; padding: 1%; font-style: italic; font-size: 80%; }
/* resizer */
.resizehandle { background:transparent url("images/resizer.svg") center no-repeat;background-size: contain; cursor:ns-resize; font-size:0.1em; width: auto !important;margin-right: 150px;opacity: 0.5;}
.resizehandle { background:transparent url("images/resizer.svg") center no-repeat;background-size: contain; cursor:ns-resize; font-size:0.1em; width: auto !important;margin-right: 10rem;opacity: 0.5;}
.small .resizehandle {margin-right: 0;}
.resizehandle_boutons { margin-top: -16px; }
.crayon-fade.crayon-hover{
.crayon-fade.crayon-hover:not(.crayon-loading){
-webkit-animation-name: crayon-fade-highlight;
-webkit-animation-duration: 1s;
animation-name: crayon-fade-highlight;
animation-duration: 1s;
}
.crayon-fade.crayon-hover.crayon-loading{
-webkit-animation-name:none;
animation-name:none;
}
@-webkit-keyframes crayon-fade-highlight {
0% {background-color: initial;}
50% {background-color: #FFFFB4;}

68
js/crayons.js

@ -85,13 +85,14 @@ $.fn.opencrayon = function(evt, percent) {
}
return this
.each(function(){
var $me = $(this);
// verifier que je suis un crayon
if (!$(this).is('.crayon'))
if (!$me.is('.crayon'))
return;
// voir si je dispose deja du crayon comme voisin
if ($(this).is('.crayon-has')) {
$(this)
if ($me.is('.crayon-has')) {
$me
.css('visibility','hidden')
.crayon()
.show();
@ -99,37 +100,39 @@ $.fn.opencrayon = function(evt, percent) {
// sinon charger le formulaire
else {
// sauf si je suis deja en train de le charger (lock)
if ($(this).find("em.crayon-searching").length) {
if ($me.is('.crayon-loading')) {
return;
}
$(this)
.find('>span.crayon-icones span')
.append(configCrayons.mkimg('searching')); // icone d'attente
$me
.addClass('crayon-loading')
.find('>span.crayon-icones span')
.append(configCrayons.mkimg('searching')); // icone d'attente
var me=this;
var offset = $(this).offset();
var offset = $me.offset();
var bgcolor = $me.css('backgroundColor');
var params = {
'top': offset.top,
'left': offset.left,
'w': $(this).width(),
'h': $(this).height(),
'w': $me.width(),
'h': $me.height(),
'ww': (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth)),
'wh': (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight)),
'em': $(this).css('fontSize'), // Bug de jquery resolu : http://bugs.jquery.com/ticket/760
'class': me.className,
'color': $(this).css('color'),
'font-size': $(this).css('fontSize'),
'font-family': $(this).css('fontFamily'),
'font-weight': $(this).css('fontWeight'),
'line-height': $(this).css('lineHeight'),
'min-height': $(this).css('lineHeight'),
'text-align': $(this).css('textAlign'),
'background-color': $(this).css('backgroundColor'),
'em': $me.css('fontSize'), // Bug de jquery resolu : http://bugs.jquery.com/ticket/760
'class': this.className,
'color': $me.css('color'),
'font-size': $me.css('fontSize'),
'font-family': $me.css('fontFamily'),
'font-weight': $me.css('fontWeight'),
'line-height': $me.css('lineHeight'),
'min-height': $me.css('lineHeight'),
'text-align': $me.css('textAlign'),
'background-color': $me.css('backgroundColor'),
'self': configCrayons.self
};
if (me.type) params.type = me.type;
if (this.type) params.type = this.type;
if (params['background-color'] == 'transparent'
|| params['background-color'] == 'rgba(0, 0, 0, 0)') {
$(me).parents()
$me.parents()
.each(function(){
var bg = $(this).css('backgroundColor');
if (bg != 'transparent'
@ -146,8 +149,9 @@ $.fn.opencrayon = function(evt, percent) {
} catch(e) {
c = {'$erreur': 'erreur de communication :' + ' ' + e.message, '$html':''};
}
$(me)
.find("em.crayon-searching")
$me
.removeClass('crayon-loading')
.find("em.crayon-searching")
.remove();
if (c.$erreur) {
uniAlert(c.$erreur);
@ -156,12 +160,12 @@ $.fn.opencrayon = function(evt, percent) {
id_crayon++;
var position = 'absolute';
$(me).parents().each(function(){
$me.parents().each(function(){
if($(this).css("position") == "fixed")
position = 'fixed';
});
$(me)
$me
.css('visibility','hidden')
.addClass('crayon-has')
.find('>.crayon-icones')
@ -169,9 +173,9 @@ $.fn.opencrayon = function(evt, percent) {
// Detection IE sur sa capacite a gerer zoom :
// http://www.sitepoint.com/detect-css3-property-browser-support/
if (document.createElement("detect").style.zoom === "") {
$(me).css({'zoom':1});
$me.css({'zoom':1});
}
var pos = $(me).offset();
var pos = $me.offset();
$('<div class="crayon-html" id="crayon_'+id_crayon+'"></div>')
.css({
'position':position,
@ -180,7 +184,7 @@ $.fn.opencrayon = function(evt, percent) {
})
.appendTo('body')
.html(c.$html);
$(me)
$me
.activatecrayon(percent);
// Si le crayon a une taille mini qui le fait deborder
// a droite de l'ecran, recadrer vers la gauche
@ -265,7 +269,8 @@ $.fn.activatecrayon = function(percent) {
}
}
me
.find("em.crayon-searching")
.removeClass('crayon-loading')
.find("em.crayon-searching")
.remove();
//Remise a zero des warnings invalides (unwrap)
@ -317,6 +322,7 @@ $.fn.activatecrayon = function(percent) {
.find(".crayon-boutons,.resizehandle")
.show()
.end()
.removeClass('crayon-loading')
.find('.crayon-searching')
.remove();
return false;
@ -347,8 +353,8 @@ $.fn.activatecrayon = function(percent) {
.bind('form-submit-validate',function(form,a, e, options, veto){
if(!veto.veto)
crayon
.addClass('crayon-loading')
.find('form')
.css('opacity', 0.5)
.after(configCrayons.mkimg('searching')) // icone d'attente
.find(".crayon-boutons,.resizehandle")
.hide();

Loading…
Cancel
Save