Update GTranslator.php

Author: peterujah

src/GTranslator.php

@@ -41,6 +41,20 @@ class GTranslator{
      * @var int
     */
     const SELECT = 3;
+    
+     /**
+     * Hold type bootstrap 4 attribute
+     *
+     * @var int
+    */
+    const BOOTSTRAP_4 = 4;
+
+     /**
+     * Hold type bootstrap 5 attribute
+     *
+     * @var int
+    */
+    const BOOTSTRAP_5 = 5;
 
     /**
      * Hold google translator element id name 
@@ -83,6 +97,20 @@ class GTranslator{
      * @var string
     */
     private $iconType;
+    
+     /**
+     * Hold ui design provider type
+     *
+     * @var int
+    */
+    private $provider
+
+    /**
+     * Hold bootstrap design provider version
+     *
+     * @var string
+    */
+    private $bootstrapVersion;
 
     /**
      * Hold list of languages to  build
@@ -196,13 +224,23 @@ public function setLinkClass($cls){
     /**
      * Sets design style default or bootstrap
      * @param int $prv
+     * @param int $ver bootstrap version [4/5]
      * @return GTranslator $this
     */
-    public function setProvider($prv){
+     public function setProvider($prv, $ver = self::BOOTSTRAP_5){
         $this->provider = $prv;
+        $this->bootstrapVersion = $ver;
         return $this;
     }
 
+    /**
+     * Gets bootstrap attrbute name
+     * @return String 
+    */
+    public function getBootstrapAttr(){
+        return ($this->bootstrapVersion == self::BOOTSTRAP_5 ? "bs-" : "");
+    }
+
     /**
      * Builds language selector links
      * @param boolean $li if link should be child of list item
@@ -268,7 +306,7 @@ private function selectorBootstrap(){
         $this->setLinkClass("dropdown-item");
         $html =  '<div class="language-selector">';
         $html .= '<div class="dropdown notranslate">';
-        $html .= '<button class="btn btn-outline-gold dropdown-toggle" type="button" id="php-g-translator" data-bs-toggle="dropdown" aria-expanded="false">';
+        $html .= '<button class="btn btn-outline-gold dropdown-toggle" type="button" id="php-g-translator" data-' . $this->getBootstrapAttr() . 'toggle="dropdown" aria-expanded="false">';
         $html .= '<img alt="' . $this->siteLang . '" src="' . $this->iconPath . $this->siteLang . $this->iconType  . '"> ' . $this->languages[$this->siteLang];
         $html .= '</button>';
         $html .= ' <ul id="php-gt-languages" class="dropdown-menu" aria-labelledby="php-g-translator">';
@@ -339,7 +377,7 @@ function(a){a.preventDefault();GTranslator.toggle();GTranslator.toggleClass()};b
      * @return string|html|css $styleSheet
     */
     private function addCss(){
-        $styleSheet = " <style> body{top:0 !important} #{$this->element}{display:none!important} #goog-gt-tt{display:none !important} .goog-te-banner-frame{display:none !important} .goog-te-menu-value:hover{text-decoration:none !important} .goog-text-highlight{background-color:transparent !important;box-shadow:none !important} #php-g-translator img{height:16px;width:16px}";
+        $styleSheet = " <style> body{top:0 !important} .skiptranslate, #{$this->element}, #goog-gt-tt{display:none !important} .goog-te-banner-frame{display:none !important} .goog-te-menu-value:hover{text-decoration:none !important} .goog-text-highlight{background-color:transparent !important;box-shadow:none !important} #php-g-translator img{height:16px;width:16px}";
         if($this->provider == self::DEFAULT){
             $styleSheet .= ".g-translator-custom{position: relative} .g-translator-custom .toggle-translator{font-family:Arial;font-size:10pt;text-align:left;cursor:pointer;overflow:hidden;width:{$this->selectWidth};line-height:17px;position: absolute;right: 0;list-style-type: none;padding-left: 0px} .g-translator-custom a{text-decoration:none;display:block;font-size:10pt;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box} .g-translator-custom a img{vertical-align:middle;display:inline;border:0;padding:0;margin:0;opacity:0.8} .g-translator-custom a:hover img{opacity:1} .g-translator-custom .toggle-languages{background-color:#FFFFFF; position:relative; z-index:9999; cursor: pointer} .g-translator-custom .toggle-languages a{border:1px solid #CCCCCC;color:#666666;padding:3px 5px} .g-translator-custom .toggle-cert{background-image: url(\"data:image/svg+xml,%3Csvg class='caret-down' width='12' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.5l-5 5-5-5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke='%23000'%3E%3C/path%3E%3C/svg%3E\");background-repeat: no-repeat;background-position: center;padding:3px 5px;width: 12px;position: absolute;right: 0px;top: 0px;bottom: 0px;height: 22px} .g-translator-custom .toggle-languages .open .toggle-cert{-moz-transform: scaleY(-1);-o-transform: scaleY(-1);-webkit-transform: scaleY(-1);transform: scaleY(-1)} .g-translator-custom .language-options{position:relative;border:1px solid #CCCCCC;background-color:#EEEEEE;display:none;width:auto;max-height:300px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;overflow-y:auto;overflow-x:hidden;z-index: 100;list-style-type: none;padding-left: 0px} .g-translator-custom .language-options li{list-style-type: none} .g-translator-custom .language-options a{background:#eee;color:#000;padding:5px 8px} .g-translator-custom .language-options a:hover{background:#FFC} .g-translator-custom .language-options::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);border-radius:5px;background-color:#F5F5F5} .g-translator-custom .language-options::-webkit-scrollbar{width:5px} .g-translator-custom .language-options::-webkit-scrollbar-thumb{border-radius:5px;-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);background-color:#888} .g-translator-custom #php-g-translator img{margin-right:2px} ";
         }