Recent Topics Widget of specific forum with local storage management

[Van-Helsing]

Hello,
How can I add to this tutorial code https://help.forumotion.com/t129060-widget-recent-topics-of-a-specific-sub-forum local storage management? Forum version: PunBB

[Ange Tuteur]

Hello @Black-Shadow

Add this to a widget :
Modules > Forum widgets management > Create new

Code:

<div id="loadedTopics-a" class="topicBox">
  <noscript>Unable to get topics, please enabled JavaScript to use this widget.</noscript> 
</div><a href="#" class="refresh">Refresh</a>
<script type="text/javascript">//<![CDATA[
(function() {
  var forum_id = 1,
      recent_count = 6,
      title_length = 30,
      cache_time = 29*60*1000,
      storage = window.localStorage,
      block = document.getElementById('loadedTopics-a');
 
  if (storage['topics'+forum_id] && storage['topicsExp'+forum_id] > +new Date - cache_time) block.innerHTML = storage['topics'+forum_id];
  else loadTopics();
  block.nextSibling.onclick = function() {
    for (var i=0,a=block.childNodes; i<a.length; i++) a[i].innerHTML = 'loading...';
    loadTopics();
    return false;
  };
  function loadTopics() {
    jQuery(block).load('/f'+forum_id+'- a.topictitle:lt('+recent_count+')',function() {
      for (var i=0,a=block.childNodes; i<a.length; i++) if (a[i].innerHTML.length > title_length) a[i].innerHTML = a[i].innerHTML.slice(0,title_length).trim() + '...';
      if (storage) storage['topics'+forum_id] = block.innerHTML, storage['topicsExp'+forum_id] = +new Date;
    });
  };
})();
//]]></script>

There's a few things you can use to customize the results of the widget.

forum_id : the id of the forum you want to load
recent_count : the amount of topics you want to display
title_length : the max amount of characters you want in the topic title
cache_time : the amount of time the topics are cached. mm*ss*ms

You can use the refresh button to forcefully refresh the widget, basically update the localStorage for the widget. If you make any changes, just click refresh so they take effect on your end.

Then add some CSS for the topic title style :
Display > Colors > CSS stylesheet

Code:

.topicBox a.topictitle {
  color:#666;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  display:block;
  margin:2px 0;
  padding:3px;
}

[Van-Helsing]

Hello Ange,
It displays the global announcements too, is it possible to bypass them? How can I add an icon before the topic title?

[Ange Tuteur]

Go to Display > Templates > General > topics_list_box

Find :
( near beginning of template, the first occurrence )

Code:

   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">{topics_list_box.row.L_REPLIES}</th>
            <th class="tc3">{topics_list_box.row.L_VIEWS}</th>
            <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
         </tr>
      </thead>

Replace by :

Code:

   <div class="main-content announcement">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">{topics_list_box.row.L_REPLIES}</th>
            <th class="tc3">{topics_list_box.row.L_VIEWS}</th>
            <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
         </tr>
      </thead>

Save and publish


Then find this line in the widget :

Code:

'/f'+forum_id+'- a.topictitle:lt('+recent_count+')'

and replace it with :

Code:

'/f'+forum_id+'- .main-content:not(.main-content.announcement) a.topictitle:lt('+recent_count+')'

[Van-Helsing]

I can't find these codes in topics_list_box.
Here it is my template code:

Code:


<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
  <!-- BEGIN multi_selection -->
      <script type="text/javascript">
      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
        var all_checked = true;
        for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
        if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
        }
        }
        document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
      }
      function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
        for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
        if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
        }
        }
      }
      </script>
  <!-- END multi_selection -->
  <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <h1 class="page-title">{topics_list_box.row.L_TITLE} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
  </div>
  <div class="main-content">
  <table cellspacing="0" class="table">
      <thead>
      </thead>
      <tbody class="statused">
