كود تبويبات الاقسام

$(function() {
  if (/\/c\d+-/.test(window.location.href)) return; // return if category
 
  // automatically detects the version
  var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('#wrap')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('fa_edge') ? 4 : 'badapple';
 
  // error notifications
  if (version == 'badapple' || !window.JSON || !window.localStorage) {
    var errString = 'The plugin "fa_starred" could not be executed because : ';
 
    if (version == 'badapple') errString += '\nYour forum version is not supported.';
    if (!window.JSON) errString += '\nJSON is not supported by your browser';
    if (!window.localStorage) errString += '\nThe Storage API is not support by your browser.';
 
    window.console && console.error ? console.error(errString) : alert(errString);
    return;
  }
 
  // get fontawesome if unavailable
  if (!$('link[href$="font-awesome.min.css"]')[0]) {
    document.getElementsByTagName('HEAD')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />');
  }
 
  window.fa_starred = {
    version : version, // forum version
    forums : localStorage.fa_starred_forums ? JSON.parse(localStorage.fa_starred_forums) : null,
 
    // language settings
    lang : {
        star : 'Star this forum',
      unstar : 'Unstar this forum',
      starred : 'الاقسام المفضلة'
    },
 
    icon : {
        star : '',
      unstar : ''
    },
 
    // selectors
    select : {
      content : version ? document.getElementById('main-content') : $('#content-container td:has(> img[height="5"])')[0],
      category : ['.forumline:has(.secondarytitle)', '.forabg', '.main:has(.tcr) .main-content', '.borderwrap:has(.index-box)', '.forabg'][version],
      forum :'a.' + (version ? 'conan2000': ''),
      row : version == 1 ? '.forum-section' : version == 4 ? '.forum-block' : 'tr'
    },
 
    // move the selected forum to the "starred" category
    star : function(that, id, startup) {
      if (!fa_starred.forums) fa_starred.forums = {};
      if (!fa_starred.board) fa_starred.createStarBoard();
 
      if (!fa_starred.forums[id]) {
        // clone the row and add it to the star board
        var clone = $(that).closest(fa_starred.select.row)[0].cloneNode(true),
            rows = $(that).closest(fa_starred.select.row).parent().find(fa_starred.select.row);
 
        // update the star attributes for the clone
        $('.fa_star', clone).attr({
          'onclick' : 'fa_starred.unstar(this, ' + id + '); return false',
          'class' : 'fa_unstar',
          'title' : fa_starred.lang.unstar
        }).html('<i class="fa">' + fa_starred.icon.unstar + '</i>');
 
        fa_starred.list.appendChild(clone); // append the clone to the starred category
 
        $(that).closest(fa_starred.select.row)[0].style.display = 'none'; // hide the original row
 
        // check if all forums are hidden for this category
        for (var i = 0, j = rows.length, k = 0; i < j; i++) {
          if (/none/.test(rows[i].style.display)) k++;
        }
 
        // hide the category if all forums are hidden
        if (i == k) {
          $(that).closest(fa_starred.select.category)[0].className += ' fa_star_hidden';
        }
 
        // jump to the star board if it's out of sight
        if (!startup && document.getElementById('fa_star_board').getBoundingClientRect().top < 0) {
          window.location.hash = '';
          window.location.hash = '#fa_star_board';
        }
 
        // update storage
        fa_starred.forums[id] = 1;
        localStorage.fa_starred_forums = JSON.stringify(fa_starred.forums);
      }
 
    },
 
    // unstar the selected forum
    unstar : function (that, id) {
      var forum, catg, i = 0, j;
 
      fa_starred.list.removeChild($(that).closest(fa_starred.select.row)[0]); // remove cloned row
 
      // update variables
      forum = $(fa_starred.select.forum + '[href^="/f' + id + '-"]')[0]; // original forum
      catg = $(forum).closest(fa_starred.select.category)[0]; // original category
 
      $(forum).closest(fa_starred.select.row)[0].style.display = ''; // show the original forum's row
 
      // show the category if all forums were hidden
      if (/fa_star_hidden/.test(catg.className)) {
        catg.className = catg.className.replace(/fa_star_hidden/, '');
      }
 
      // delete the starred forum and check if there are anymore stars
      delete fa_starred.forums[id];
      for (j in fa_starred.forums) {
        if (fa_starred.forums[j]) i++;
      }
 
      // update storage
      if (i) {
        localStorage.fa_starred_forums = JSON.stringify(fa_starred.forums);
      } else {
        fa_starred.forums = null;
        localStorage.removeItem('fa_starred_forums');
 
        // remove nodes
        if (version == 2) {
          fa_starred.board.parentNode.removeChild(fa_starred.board.previousSibling); // remove header for punbb
        }
        fa_starred.board.parentNode.removeChild(fa_starred.board);
 
        // delete node references
        delete fa_starred.board;
        delete fa_starred.list;
      }
 
    },
 
    // create the "starred" category
    createStarBoard : function() {
      var catg = $(fa_starred.select.category, fa_starred.select.content)[0],
          board = catg ? catg.cloneNode(true) : null,
          rows = $(fa_starred.select.row, board);
 
      if (!catg) return;
 
      board.id = 'fa_star_board';
      board.style.display = '';
 
      if (version != 2) {
        board.getElementsByTagName('H2')[0].innerHTML = fa_starred.lang.starred; // change category title
      }
 
      // find forum list and remove exisiting rows in the clone
      fa_starred.list = rows[0].parentNode;
      rows.remove();
 
      // punbb insertion method
      if (version == 2) {
        var head = catg.previousSibling.cloneNode(true);
        head.getElementsByTagName('H2')[0].innerHTML = fa_starred.lang.starred;
 
        catg.parentNode.insertBefore(board, catg.previousSibling);
        board.parentNode.insertBefore(head, board);
      } else {
        catg.parentNode.insertBefore(board, catg); // default insertion
      }
 
      fa_starred.board = board;
    }
  };
 
  fa_starred.select.row += ':has(' + fa_starred.select.forum + ')'; // update row selector
 
  // general startup
  var a = $(fa_starred.select.forum, fa_starred.select.content),
      i = 0,
      j = a.length,
      k,
      id;
 
  // setup star board and reset forum states if starred
  if (fa_starred.forums) {
    if (!fa_starred.board) fa_starred.createStarBoard();
    for (k in fa_starred.forums) {
      fa_starred.forums[k] = 0;
    }
  }
 
  // setup stars and starred forums
  for (; i < j; i++) {
    id = a[i].href.replace(/.*?\/f(\d+).*/, '$1');
 
    a[i].insertAdjacentHTML('afterend', '<a href="#" class="fa_star" onclick="fa_starred.star(this, ' + id + '); return false;" title="' + fa_starred.lang.star + '"><i class="fa">' + fa_starred.icon.unstar + '</i></a>');
 
    if (fa_starred.forums) {
      for (k in fa_starred.forums) {
        if (k == id) {
          fa_starred.star(a[i], id, true);
        }
      }
    }
  }

  // إضافة مستمعات الأحداث لعنصر .forum-description h3
  $('.forum-description h3').on('mouseenter', function() {
    $(this).find('.fa_star').css('opacity', 1); // يظهر النجمة
  }).on('mouseleave', function() {
    $(this).find('.fa_star').css('opacity', 0); // يخفي النجمة
  });

  document.getElementsByTagName('HEAD')[0].insertAdjacentHTML('beforeend', '<style type="text/css">a.fa_star,a.fa_unstar{color:#999!important;font-size:16px;vertical-align:-2px;margin-left:3px;opacity:0}a.fa_star:hover,a.fa_unstar,li:hover a.fa_star,tr:hover a.fa_star{opacity:1}a.fa_star i,a.fa_unstar i{position:relative}a.fa_star i:hover:after,a.fa_unstar i:after{content:"' + fa_starred.icon.star + '";position:absolute;left:0;bottom:0}a.fa_unstar i:hover:after{content:""} .fa_star_hidden {display:none!important}</style>');
});

