Changeset 118586 in spip-zone for _plugins_/crayons/trunk


Ignore:
Timestamp:
Nov 13, 2019, 2:24:11 PM (4 weeks ago)
Author:
Cerdic
Message:

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

Location:
_plugins_/crayons/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/crayons/trunk

    • Property subgit:lock:c281220ae3e8877b670433a0db9070d15ddbf0f0 deleted
    • Property subgit:lock:1a903d57b6395d6b9803835485e022cec387d84b set to 2019-11-13T15:29:43.892
  • _plugins_/crayons/trunk/css/crayons.css

    r118585 r118586  
    33
    44.crayon-boutons,
    5 .crayon-searching { float: right;padding:0;text-align: right;}
     5.crayon-searching { float: right;padding:0;text-align: right;z-index: 3}
    66.crayon-boutons button { border:1px solid; cursor: pointer;display:inline-block; padding:0.25rem 0.4rem;}
    77.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;}
     
    1414
    1515.crayon-init { position: relative; }
    16 .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;}
     16.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;}
    1717.crayon-icones>span {position: absolute;top:0;right: 0;left: auto;width: 100%;height: 0;padding-bottom: 100%;}
    1818.crayon-icones>em { position:absolute; left:0; }
     
    2323.crayon-changed.crayon-hover em.crayon-img-changed {background-color:#fff; filter:grayscale(100%)}
    2424.crayon-changed.crayon-hover em.crayon-crayon {z-index:2;background-color: rgba(255,255,255,0.5);}
     25
     26.crayon-loading .crayon-icones, .crayon-loading .crayon-icones span,.crayon-loading .crayon-icones em.crayon-searching {display: block !important;}
     27.crayon-loading .crayon-icones em.crayon-crayon {display: none !important;}
     28
    2529
    2630em.crayon-edit,
     
    3337.crayon-icones .crayon-searching,
    3438.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;}
    35 .crayon-icones .crayon-crayon {background: #fff url(images/crayon.svg) no-repeat center;}
     39.crayon-icones .crayon-crayon {background: #fff url(images/crayon.svg) no-repeat center;cursor: pointer;}
    3640.crayon-icones .crayon-img-changed {background: transparent url(images/crayon-changed.svg) no-repeat center;border:0;}
    3741
    38 /* TODO ?*/
    39 .crayon-icones em.crayon-searching { background: url(images/searching.gif) no-repeat; /*height: 13px; width: 13px;*/ }
    40 /* deprecated? */
    41 .crayon-icones em.crayon-edit { background: url(images/edit.png) no-repeat; /*height: 20px; width: 20px; */}
     42.crayon-icones em.crayon-searching { background: url(images/searching.gif) no-repeat; border-color:transparent }
     43
     44/* deprecated? je ne trouve aucun bout de code js qui pose crayon-edit */
     45.crayon-icones em.crayon-edit { background: url(images/edit.png) no-repeat;}
    4246
    4347.formulaire_crayon .crayon-active { font: inherit; display:block;border: 1px solid #ddd;padding:0.25em;}
     
    5256.crayon-html .small .crayon-boutons {position: relative;}
    5357
     58.crayon.crayon-loading { opacity: 0.7;text-shadow: 0 0 50px red;filter:grayscale(50%);}
     59.crayon-html.crayon-loading {filter:grayscale(70%) blur(3px);}
    5460
    5561.crayon-invalide { display: block; background-color: #ff8888; border: 1px dashed #ff0000; }
    5662.crayon-invalide p { margin:0; padding: 1%; font-style: italic; font-size: 80%; }
    5763/* resizer */
    58 .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;}
     64.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;}
    5965.small .resizehandle {margin-right: 0;}
    6066.resizehandle_boutons { margin-top: -16px; }
    6167
    6268
    63 .crayon-fade.crayon-hover{
     69.crayon-fade.crayon-hover:not(.crayon-loading){
    6470        -webkit-animation-name: crayon-fade-highlight;
    6571        -webkit-animation-duration: 1s;
    6672        animation-name: crayon-fade-highlight;
    6773  animation-duration: 1s;
     74}
     75.crayon-fade.crayon-hover.crayon-loading{
     76        -webkit-animation-name:none;
     77        animation-name:none;
    6878}
    6979@-webkit-keyframes crayon-fade-highlight {
  • _plugins_/crayons/trunk/js/crayons.js

    r118572 r118586  
    8686        return this
    8787        .each(function(){
     88                var $me = $(this);
    8889                // verifier que je suis un crayon
    89                 if (!$(this).is('.crayon'))
     90                if (!$me.is('.crayon'))
    9091                        return;
    9192
    9293                // voir si je dispose deja du crayon comme voisin
    93                 if ($(this).is('.crayon-has')) {
    94                         $(this)
     94                if ($me.is('.crayon-has')) {
     95                        $me
    9596                        .css('visibility','hidden')
    9697                        .crayon()
     
    100101                else {
    101102                        // sauf si je suis deja en train de le charger (lock)
    102                         if ($(this).find("em.crayon-searching").length) {
     103                        if ($me.is('.crayon-loading')) {
    103104                                return;
    104105                        }
    105                         $(this)
    106                         .find('>span.crayon-icones span')
    107                         .append(configCrayons.mkimg('searching')); // icone d'attente
     106                        $me
     107                                .addClass('crayon-loading')
     108                                .find('>span.crayon-icones span')
     109                                .append(configCrayons.mkimg('searching')); // icone d'attente
    108110                        var me=this;
    109                         var offset = $(this).offset();
     111                        var offset = $me.offset();
     112                        var bgcolor = $me.css('backgroundColor');
    110113                        var params = {
    111114                                'top': offset.top,
    112115                                'left': offset.left,
    113                                 'w': $(this).width(),
    114                                 'h': $(this).height(),
     116                                'w': $me.width(),
     117                                'h': $me.height(),
    115118                                'ww': (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth)),
    116119                                'wh': (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight)),
    117                                 'em': $(this).css('fontSize'), // Bug de jquery resolu : http://bugs.jquery.com/ticket/760
    118                                 'class': me.className,
    119                                 'color': $(this).css('color'),
    120                                 'font-size': $(this).css('fontSize'),
    121                                 'font-family': $(this).css('fontFamily'),
    122                                 'font-weight': $(this).css('fontWeight'),
    123                                 'line-height': $(this).css('lineHeight'),
    124                                 'min-height': $(this).css('lineHeight'),
    125                                 'text-align': $(this).css('textAlign'),
    126                                 'background-color': $(this).css('backgroundColor'),
     120                                'em': $me.css('fontSize'), // Bug de jquery resolu : http://bugs.jquery.com/ticket/760
     121                                'class': this.className,
     122                                'color': $me.css('color'),
     123                                'font-size': $me.css('fontSize'),
     124                                'font-family': $me.css('fontFamily'),
     125                                'font-weight': $me.css('fontWeight'),
     126                                'line-height': $me.css('lineHeight'),
     127                                'min-height': $me.css('lineHeight'),
     128                                'text-align': $me.css('textAlign'),
     129                                'background-color': $me.css('backgroundColor'),
    127130                                'self': configCrayons.self
    128131                        };
    129                         if (me.type) params.type = me.type;
     132                        if (this.type) params.type = this.type;
    130133                        if (params['background-color'] == 'transparent'
    131134                        || params['background-color'] == 'rgba(0, 0, 0, 0)') {
    132                                 $(me).parents()
     135                                $me.parents()
    133136                                .each(function(){
    134137                                        var bg = $(this).css('backgroundColor');
     
    147150                                                c = {'$erreur': 'erreur de communication :' + '  ' + e.message, '$html':''};
    148151                                        }
    149                                         $(me)
    150                                         .find("em.crayon-searching")
     152                                        $me
     153                                                .removeClass('crayon-loading')
     154                                                .find("em.crayon-searching")
    151155                                                .remove();
    152156                                        if (c.$erreur) {
     
    157161
    158162                                        var position = 'absolute';
    159                                         $(me).parents().each(function(){
     163                                        $me.parents().each(function(){
    160164                                                if($(this).css("position") == "fixed")
    161165                                                        position = 'fixed';
    162166                                        });
    163167
    164                                         $(me)
     168                                        $me
    165169                                        .css('visibility','hidden')
    166170                                        .addClass('crayon-has')
     
    170174                                        // http://www.sitepoint.com/detect-css3-property-browser-support/
    171175                                        if (document.createElement("detect").style.zoom === "") {
    172                                                 $(me).css({'zoom':1});
    173                                         }
    174                                         var pos = $(me).offset();
     176                                                $me.css({'zoom':1});
     177                                        }
     178                                        var pos = $me.offset();
    175179                                        $('<div class="crayon-html" id="crayon_'+id_crayon+'"></div>')
    176180                                        .css({
     
    181185                                        .appendTo('body')
    182186                                        .html(c.$html);
    183                                         $(me)
     187                                        $me
    184188                                        .activatecrayon(percent);
    185189                                        // Si le crayon a une taille mini qui le fait deborder
     
    266270                                }
    267271                                me
    268                                 .find("em.crayon-searching")
     272                                        .removeClass('crayon-loading')
     273                                        .find("em.crayon-searching")
    269274                                        .remove();
    270275
     
    318323                                                        .show()
    319324                                                .end()
     325                                                .removeClass('crayon-loading')
    320326                                                .find('.crayon-searching')
    321327                                                        .remove();
     
    348354                                if(!veto.veto)
    349355                                crayon
     356                                .addClass('crayon-loading')
    350357                                .find('form')
    351                                         .css('opacity', 0.5)
    352358                                        .after(configCrayons.mkimg('searching')) // icone d'attente
    353359                                        .find(".crayon-boutons,.resizehandle")
Note: See TracChangeset for help on using the changeset viewer.