| 1: | <?php
|
| 2: |
|
| 3: | class Header extends \Sphp\tools\Component{
|
| 4: | private $menufile = null;
|
| 5: | private $vertimenufile = null;
|
| 6: | private $text = "";
|
| 7: | private $icon = "";
|
| 8: | private $fullsize = false;
|
| 9: | private $fixed = false;
|
| 10: | private $vertimenu = false;
|
| 11: |
|
| 12: | public function fu_setText($val) {
|
| 13: | $this->text = $val;
|
| 14: | }
|
| 15: | public function fu_setFullSize() {
|
| 16: | $this->fullsize = true;
|
| 17: | }
|
| 18: | public function fu_setVericalMenuTitle($a="") {
|
| 19: |
|
| 20: | }
|
| 21: | public function fu_setIcon($val) {
|
| 22: | $this->icon = $val;
|
| 23: | }
|
| 24: | public function fu_setFixed() {
|
| 25: | $this->fixed = true;
|
| 26: | }
|
| 27: | public function fu_setMenuFile($menupath) {
|
| 28: | $this->menufile = $menupath;
|
| 29: | }
|
| 30: | public function fu_setVerticalMenuFile($menupath) {
|
| 31: | if($menupath == ""){
|
| 32: | $this->vertimenu = false;
|
| 33: | }else{
|
| 34: | $this->vertimenu = true;
|
| 35: | }
|
| 36: | $this->vertimenufile = $menupath;
|
| 37: | }
|
| 38: | private function getMenu($callback) {
|
| 39: | $menuo = "";
|
| 40: | if($this->menufile != null){
|
| 41: | include_once($this->menufile);
|
| 42: | $menu = new MenuUi($this->frontobj->fileDir);
|
| 43: | $callback($menu);
|
| 44: | $menu->_run();
|
| 45: | $menuo = $menu->getOutput();
|
| 46: | }
|
| 47: | return $menuo;
|
| 48: | }
|
| 49: | private function getVertiMenu($callback) {
|
| 50: | $menuo = "";
|
| 51: | if($this->vertimenufile != null){
|
| 52: | include_once($this->vertimenufile);
|
| 53: | $menu = new MenuUiSide($this->frontobj->fileDir);
|
| 54: | $menu->brandicon = $this->icon;
|
| 55: | $menu->text = $this->text;
|
| 56: | $callback($menu);
|
| 57: | $menu->_run();
|
| 58: | $menuo = $menu->getOutput();
|
| 59: | }
|
| 60: | return $menuo;
|
| 61: | }
|
| 62: |
|
| 63: | protected function onaftercreate() {
|
| 64: | global $cmpname;
|
| 65: | parent::onaftercreate();
|
| 66: | if($this->text == "") $this->text = $cmpname;
|
| 67: | if($this->icon == "") $this->icon = SphpBase::sphp_settings()->comp_uikit_res_path . "/masters/default/imgs/android-icon-192x192.png";
|
| 68: | }
|
| 69: | protected function onrender() {
|
| 70: |
|
| 71: |
|
| 72: |
|
| 73: |
|
| 74: | switch($this->styler){
|
| 75: | default:{
|
| 76: | $df1 = "d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom";
|
| 77: | if(! $this->fullsize){
|
| 78: | $this->setPreTag('<div class="container" >');
|
| 79: | $this->setPostTag('</div>');
|
| 80: | }else{
|
| 81: | $df1 = "d-flex flex-wrap justify-content-center px-3 py-3 mb-4 border-bottom";
|
| 82: | }
|
| 83: | $this->setAttributeDefault("class",$df1 );
|
| 84: | $menuo = $this->getMenu(function($menu){
|
| 85: | $menu->setNavBarCss('navbar navbar-expand-md');
|
| 86: | $menu->setNavMenuCss('nav nav-pills');
|
| 87: | });
|
| 88: | $st = '<a href="'. getGateURL('index') .'" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none gap-3">
|
| 89: | <img src="'. $this->icon .'" class="img img-fluid" width="40" />
|
| 90: | <span class="fs-4">'. $this->text .'</span>
|
| 91: | </a>'. $menuo ;
|
| 92: | break;
|
| 93: | }case 1:{
|
| 94: | if(! $this->fullsize){
|
| 95: | $this->setPreTag('<div class="container" >');
|
| 96: | $this->setPostTag('</div>');
|
| 97: | }
|
| 98: | $menuo = $this->getMenu(function($menu){
|
| 99: | $menu->setNavBarCss('navbar navbar-expand-md');
|
| 100: | $menu->setNavMenuCss('nav nav-pills');
|
| 101: | });
|
| 102: | $this->setAttributeDefault("class", "d-flex justify-content-left py-3 px-3 border-bottom mb-3");
|
| 103: | $st = $menuo ;
|
| 104: | break;
|
| 105: | }case 2:{
|
| 106: | $df1 = "d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom";
|
| 107: | if(! $this->fullsize){
|
| 108: | $this->setPreTag('<div class="container" >');
|
| 109: | $this->setPostTag('</div>');
|
| 110: | }else{
|
| 111: | $df1 = "d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom px-3";
|
| 112: | }
|
| 113: | $this->setAttributeDefault("class",$df1 );
|
| 114: | $menuo = $this->getMenu(function($menu){
|
| 115: | $menu->setNavBarCss('navbar navbar-expand-md');
|
| 116: | $menu->setNavMenuCss('nav nav-pills');
|
| 117: | });
|
| 118: | $st = '<div class="col-md-3 mb-2 mb-md-0">
|
| 119: | <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
|
| 120: | <img src="'. $this->icon .'" class="img img-fluid" width="40" />
|
| 121: | </a>
|
| 122: | </div>
|
| 123: | '. $menuo .'
|
| 124: | <div class="col-md-3 text-end">
|
| 125: | <button id="btnlogin" type="button" class="btn btn-outline-primary me-2">Login</button>
|
| 126: | <button id="btnsignin" type="button" class="btn btn-primary">Sign-up</button>
|
| 127: | </div>';
|
| 128: | addHeaderJSFunctionCode("ready", "header1", '$("#btnlogin").on("click",function(){getURL("index-login.html");});'
|
| 129: | . '$("#btnsignin").on("click",function(){getURL("index-signin.html");});');
|
| 130: | break;
|
| 131: | }case 3:{
|
| 132: | $menuo = $this->getMenu(function($menu){
|
| 133: | $menu->disableNavBar();
|
| 134: | $menu->setNavMenuCss('nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0 text-white');
|
| 135: | });
|
| 136: | $this->setAttributeDefault("class", "p-3 text-bg-dark");
|
| 137: | $st = '
|
| 138: | <div class="container">
|
| 139: | <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
|
| 140: | <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
|
| 141: | <img src="'. $this->icon .'" class="img img-fluid" width="40" />
|
| 142: | </a>
|
| 143: | '. $menuo .'
|
| 144: | <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search" id="frmsearch" action="'. getEventURL('search','','index').'" method="post" enctype="mutipart/form-data">
|
| 145: | <input id="txtsearch" name="txtsearch" type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
|
| 146: | </form>
|
| 147: |
|
| 148: | <div class="text-end">
|
| 149: | <button id="btnlogin" type="button" class="btn btn-outline-light me-2">Login</button>
|
| 150: | <button id="btnsignin" type="button" class="btn btn-warning">Sign-up</button>
|
| 151: | </div>
|
| 152: | </div>
|
| 153: | </div>';
|
| 154: | addHeaderJSFunctionCode("ready", "header1", '$("#btnlogin").on("click",function(){getURL("index-login.html");});'
|
| 155: | . '$("#btnsignin").on("click",function(){getURL("index-signin.html");});');
|
| 156: | break;
|
| 157: |
|
| 158: | }case 4:{
|
| 159: | $menusub = '';
|
| 160: | $menuo = $this->getMenu(function($menu) use (&$menusub){
|
| 161: | $menu->disableNavBar();
|
| 162: | $menu->setNavMenuCss('nav col-xs-auto me-lg-auto mb-2 justify-content-center mb-md-0');
|
| 163: | $menusub = $menu->getHeaderSubMenu();
|
| 164: | });
|
| 165: | $this->setAttributeDefault("class", "p-3 mb-3 border-bottom");
|
| 166: | if( $menusub == ''){
|
| 167: | $menusub = '<div class="dropdown text-end ">
|
| 168: | <a href="#" class="d-block nav-dlink text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
| 169: | <img src="'. SphpBase::sphp_settings()->comp_uikit_res_path . "/masters/default/imgs/android-icon-192x192.png" .'" alt="mdo" width="32" height="32" class="rounded-circle">
|
| 170: | </a>
|
| 171: | <ul class="dropdown-menu text-small nav-dlink">
|
| 172: | <li><a class="dropdown-item" href="#">use setSubMenuFile as temp file</a></li>
|
| 173: | <li><a class="dropdown-item" href="#">for override this</a></li>
|
| 174: | <li><a class="dropdown-item" href="#">Profile</a></li>
|
| 175: | <li><hr class="dropdown-divider"></li>
|
| 176: | <li><a class="dropdown-item" href="#">Sign out</a></li>
|
| 177: | </ul>
|
| 178: | </div>
|
| 179: | ';
|
| 180: | }
|
| 181: |
|
| 182: | $st = '<div class="container">
|
| 183: | <div class="d-flex flex-wrap align-items-center justify-content-right justify-content-lg-start">
|
| 184: | <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
|
| 185: | <img src="'. $this->icon .'" class="img img-fluid" width="40" />
|
| 186: | </a>
|
| 187: | '. $menuo .'
|
| 188: | <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3 d-none d-lg-block" role="search" id="frmsearch" action="'. getEventURL('search','','index').'" method="post" enctype="mutipart/form-data">
|
| 189: | <input id="txtsearch" name="txtsearch" type="search" class="form-control" placeholder="Search..." aria-label="Search">
|
| 190: | </form>
|
| 191: | '. $menusub .'
|
| 192: | </div>
|
| 193: | </div>';
|
| 194: | addHeaderJSFunctionCode("ready", "header1", '$("#btnlogin").on("click",function(){getURL("index-login.html");});'
|
| 195: | . '$("#btnsignin").on("click",function(){getURL("index-signin.html");});');
|
| 196: | break;
|
| 197: | }case 5:{
|
| 198: | $menuo = $this->getMenu(function($menu){
|
| 199: | $menu->disableNavBar();
|
| 200: | $menu->setNavMenuCss('nav me-auto');
|
| 201: | });
|
| 202: | $this->setAttributeDefault("class", "py-3 mb-4 border-bottom");
|
| 203: | $st1 = '<nav class="py-2 bg-body-tertiary border-bottom">
|
| 204: | <div class="container d-flex flex-wrap">
|
| 205: | '. $menuo .'
|
| 206: |
|
| 207: | <ul class="nav">
|
| 208: | <li class="nav-item"><a href="'. getEventURL('login','','index') .'" class="nav-link link-body-emphasis px-2">Login</a></li>
|
| 209: | <li class="nav-item"><a href="'. getEventURL('signup','','index') .'" class="nav-link link-body-emphasis px-2">Sign up</a></li>
|
| 210: | </ul>
|
| 211: | </div>
|
| 212: | </nav>';
|
| 213: | $this->setPreTag($st1);
|
| 214: | $st = '<div class="container d-flex flex-wrap justify-content-center">
|
| 215: | <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none gap-3">
|
| 216: | <img src="'. $this->icon .'" class="img img-fluid" width="40" />
|
| 217: | <span class="fs-4">'. $this->text .'</span>
|
| 218: | </a>
|
| 219: | <form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search" id="frmsearch" action="'. getEventURL('search','','index').'" method="post" enctype="mutipart/form-data">
|
| 220: | <input id="txtsearch" name="txtsearch" type="search" class="form-control" placeholder="Search..." aria-label="Search">
|
| 221: | </form>
|
| 222: | </div>';
|
| 223: | break;
|
| 224: | }
|
| 225: |
|
| 226: |
|
| 227: | }
|
| 228: |
|
| 229: | $this->fu_unsetRenderTag();
|
| 230: | $cls = $this->getAttribute("class");
|
| 231: | if($this->fixed) $cls .= ' fixed-top';
|
| 232: |
|
| 233: |
|
| 234: | $stin = "";
|
| 235: | if($this->vertimenu){
|
| 236: | $t1 = ($this->menufile != "")? true: false;
|
| 237: | $mn1 = $this->getVertiMenu(function($menu) use ($t1){
|
| 238: | if($t1) $menu->brandicon = "";
|
| 239: |
|
| 240: |
|
| 241: | });
|
| 242: | $str2 = "";
|
| 243: | if($t1){
|
| 244: | $str2 = "margin-top: 400px;";
|
| 245: | }else{
|
| 246: | $st = "";
|
| 247: | }
|
| 248: | $stin = '<div class="row"><div class="sidebar-container col-4" style="z-index: 1040;"><div class="py-3 bg-dark border-right-2 rounded shadow-lg" style="'. $str2 .'"><button class="sidebar-toggle-btn">
|
| 249: | <i class="fas fa-chevron-left"></i>
|
| 250: | </button>'. $mn1 .'</div></div><div class="overlay"></div><div class="content-column col border rounded shadow-lg">';
|
| 251: | $this->element->setInnerPostTag('</div></div>');
|
| 252: | addHeaderJSFunctionCode('ready', 'header1a',"// Sidebar toggle functionality
|
| 253: | const sidebarContainer = $('.sidebar-container');
|
| 254: | const sidebarToggleBtn = $('.sidebar-toggle-btn');
|
| 255: | const mobileSidebarToggle = $('.mobile-sidebar-toggle');
|
| 256: | const overlay = $('.overlay');
|
| 257: |
|
| 258: | // Desktop toggle
|
| 259: | sidebarToggleBtn.on('click', function() {
|
| 260: | sidebarContainer.toggleClass('collapsed');
|
| 261: |
|
| 262: | // Change icon direction
|
| 263: | const icon = $(this).find('i');
|
| 264: | if (sidebarContainer.hasClass('collapsed')) {
|
| 265: | icon.removeClass('fa-chevron-left').addClass('fa-chevron-right');
|
| 266: | } else {
|
| 267: | icon.removeClass('fa-chevron-right').addClass('fa-chevron-left');
|
| 268: | }
|
| 269: | });
|
| 270: |
|
| 271: | // Mobile toggle
|
| 272: | mobileSidebarToggle.on('click', function() {
|
| 273: | sidebarContainer.toggleClass('mobile-open');
|
| 274: | });
|
| 275: |
|
| 276: | // Close sidebar when clicking overlay on mobile
|
| 277: | overlay.on('click', function() {
|
| 278: | sidebarContainer.removeClass('mobile-open');
|
| 279: | });
|
| 280: |
|
| 281: | // Close sidebar when clicking on a link (mobile)
|
| 282: | $('.sidebar-container a').on('click', function() {
|
| 283: | if (window.innerWidth < 769) {
|
| 284: | sidebarContainer.removeClass('mobile-open');
|
| 285: | }
|
| 286: | });",true);
|
| 287: | }
|
| 288: |
|
| 289: | $this->setInnerPreTag('<button class="mobile-sidebar-toggle d-lg-none">
|
| 290: | <i class="fas fa-bars"></i>
|
| 291: | </button><header id="'. $this->name .'" class="'. $cls .'">' . $st . '</header>' . $stin);
|
| 292: |
|
| 293: | if($this->fixed){
|
| 294: | addHeaderJSFunctionCode('ready', 'header', '$(window).on("scroll",function(){'
|
| 295: | . 'const threshold = $(document).scrollTop() > 50;
|
| 296: | $("#'. $this->name .'").toggleClass(\'scrolled\', threshold);});$(window).scroll();');
|
| 297: | }
|
| 298: |
|
| 299: |
|
| 300: | }
|
| 301: | }
|
| 302: | |