$(function() {
  // automatically detects the version
  var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('fa_edge') ? 4 : 'badapple';
 
  if (version == 'badapple') {
    if (window.console && console.warn) console.warn('The plugin "fa_tabs" is not supported for your forum version.');
    return;
  }
 
  window.fa_tabs = {
    active : my_getcookie('fa_tab_active') || 0, // active tab
    list : [], // category list
    version : version, // forum version
 
    // language settings
    lang : {
      title : '',
      placeholder : 'Category',
      all : 'الكل'
    },
 
    // selectors
    select : {
      content : !version ? '#content-container td:has(> img[height="5"])' : 'main-content',
      category : ['.forumline:has(.secondarytitle)', '.forabg', '.main:has(.tcr) .main-head', '.borderwrap:has(.index-box)', '.forum-category'][version]
    },
 
    // function for changing the active category
    change : function(index) {
      my_setcookie('fa_tab_active', index); // save the active tab to a cookie
  
      // actions to run if the tab is not "all"
      if (index != 'all') {
        if (fa_tabs.active == 'all') {
          fa_tabs.tab[0].previousSibling.className = '';
          fa_tabs.display('none');
        } else {
          fa_tabs.tab[fa_tabs.active].className = '';
          fa_tabs.list[fa_tabs.active].style.display = 'none';
        }
 
        fa_tabs.tab[index].className = 'fa_tabactif';
        fa_tabs.list[index].style.display = '';
  
        if (fa_tabs.version == 2) {
          if (fa_tabs.active != 'all') fa_tabs.list[fa_tabs.active].nextSibling.style.display = 'none';
          fa_tabs.list[index].nextSibling.style.display = '';
        }
      } else {
        if (fa_tabs.active != 'all') fa_tabs.tab[fa_tabs.active].className = '';
        fa_tabs.tab[0].previousSibling.className = 'fa_tabactif';
        fa_tabs.display('');
      }
  
      fa_tabs.active = index;
    },
 
    // change the display of all categories
    display : function(state) {
      for (var i = 0, j = fa_tabs.list.length; i < j; i++) {
        fa_tabs.list[i].style.display = state;
        if (version == 2) fa_tabs.list[i].nextSibling.style.display = state;
      };
    },
 
    // stop tab scrolling
    stop : function() {
      if (fa_tabs.interval) {
        window.clearInterval(fa_tabs.interval);
        fa_tabs.interval = null;
      }
    },
 
    // scroll tablist
    scroll : function(by, max) {
      if (!fa_tabs.interval) {
        var node = document.getElementById('fa_tablist').firstChild.firstChild;
  
        fa_tabs.interval = window.setInterval(function() {
          var margin = +node.style.marginLeft.replace(/px/, '');
          (by < 0 && margin <= max) || (by > 0 && margin >= max) ? fa_tabs.stop() : node.style.marginLeft = margin + by + 'px';
        }, 1);
      }
    }
 
  };
 
  // startup variables
  var frag = document.createDocumentFragment(),
      container = $('<div id="fa_category_tabs"><h2 id="fa_tabs_title">' + fa_tabs.lang.title + '</h2></div>')[0],
      tablist = $('<div id="fa_tablist"><div class="inner_tabs"><div></div></div></div>')[0],
      catglist = $('<div id="fa_catglist" />')[0],
  
      a = $(fa_tabs.select.category, !version ? $(fa_tabs.select.content)[0] : document.getElementById(fa_tabs.select.content)),
      i = 0,
      j = a.length,
      htmlStr = '<a href="javascript:fa_tabs.change(\'all\');">' + fa_tabs.lang.all + '</a>';
 
  // drop off the main container before the first category
  a[0] && a[0].parentNode.insertBefore(container, a[0]);
 
  // loop through each category
  for (; i < j; i++) {
    if (version == 2) var next = a[i].nextSibling;
 
    // create our tabs
    htmlStr += '<a href="javascript:fa_tabs.change(' + i + ');">' + ($('H2:first', a[i]).text() || fa_tabs.lang.placeholder + ' ' + i) + '</a>';
 
    // append the category to the list and hide it
    catglist.appendChild(a[i]);
    a[i].style.display = 'none';
 
    // get the next sibling as well for punbb
    if (version == 2) {
      catglist.appendChild(next);
      next.style.display = 'none';
    }
 
    fa_tabs.list[i] = a[i]; // cache the category to the array
  }
 
  if (fa_tabs.list[0]) {
    tablist.firstChild.firstChild.innerHTML = htmlStr; // fill in the tablist
    fa_tabs.tab = [].slice.call(tablist.getElementsByTagName('A')); // create an array for the tabs
    fa_tabs.tab.shift(); // remove the all tab
 
    fa_tabs.change(fa_tabs.active); // setup the active tab
 
    // finally add the content to the document
    frag.appendChild(tablist);
    frag.appendChild(catglist);
    container.appendChild(frag);
 
    window.setTimeout(function() {
      if (tablist.firstChild.scrollWidth > tablist.firstChild.clientWidth) {
        tablist.className = 'fa_tabs_overflow';
        tablist.firstChild.firstChild.style.marginLeft = '0px';
        tablist.insertAdjacentHTML('beforeend', '<a class="tab_scroller scroll_left" href="#" onmousedown="fa_tabs.scroll(1, 0); return false;" onclick="fa_tabs.stop(); return false;" onmouseout="fa_tabs.stop();"><</a><a class="tab_scroller scroll_right" href="#" onmousedown="fa_tabs.scroll(-1, -' + (tablist.firstChild.scrollWidth - tablist.firstChild.clientWidth) + '); return false;" onclick="fa_tabs.stop(); return false;" onmouseout="fa_tabs.stop();">></a>');
      }
    }, 100);
  }
});
 