<!-- END header_table -->
<!-- BEGIN header_row -->
<strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->
<!-- BEGIN topic -->
  <!-- BEGIN table_sticky -->
      </tbody>
  </table>
  </div>
  <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /  >
      <!-- END multi_selection -->
      <h2>{topics_list_box.row.topic.table_sticky.L_TITLE} [{topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
  </div>
  <div class="main-content">
  <table cellspacing="0" class="table">
      <thead>
      </thead>
      <tbody class="statused">
  <!-- END table_sticky -->
      <tr>
        <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
            <span class="stats">
              <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
            </span>
            <!-- BEGIN single_selection -->
            <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
            <!-- END single_selection -->
                                {topics_list_box.row.ICON}
            {topics_list_box.row.NEWEST_POST_IMG}
            {topics_list_box.row.PARTICIPATE_POST_IMG}
            {topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>
            {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}
              {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
            <!-- BEGIN switch_description -->
                                <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            <!-- END switch_description -->
        </td>
              <td id="postA" class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><span class="ipsBadge ipsBadge_orange" data-id="hot_topic" style="display:none;">HOT</span><strong data-id="replies" class="RP">{topics_list_box.row.REPLIES}</strong> Απαντήσεις<br /><strong class="VW"> {topics_list_box.row.VIEWS}</strong> Αναγνώσεις</td>
        <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><br />Τελευταία απάντηση <br />{topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR}<br />{topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.LAST_POST_IMG}</td>
        <!-- BEGIN multi_selection -->
        <td><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
        <!-- END multi_selection -->
      </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
  <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->
<!-- BEGIN bottom -->
      </tbody>
  </table>
  </div>
  <div class="main-foot clearfix">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
      <p class="options">
        <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a> {S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
      </p>
  </div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->
<script type="text/javascript">
                //<![CDATA[
            /***
            * Copyright (c) 2013 JScript <jscriptbrasil at live.com>
            * This work is free. You can redistribute it and/or modify it
            * under the terms of the WTFPL, Version 2
            *
            * For more information, go to the home page:
            * http://punbb.forumeiros.com/forum
            */
                var replies_value = 5;
                var target = $('td.tc2');
           
                target.each(function(index){
                    var oThis = $(this);
                    var replies = oThis.children('strong[data-id="replies"]').text();
                    if (replies > replies_value) {
                        oThis.children('span[data-id="hot_topic"]').show();
                    }
                });
                //]]>
            </script>
<style>
.ipsBadge {
    display: inline-block;
    height: 15px;
    line-height: 15px;
    padding: 0px 5px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    background-image: url('http://www.ipbfocus.com/forums/public/style_images/ipbfs34x/highlight.png');
    background-repeat: repeat-x;
    background-position: 0px -1px;
    vertical-align: middle;
}
.ipsBadge_orange {
              background: #ED7710;
  margin-right: 14px;
}
.tcl.tdtopics #ipsBadge strong {
    background:url('http://i56.servimg.com/u/f56/17/97/98/69/highli20.png') repeat scroll 0% 0% #7BA60D;
    vertical-align: middle;
    display: inline-block;
    height: 16px;
    line-height: 16px !important;
    padding: 0px 5px;
    font-size: 9px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    color: rgb(255, 255, 255) !important;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    background-repeat: repeat-x;
    background-position: 0px -1px;
}
</style> 


[Ange Tuteur]

Try with this :

Code:

<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
  <!-- BEGIN multi_selection -->
      <script type="text/javascript">
      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
        var all_checked = true;
        for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
        if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
        }
        }
        document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
      }
      function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
        for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
        if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
        }
        }
      }
      </script>
  <!-- END multi_selection -->
  <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <h1 class="page-title">{topics_list_box.row.L_TITLE} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
  </div>
  <div class="main-content announcement">
  <table cellspacing="0" class="table">
      <thead>
      </thead>
      <tbody class="statused">
