[Noalyss-commit] [noalyss] 01/12: WYSIWYG Editor integration and improve of waiting_box

[Dany De Bontridder]

sparkyx pushed a commit to branch master
in repository noalyss.

commit 9b39ddd817788998c4a57b7494d81057a45e68e0
Author: sparkyx <danydb@noalyss.eu>
AuthorDate: Sat Nov 5 17:10:26 2022 +0100

    WYSIWYG Editor integration and improve of waiting_box
---
 html/css/style-classic7.css |  49 +++++++++++++++++++++++++++++++++++++++++++-
 html/js/nicEdit.js          |  24 +++++++++-------------
 html/js/nicEditorIcons.gif  | Bin 3550 -> 0 bytes
 html/js/noalyss_script.js   |  10 ++++++---
 4 files changed, 65 insertions(+), 18 deletions(-)

diff --git a/html/css/style-classic7.css b/html/css/style-classic7.css
index d1b7e9d35..3d610e217 100644
--- a/html/css/style-classic7.css
+++ b/html/css/style-classic7.css
@@ -1226,7 +1226,7 @@ div#wait_box
     border:1px solid #00008B;
     width: 260px;
     opacity: 0.8;
-    border-radius: 5px;
+    border-radius: 20px;
 }
 #wait_box h2
 {
@@ -3251,3 +3251,50 @@ li.li-active {
 
  }
 
+ /**
+  * Waiting box and animation in CSS
+  */
+ #wait_box {
+     height:110px;
+ }
+ #wait_box p {
+     margin-top:10px;
+     letter-spacing: 4px;
+     font-weight: bold;
+ }
+ .loading_msg {
+     margin-top:20px;
+     border: 1px solid navy;
+     width: 1.5rem;
+     height: 1.5rem;
+     display: inline-block;
+     animation: turn-color 1.5s linear 0s infinite forwards;
+     position: relative;
+     left: 0px;
+     top: 10px;
+    background: rgb(176, 173, 230)
+
+ }
+
+
+ @keyframes turn-color{
+     0% { transform : rotate(0deg);opacity:0.1;}
+     50% { transform : rotate(90deg);opacity:0.9}
+     100% { transform : rotate(180deg);opacity:0.1}
+ }
+
+ /**
+  * style in TEXTAREA wysiwyg
+  */
+ div.nicEdit-main>blockquote {
+     margin-left:2rem !important;
+ }
+
+ div.nicEdit-main hr {
+     background-color: #756f6f !important;
+     width:90%  !important;
+     margin-left:5% !important;
+     margin-right:5% !important;
+     background-size:1px !important;
+     height:2px;
+ }
\ No newline at end of file
diff --git a/html/js/nicEdit.js b/html/js/nicEdit.js
index 72e2d93a0..b1e3de13d 100644
--- a/html/js/nicEdit.js
+++ b/html/js/nicEdit.js
@@ -1236,26 +1236,22 @@ var nicColorOptions = {
 
 var nicEditorColorButton = nicEditorAdvancedButton.extend({    
        addPane : function() {
-                       var colorList = {0 : '00',1 : '33',2 : '66',3 :'99',4 : 
'CC',5 : 'FF'};
+
                        var colorItems = new bkElement('DIV').setStyle({width: 
'270px'});
-                       
-                       for(var r in colorList) {
-                               for(var b in colorList) {
-                                       for(var g in colorList) {
-                                               var colorCode = 
'#'+colorList[r]+colorList[g]+colorList[b];
-                                               
-                                               var colorSquare = new 
bkElement('DIV').setStyle({'cursor' : 'pointer', 'height' : '15px', 'float' : 
'left'}).appendTo(colorItems);
+                       const 
aColorCode=['000000','808080','C0C0C0','800000','FFFFFF','FF0000','FFB6C1','ff8c00','800080','FF00FF','008000','00FF00','808000','FFFF00','000080','0000FF','008080','00FFFF'];
+
+            for ( let x=0;x<aColorCode.length;x++) {
+
+                        let colorCode='#'+aColorCode[x];
+                                               var colorSquare = new 
bkElement('DIV').setStyle({'cursor' : 'pointer', 'height' : '30px', 'float' : 
'left'}).appendTo(colorItems);
                                                var colorBorder = new 
bkElement('DIV').setStyle({border: '2px solid 
'+colorCode}).appendTo(colorSquare);
-                                               var colorInner = new 
bkElement('DIV').setStyle({backgroundColor : colorCode, overflow : 'hidden', 
width : '11px', height : 
'11px'}).addEvent('click',this.colorSelect.closure(this,colorCode)).addEvent('mouseover',this.on.closure(this,colorBorder)).addEvent('mouseout',this.off.closure(this,colorBorder,colorCode)).appendTo(colorBorder);
+                                               var colorInner = new 
bkElement('DIV').setStyle({backgroundColor : colorCode, overflow : 'hidden', 
width : '26px', height : 
'26px'}).addEvent('click',this.colorSelect.closure(this,colorCode)).addEvent('mouseover',this.on.closure(this,colorBorder)).addEvent('mouseout',this.off.closure(this,colorBorder,colorCode)).appendTo(colorBorder);
                                                
                                                if(!window.opera) {
                                                        colorSquare.onmousedown 
= colorInner.onmousedown = bkLib.cancelEvent;
                                                }
-
-                                       }       
-                               }       
-                       }
-                       this.pane.append(colorItems.noSelect());        
+                    }
+                       this.pane.append(colorItems.noSelect());
        },
        
        colorSelect : function(c) {
diff --git a/html/js/nicEditorIcons.gif b/html/js/nicEditorIcons.gif
deleted file mode 100644
index bf4097332..000000000
Binary files a/html/js/nicEditorIcons.gif and /dev/null differ
diff --git a/html/js/noalyss_script.js b/html/js/noalyss_script.js
index 4ea44da85..f97652838 100644
--- a/html/js/noalyss_script.js
+++ b/html/js/noalyss_script.js
@@ -500,8 +500,12 @@ function success_misc(req)
 }
 function loading()
 {
-    var str = '<p>' + content[64] + '</p>';
-    str = str + '<image src="image/loading.gif" alt="chargement"></image>';
+    var str='<div class="loading_msg"></div>';
+    str+='<div class="loading_msg"></div>';
+    str+='<div class="loading_msg"></div>';
+    str+='<div class="loading_msg"></div>';
+    str+='<div class="loading_msg"></div>';
+
     return str;
 }
 
@@ -818,7 +822,7 @@ function waiting_node()
 function waiting_box()
 {
     var obj = {
-        id: 'wait_box', html: '<h2 class="title">' + content[65] + '</h2>' + 
loading()
+        id: 'wait_box', html:  loading()+'<p>' + content[65] + '</p>'
     };
     var y = fixed_position(10, 250)
     obj.style = y + ";width:20%;margin-left:40%;";