Grammalecte  Check-in [eb18e7fd4b]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:[fx] position and size of panels
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk | fx
Files: files | file ages | folders
SHA3-256:eb18e7fd4bf0d88822bf86e4833a2c266181ddfe4013ffc984b00021d02c38ac
User & Date: olr 2019-05-15 16:12:22
Context
2019-05-15
19:11
[fr] nr da: le/la/l’/les check-in: fbf99ca531 user: olr tags: fr, trunk
16:12
[fx] position and size of panels check-in: eb18e7fd4b user: olr tags: fx, trunk
11:55
[graphspell][core][fr] code cleaning (pylint) check-in: c65b7e2b8b user: olr tags: core, fr, graphspell, trunk
Changes

Changes to gc_lang/fr/webext/content_scripts/init.js.

   142    142               this.oTFPanel = new GrammalecteTextFormatter("grammalecte_tf_panel", "Formateur de texte", 760, 595, false);
   143    143               this.oTFPanel.insertIntoPage();
   144    144           }
   145    145       },
   146    146   
   147    147       createGCPanel: function () {
   148    148           if (this.oGCPanel === null) {
   149         -            this.oGCPanel = new GrammalecteGrammarChecker("grammalecte_gc_panel", "Grammalecte", 540, 700);
          149  +            this.oGCPanel = new GrammalecteGrammarChecker("grammalecte_gc_panel", "Grammalecte", 540, 950);
   150    150               this.oGCPanel.insertIntoPage();
   151    151           }
   152    152       },
   153    153   
   154    154       createMessageBox: function () {
   155    155           if (this.oMessageBox === null) {
   156    156               this.oMessageBox = new GrammalecteMessageBox("grammalecte_message_box", "Grammalecte");

Changes to gc_lang/fr/webext/content_scripts/panel.js.

    11     11   class GrammalectePanel {
    12     12   
    13     13       constructor (sId, sTitle, nWidth, nHeight, bFlexible=true) {
    14     14           this.sId = sId;
    15     15           this.nWidth = nWidth;
    16     16           this.nHeight = nHeight;
    17     17           this.bFlexible = bFlexible;
           18  +        this.bHorizStrech = false;
           19  +        this.bVertStrech = false;
           20  +        this.nPositionX = 2;
           21  +        this.nPositionY = 2;
    18     22           this.bWorking = false;
    19     23   
    20     24           this.bShadow = document.body.createShadowRoot || document.body.attachShadow;
    21     25           if (this.bShadow) {
    22     26               this.xShadowPanel = oGrammalecte.createNode("div", {id: this.sId+"_shadow", style: "width:0;height:0;"});
    23     27               this.xShadow = this.xShadowPanel.attachShadow({mode: "open"});
    24     28               this.xParent = this.xShadow;
................................................................................
    62     66   
    63     67       _createButtons () {
    64     68           let xButtonLine = oGrammalecte.createNode("div", {className: "grammalecte_panel_commands"});
    65     69           xButtonLine.appendChild(this.xWaitIcon);
    66     70           if (this.sId === "grammalecte_gc_panel") {
    67     71               xButtonLine.appendChild(this._createCopyButton());
    68     72           }
    69         -        xButtonLine.appendChild(this._createMoveButton("stickToTop", "⏶", "Coller en haut"));
    70         -        xButtonLine.appendChild(this._createMoveButton("stickToLeft", "⏴", "Coller à gauche"));
           73  +        if (this.bFlexible) {
           74  +            xButtonLine.appendChild(this._createMoveButton("changeWidth", "⭾", "Bascule la largeur"));
           75  +            xButtonLine.appendChild(this._createMoveButton("changeHeight", "⭿", "Bascule la hauteur"));
           76  +        }
           77  +        xButtonLine.appendChild(this._createMoveButton("up", "⏶", "Monter"));
           78  +        xButtonLine.appendChild(this._createMoveButton("left", "⏴", "À gauche"));
    71     79           xButtonLine.appendChild(this._createMoveButton("center", "•", "Centrer"));
    72         -        xButtonLine.appendChild(this._createMoveButton("stickToRight", "⏵", "Coller à droite"));
    73         -        xButtonLine.appendChild(this._createMoveButton("stickToBottom", "⏷", "Coller en bas"));
           80  +        xButtonLine.appendChild(this._createMoveButton("right", "⏵", "À droite"));
           81  +        xButtonLine.appendChild(this._createMoveButton("down", "⏷", "Descendre"));
    74     82           this.xCloseButton = this._createCloseButton();
    75     83           xButtonLine.appendChild(this.xCloseButton);
    76     84           return xButtonLine;
    77     85       }
    78     86   
    79     87       _createWaitIcon () {
    80     88           let xWaitIcon = oGrammalecte.createNode("div", {className: "grammalecte_spinner"});
................................................................................
   134    142       }
   135    143   
   136    144       hide () {
   137    145           this.xPanel.style.display = "none";
   138    146       }
   139    147   
   140    148       center () {
   141         -        let nHeight = (this.bFlexible) ? window.innerHeight-100 : this.nHeight;
   142         -        this.setSizeAndPosition(`${this.nWidth}px`, `${nHeight}px`, "50%", "", "", "50%", `-${nHeight/2}px`, `-${this.nWidth/2}px`);
          149  +        this.nPosition = 5;
          150  +        this.setSizeAndPosition();
          151  +    }
          152  +
          153  +    left () {
          154  +        if (![1, 4, 7].includes(this.nPosition)) { this.nPosition -= 1 };
          155  +        this.setSizeAndPosition();
          156  +    }
          157  +
          158  +    right () {
          159  +        if (![3, 6, 9].includes(this.nPosition)) { this.nPosition += 1 };
          160  +        this.setSizeAndPosition();
          161  +    }
          162  +
          163  +    up () {
          164  +        if (![7, 8, 9].includes(this.nPosition)) { this.nPosition += 3 };
          165  +        this.setSizeAndPosition();
   143    166       }
   144    167   
   145         -    stickToLeft () {
   146         -        let nHeight = (this.bFlexible) ? window.innerHeight-100 : this.nHeight;
   147         -        this.setSizeAndPosition(`${this.nWidth}px`, `${nHeight}px`, "50%", "", "", "-2px", `-${nHeight/2}px`, "");
          168  +    down () {
          169  +        if (![1, 2, 3].includes(this.nPosition)) { this.nPosition -= 3 };
          170  +        this.setSizeAndPosition();
   148    171       }
   149    172   
   150         -    stickToRight () {
   151         -        let nHeight = (this.bFlexible) ? window.innerHeight-100 : this.nHeight;
   152         -        this.setSizeAndPosition(`${this.nWidth}px`, `${nHeight}px`, "50%", "-2px", "", "", `-${nHeight/2}px`, "");
          173  +    changeWidth () {
          174  +        this.bHorizStrech = !this.bHorizStrech;
          175  +        this.setSizeAndPosition();
   153    176       }
   154    177   
   155         -    stickToTop () {
   156         -        let nWidth = (this.bFlexible) ? Math.floor(window.innerWidth/2) : this.nWidth;
   157         -        let nHeight = (this.bFlexible) ? Math.floor(window.innerHeight*0.45) : this.nHeight;
   158         -        this.setSizeAndPosition(`${nWidth}px`, `${nHeight}px`, "-2px", "", "", "50%", "", `-${nWidth/2}px`);
          178  +    changeHeight () {
          179  +        this.bVertStrech = !this.bVertStrech;
          180  +        this.setSizeAndPosition();
   159    181       }
   160    182   
   161         -    stickToBottom () {
   162         -        let nWidth = (this.bFlexible) ? Math.floor(window.innerWidth/2) : this.nWidth;
   163         -        let nHeight = (this.bFlexible) ? Math.floor(window.innerHeight*0.45) : this.nHeight;
   164         -        this.setSizeAndPosition(`${nWidth}px`, `${nHeight}px`, "", "", "-2px", "50%", "", `-${nWidth/2}px`);
   165         -    }
   166         -
   167         -    setSizeAndPosition (sWidth, sHeight, sTop, sRight, sBottom, sLeft, sMarginTop, sMarginLeft) {
   168         -        this.xPanel.style.width = sWidth;
   169         -        this.xPanel.style.height = sHeight;
   170         -        this.xPanel.style.top = sTop;
   171         -        this.xPanel.style.right = sRight;
   172         -        this.xPanel.style.bottom = sBottom;
   173         -        this.xPanel.style.left = sLeft;
   174         -        this.xPanel.style.marginTop = sMarginTop;
   175         -        this.xPanel.style.marginLeft = sMarginLeft;
          183  +    setSizeAndPosition () {
          184  +        // size
          185  +        let nWidth = (this.bFlexible && this.bHorizStrech) ? Math.min(this.nWidth*1.5, window.innerWidth-200) : Math.min(this.nWidth, window.innerWidth-200);
          186  +        let nHeight = this.nHeight;
          187  +        if ([4, 5, 6].includes(this.nPosition)) {
          188  +            nHeight = (this.bFlexible && this.bVertStrech) ? (window.innerHeight-100) : Math.min(window.innerHeight-100, this.nHeight);
          189  +        } else {
          190  +            nHeight = (this.bFlexible) ? Math.floor(window.innerHeight*0.45) : this.nHeight;
          191  +        }
          192  +        this.xPanel.style.width = `${nWidth}px`;
          193  +        this.xPanel.style.height = `${nHeight}px`;
          194  +        // position
          195  +        let oPos = null;
          196  +        switch (this.nPosition) {
          197  +            case 1: oPos = { top:"",     right:"",     bottom:"-2px", left:"-2px", marginTop:"",                marginLeft:"" }; break;
          198  +            case 2: oPos = { top:"",     right:"",     bottom:"-2px", left:"50%",  marginTop:"",                marginLeft:`-${nWidth/2}px` }; break;
          199  +            case 3: oPos = { top:"",     right:"-2px", bottom:"-2px", left:"",     marginTop:"",                marginLeft:"" }; break;
          200  +            case 4: oPos = { top:"50%",  right:"",     bottom:"",     left:"-2px", marginTop:`-${nHeight/2}px`, marginLeft:"" }; break;
          201  +            case 5: oPos = { top:"50%",  right:"",     bottom:"",     left:"50%",  marginTop:`-${nHeight/2}px`, marginLeft:`-${nWidth/2}px` }; break;
          202  +            case 6: oPos = { top:"50%",  right:"-2px", bottom:"",     left:"",     marginTop:`-${nHeight/2}px`, marginLeft:"" }; break;
          203  +            case 7: oPos = { top:"-2px", right:"",     bottom:"",     left:"-2px", marginTop:"",                marginLeft:"" }; break;
          204  +            case 8: oPos = { top:"-2px", right:"",     bottom:"",     left:"50%",  marginTop:"",                marginLeft:`-${nWidth/2}px` }; break;
          205  +            case 9: oPos = { top:"-2px", right:"-2px", bottom:"",     left:"",     marginTop:"",                marginLeft:"" }; break;
          206  +        }
          207  +        // change
          208  +        this.xPanel.style.top = oPos.top;
          209  +        this.xPanel.style.right = oPos.right;
          210  +        this.xPanel.style.bottom = oPos.bottom;
          211  +        this.xPanel.style.left = oPos.left;
          212  +        this.xPanel.style.marginTop = oPos.marginTop;
          213  +        this.xPanel.style.marginLeft = oPos.marginLeft;
   176    214       }
   177    215   
   178    216       reduce () {
   179    217           // todo
   180    218       }
   181    219   
   182    220       getWidth () {