<!-- END header_table -->
<!-- BEGIN header_row -->
<strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->
<!-- BEGIN topic -->
  <!-- BEGIN table_sticky -->
      </tbody>
  </table>
  </div>
  <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /  >
      <!-- END multi_selection -->
      <h2>{topics_list_box.row.topic.table_sticky.L_TITLE} [{topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
  </div>
  <div class="main-content">
  <table cellspacing="0" class="table">
      <thead>
      </thead>
      <tbody class="statused">
  <!-- END table_sticky -->
      <tr>
        <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
            <span class="stats">
              <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
            </span>
            <!-- BEGIN single_selection -->
            <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
            <!-- END single_selection -->
                                {topics_list_box.row.ICON}
            {topics_list_box.row.NEWEST_POST_IMG}
            {topics_list_box.row.PARTICIPATE_POST_IMG}
            {topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>
            {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}
              {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
            <!-- BEGIN switch_description -->
                                <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            <!-- END switch_description -->
        </td>
              <td id="postA" class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><span class="ipsBadge ipsBadge_orange" data-id="hot_topic" style="display:none;">HOT</span><strong data-id="replies" class="RP">{topics_list_box.row.REPLIES}</strong> Απαντήσεις<br /><strong class="VW"> {topics_list_box.row.VIEWS}</strong> Αναγνώσεις</td>
        <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><br />Τελευταία απάντηση <br />{topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR}<br />{topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.LAST_POST_IMG}</td>
        <!-- BEGIN multi_selection -->
        <td><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
        <!-- END multi_selection -->
      </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
  <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->
<!-- BEGIN bottom -->
      </tbody>
  </table>
  </div>
  <div class="main-foot clearfix">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
      <p class="options">
        <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a> {S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
      </p>
  </div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->
<script type="text/javascript">
                //<![CDATA[
            /***
            * Copyright (c) 2013 JScript <jscriptbrasil at live.com>
            * This work is free. You can redistribute it and/or modify it
            * under the terms of the WTFPL, Version 2
            *
            * For more information, go to the home page:
            * http://punbb.forumeiros.com/forum
            */
                var replies_value = 5;
                var target = $('td.tc2');
         
                target.each(function(index){
                    var oThis = $(this);
                    var replies = oThis.children('strong[data-id="replies"]').text();
                    if (replies > replies_value) {
                        oThis.children('span[data-id="hot_topic"]').show();
                    }
                });
                //]]>
            </script>
<style>
.ipsBadge {
    display: inline-block;
    height: 15px;
    line-height: 15px;
    padding: 0px 5px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    background-image: url('http://www.ipbfocus.com/forums/public/style_images/ipbfs34x/highlight.png');
    background-repeat: repeat-x;
    background-position: 0px -1px;
    vertical-align: middle;
}
.ipsBadge_orange {
              background: #ED7710;
  margin-right: 14px;
}
.tcl.tdtopics #ipsBadge strong {
    background:url('http://i56.servimg.com/u/f56/17/97/98/69/highli20.png') repeat scroll 0% 0% #7BA60D;
    vertical-align: middle;
    display: inline-block;
    height: 16px;
    line-height: 16px !important;
    padding: 0px 5px;
    font-size: 9px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    color: rgb(255, 255, 255) !important;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    background-repeat: repeat-x;
    background-position: 0px -1px;
}
</style> 

[Van-Helsing]

I changed the code in topics_list_box but I have an error in the widget code it displays the text "Preview the topic" http://prntscr.com/5ty7x7 when I am accessing a forum.

Code:


<div id="loadedTopics-a" class="topicBox">
                         <noscript>Unable to get topics, please enabled JavaScript to use this widget.</noscript>         
</div><br /><a href="#" class="refresh">Ανανέωση</a>        <script type="text/javascript">//<![CDATA[
        (function() {
          var forum_id = 23,
              recent_count = 6,
              title_length = 30,
              cache_time = 29*60*1000,
              storage = window.localStorage,
              block = document.getElementById('loadedTopics-a');
         
          if (storage['topics'+forum_id] && storage['topicsExp'+forum_id] > +new Date - cache_time) block.innerHTML = storage['topics'+forum_id];
          else loadTopics();
          block.nextSibling.onclick = function() {
            for (var i=0,a=block.childNodes; i<a.length; i++) a[i].innerHTML = 'loading...';
            loadTopics();
            return false;
          };
          function loadTopics() {
            jQuery(block).load('/f'+forum_id+'- .main-content:not(.main-content.announcement) a.topictitle:lt('+recent_count+')',function() {
              for (var i=0,a=block.childNodes; i<a.length; i++) if (a[i].innerHTML.length > title_length) a[i].innerHTML = a[i].innerHTML.slice(0,title_length).trim() + '...';
              if (storage) storage['topics'+forum_id] = block.innerHTML, storage['topicsExp'+forum_id] = +new Date;
            });
          };
        })();
        //]]></script><style>
        .topicBox a.topictitle {
          color:#666;
          background:#EEE;
          border:1px solid #CCC;
          border-radius:3px;
          display:block;
          margin:2px 0;
          padding:3px;
          width: 185px;
        }
        a.topictitle {
        width: 150px;
        }
        a.refresh {
    background: url("http://i78.servimg.com/u/f78/17/31/71/58/topic_10.png") repeat-x scroll center top #212121;
    color: #FFF!important;
    border-radius: 4px;
    box-shadow: 0px 1px 0px 0px #5C5C5C inset, 0px 2px 3px rgba(0, 0, 0, 0.2);
    border-color: #212121;
    font-size: 12px;
    padding: 5px 10px;
    font-weight: bold;
    text-align: center;
    width: 90px;
    margin-left: 55px;
}
</style>

[Ange Tuteur]

In your preview button script. Replace the first selector a.topictitle with .tcl a.topictitle. That should keep it to the topic lists.

[Van-Helsing]

Thank you very much Ange its solved.

[Ange Tuteur]

You're welcome !

Archived

Have a great day.