$('head').append('<style type="text/css">#fa_tabs_title{color:#333;font-size:24px;font-weight:400;font-family:arial,sans-serif;margin:3px;line-height:24px}.inner_tabs a,a.tab_scroller{font-family:arial,sans-serif;height:30px;line-height:30px}#fa_tablist{position:relative;white-space:nowrap}#fa_tablist.fa_tabs_overflow{padding:0 18px}a.tab_scroller{color:#FFF;background:#333;font-size:16px;text-align:center;position:absolute;bottom:2px;width:15px;opacity:.1}a.tab_scroller.scroll_left{left:0}a.tab_scroller.scroll_right{right:0}#fa_tablist:hover a.tab_scroller{opacity:.7}#fa_tablist a.tab_scroller:hover{opacity:1}#fa_catglist{background:#EEE;border:1px solid #CCC;border-radius:3px;padding:10px 6px}.inner_tabs a.fa_tabactif,.inner_tabs a:hover{background:#EEE;position:relative;bottom:-1px;opacity:1}</style>');

 <style>

.forum-contdescription img {
    width: 100%;
    height: 133px;
}
.forum-description, .posts-description {
    width: 100%;
}
.forum-description h3 {
    padding: 11px !important;
    background: antiquewhite;
}
.forum-lastpost-location, .forum-lastpost-author, .forum-lastpost-time {
    display: inline !important;
    width: 100%;
}
.forum-description img {
    margin-left: 11px;
}
.forum-section, .posts-section {
    background-color: #8783831a;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    display: block;
    line-height: 22px;
    margin-top: 0;
    margin-bottom: 22px;
    padding: 0;
    border: dotted 1px #000;
}
.forum-header, .posts-header {
    background-color: #686766;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.1);
    color: #FFF;
    border-radius: 3px;
    display: flex;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    padding: 11px;
    position: relative;
    justify-content: center;
}

.inner_tabs {
    font-size: 22px;
    text-align: center;
    overflow: hidden;
    padding-bottom: 1px;
    margin-bottom: -1px;
}

.inner_tabs a {
    color: #000000 !important;
    background: #abd8fb;
    border: 1px solid #CCC;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    padding: 0 10px;
    margin: 3px 3px 0;
}

 </style>
<ul class="action-bar action-bar-top">
   <!-- BEGIN switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_NEW}">
         <i class="material-icons">new_releases</i>&nbsp;{L_SEARCH_NEW}
      </a>
   </li>
   <li>
      <a href="{U_SEARCH_SELF}">
         <i class="material-icons">account_box</i>&nbsp;{L_SEARCH_SELF}
      </a>
   </li>
   <!-- END switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_UNANSWERED}">
         <i class="material-icons">chat_bubble_outline</i>&nbsp;{L_SEARCH_UNANSWERED}
      </a>
   </li>
   <!-- BEGIN switch_user_logged_in -->
   <li class="rightside">
      <a href="{U_MARK_READ}" accesskey="m">
         <i class="material-icons">done_all</i>&nbsp;{L_MARK_FORUMS_READ}
      </a>
   </li>
   <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="forabg">
   <div class="forum-header">
      <div class="category-title">
         <i class="material-icons">description</i>
         <span>{catrow.tablehead.L_FORUM}</span>
      </div>
      
   </div>
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
   <div class="forum-section {catrow.forumrow.FOLDER_CLASSNAME} {catrow.forumrow.TYPE_SECTION}">
      <div class="forum-icon" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}">
         <i class="material-icons">forum</i>
      </div>
      <div class="forum-content">
         <div class="forum-description">
                        <div class="forum-contdescription">{catrow.forumrow.FORUM_DESC}</div>
            <h3><a href="{catrow.forumrow.U_VIEWFORUM}" class="conan2000">{catrow.forumrow.FORUM_NAME}</a></h3>
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                          <div class="forum-lastpost">
            <div class="avatar-default">
               <!-- BEGIN avatar -->
               {catrow.forumrow.avatar.LAST_POST_AVATAR}
               <!-- END avatar -->
               <!-- BEGIN ads -->
               <img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}"/>
               <!-- END ads -->
            </div>
            <div class="forum-lastpost-inner">
               <!-- BEGIN switch_topic_title -->
               <a class="topic-title" href="{catrow.forumrow.U_LATEST_TOPIC}"
                  title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
               <!-- END switch_topic_title -->
               <!-- BEGIN ads -->
               <a class="topic-title" href="{catrow.forumrow.ads.LINK}"
                  title="{catrow.forumrow.ads.TITLE}">{catrow.forumrow.ads.TITLE}</a>
               <!-- END ads -->
               <span>
                     <!-- BEGIN ads -->
                        <span class="forum-lastpost-location">
                           <i class="material-icons">place</i>{catrow.forumrow.ads.LOCATION}
                        </span>
                  <!-- END ads -->
                     <span class="forum-lastpost-author">
                        <i class="material-icons">person</i>{catrow.forumrow.USER_LAST_POST}
                                <!-- BEGIN ads -->
                                {catrow.forumrow.ads.ALIAS}
                                <!-- END ads -->
                     </span>
                     <span class="forum-lastpost-time">
                        <i class="material-icons">access_time</i><a href="{catrow.forumrow.U_LATEST_TOPIC_POST}">{catrow.forumrow.LAST_POST_HOUR}</a>
                        <!-- BEGIN ads -->
                                {catrow.forumrow.ads.DATE}
                                <!-- END ads -->
                     </span>
                  </span>
            </div>
         </div>
         </div>
         
         
      </div>
   </div>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
</div><!-- <div class="forum" /> -->
<!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_forum_images -->
<div class="forum">
   <div class="forum-header">
      <div class="category-title">
         <i class="material-icons">mms</i>
         <span>{switch_forum_images.TITLE}</span>
      </div>
   </div>
   <div class="container-imgs-list" style="max-height: 500px; margin-top: 8px" id="imageList">
        {switch_forum_images.SCRIPTS}
   </div>
</div>
<!-- END switch_forum_images -->

<!-- BEGIN switch_on_index -->
<ul class="action-bar action-bar-bottom">
   <li>
      <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
   </li>
   <li>
      <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
   </li>
   <li class="last">
      <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
   </li>
   <!-- BEGIN switch_delete_cookies -->
   <li class="rightside">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">
         <i class="material-icons">delete</i>&nbsp;{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}
      </a>
   </li>
   <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
   //<![CDATA[
   $(document).ready(function () {
      var curid = '{CUR_ID}';

      var btn_collapse = $('<div/>', {
         class: 'forum-hide',
         html: '<div class="forum-hide-icon-a"></div><div class="forum-hide-icon-b"></div>',
      });

      var collapsed = [];

      if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
         collapsed = readCookie('collapsed').split(',');
      }

      $(document).on('click', '.forum-hide', function () {
         $(this).toggleClass('forum-show');
         $(this).parents('.forum').toggleClass('forum-hidden');

         if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
            collapsed = readCookie('collapsed').split(',');
         }

         if (!$(this).parents('.forum').hasClass('forum-hidden')) {
            removeFromArray(curid + '.' + $(this).parents('.forum').data('cindex'), collapsed);

            createCookie('collapsed', collapsed);
         } else {
            collapsed.push(curid + '.' + $(this).parents('.forum').data('cindex'));

            createCookie('collapsed', collapsed);
         }
      });

      $('.forum').each(function (i) {
         $(this).data('cindex', '' + i);

         $(btn_collapse)
            .clone()
            .attr('id', 'forum' + i)
            .appendTo($(this).find('.forum-header'));

         if ($.inArray(curid + '.' + i, collapsed) > -1) {
            $(this).find('.forum-hide').toggleClass('forum-show');
            $(this).toggleClass('forum-hidden');
         }

         if ($(this).find('.type-classified').length) {
            $(this)
               .addClass('type-table-classified')
               .find('.type-classified')
               .find('.forum-statistics-posts').remove();
         }
      });
   });

   function removeFromArray(item, array) {
      var i = array.indexOf(item);

      if (i > -1) {
         array = array.splice(i, 1);
      }
   }

   function createCookie(name, value, days) {
      var expires;

      if (days) {
         var date = new Date();
         date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
         expires = "; expires=" + date.toGMTString();
      } else {
         expires = "";
      }
      document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
   }

   function readCookie(name) {
      var nameEQ = encodeURIComponent(name) + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
         var c = ca[i];
         while (c.charAt(0) === ' ') c = c.substring(1, c.length);
         if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
      }
      return null;
   }

   //]]>
</script>