I want to improve how the Archives are displayed on SimpleBlog, something like:

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("li.years").click(function(){
  $(this).children('ul').toggle();
  return false;
  });
});

$(document).ready(function(){
  $("li.months").click(function(){
  $(this).children('ul').toggle();
  return false;
  });
});

</script>
</head>

<body>
<ul>
<li class="years">2017</p>
<ul>
  <li class="months">January
      <ul>
      <li class="posts">First post name</li>
      <li class="posts">Second post name</li>
    </ul>
     </li>
  <li class="months">February
    <ul>
      <li class="posts">First post name</li>
      <li class="posts">Second post name</li>
    </ul>
     </li>
</ul>
</li>
</ul>

</body>
</html>

but I can't adapt the existing php code. I think it needs to be further modified in order to achieve what I want. What do you think?
 

 

1 month ago#11497

mabu
237 Posts
2.3K Downloads
3 Themes
8 Plugins

I am not an expert in simple blog, but   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>....

Typesetter uses jquery 12.3 .  ( Evtl Jquery no conflict or jquery migrate can help here ?) .

But i do not quite understand Your qestion. It is rather easy just to style it.  The outlook depends also upon the used template.

But it is better to make a fork  like this or this one  and modify the code ! In SimpleBlogPage.php and in SimpleBlog.php line 237 is some code.

*** Right mousekey : Inspect element:

I have for example :

<div class="simple_blog_gadget_year">2019</div>........

<ul class="simple_blog_category_posts nodisplay">

<li><a href="/tp511b212/Blog?id=1">test1</a></li></ul>........

<a class="blog_gadget_link">September (1)</a>

But the php needs a longer study - and i am busy with Typesetter CE 6.0beta1 at the  moment.

You can take a tool like superfinder Xt and  loook for example for 'blog_gadget_link' in the files to see how it is generated in php.

Evtl. You can hook at the classes and IDs with Jquery.

Edited: 1 month ago#11498

I have tested now with jquery 12.3 and everything is ok. So it's not about that.
Everything revolves between
simple_blog_gadget_year
blog_gadget_link
simple_blog_category_posts nodisplay
If I click on a year, it should collapse the months of that year, with the default posts if they are displayed.
It seems very simple, but so far I have not succeeded - something is missing. It takes more time to test the code and see what doesn't work - and why. As you said, the php needs a longer study.
There are two files that need to be modified:
SimpleBlogCommon.php
StaticGenerator.php
I think I'll fork over GitHub and change the code.
When will Typesetter CE 6.0beta1 be launched?
The Typesetter 5.1.1-b2 version looks better, I'm waiting to see what the new Typesetter 6 brings.

Thanks for the tips!

1 month ago#11499

mabu
237 Posts
2.3K Downloads
3 Themes
8 Plugins

Implementation :

1. Just make a big deep tree within typesetter and look at the structure (simple_blog_gadget_year ---
blog_gadget_link --- simple_blog_category_posts nodisplay etc. ) and write it down in a tree.

2. Then have a look at the  Jquery - examples - each example has a download and an example - which allows to have a look at the site sourcecode etc.

There You see the menu structure, which You can write down in a menu structure as well . You see for example <li class="menu_item menu_show"> in the index.css and an index.js.

 After that You add the js to the simple blog-plugin and the new classes to the ids and classes (like simple_blog_gadget_year class=new_class)

It gives You a longtime improvement in logic thinking - quite useful in life - i had the same experience! With this method You can also add another style to each element.

Edited: 1 month ago#11500

I make a fork for SimpleBlog on GitHub

I found an elegant solution on stackoverflow,

and an example on jsfiddle

I made the new structure something like:

<ul>
    <li class="simple_blog_gadget_year">Year 01
        <ul>    
            <li class="blog_gadget_link">Month 01        
                <ul>
                    <li class="simple_blog_category_posts"><a href="#">post 1</a></li>
                </ul>
            </li>                    
            <li class="blog_gadget_link">Month 02
                <ul>
                    <li class="simple_blog_category_posts"><a href="#">post 1a</a></li>
                </ul>
            </li>            
        </ul>    
    </li>

    <li class="simple_blog_gadget_year">Year 02
        <ul>    
            <li class="blog_gadget_link">Month 01        
                <ul>
                    <li class="simple_blog_category_posts"><a href="#">post 1</a></li>
                </ul>
            </li>                    
            <li class="blog_gadget_link">Month 02
                <ul>
                    <li class="simple_blog_category_posts"><a href="#">post 1a</a></li>
                </ul>
            </li>            
        </ul>    
    </li>
</ul>

and it is perfectly functional!
I changed

SimpleBlogCommon.php (line 119)

            $page->jQueryCode    .= '$(window).load(function(){ $("li").click(function(e){ e.stopPropagation();
    if(this.getElementsByTagName("ul")[0].style.display =="block") $(this).find("ul").slideUp();
    else
        $(this).children(":first").slideDown();
    });
    });';

in style.css (last line) I add

ul>li>ul {
display: none;
}

in StaticGenerator.php (line 213) I changed like

    /**
     * Regenerate the static content used to display the archive gadget
     *
     */
    static function GenArchiveGadget(){
        global $addonPathData;

        //get list of posts and times
        $list = SimpleBlogCommon::AStrToArray( 'post_times' );
        if( !count($list) ) return;

        //get year counts
        $archive = array();
        foreach($list as $post_id => $time){
            $ym = date('Y-m',$time); //year&month
            $archive[$ym][] = $post_id;
        }


        ob_start();

        $prev_year = false;
        echo '<ul>';
        foreach( $archive as $ym => $posts ){
            $y = substr($ym,0,4);
            $m = substr($ym,-2);
            if( $y != $prev_year ){
                if( $prev_year !== false ){
                    echo '</li>';
                }
                echo '<li class="simple_blog_gadget_year">'.$y;
                $prev_year = $y;
            }
            $sum = count($posts);
            if( !$sum ){
                continue;
            }


            echo '<ul>';
            echo '<li class="blog_gadget_link">';
            $time = strtotime($ym.'-01');
            echo strftime('%B',$time);
            echo ' ('.$sum.')';
            echo '<ul>';
            foreach($posts as $post_id ){
                $post_title = SimpleBlogCommon::AStrGet('titles',$post_id);
                echo '<li class="simple_blog_category_posts">';
                echo SimpleBlogCommon::PostLink($post_id, $post_title );
                echo '</li>';
            }
            echo '</ul>';
            echo '</li>';
            echo '</ul>';
            echo '</li>';
        }
        echo '</ul>';

        $content = ob_get_clean();

        $gadgetFile = $addonPathData.'/gadget_archive.php';
        gpFiles::Save( $gadgetFile, $content );
    }

    static function uuid($str){
        $chars = md5($str);
        return mb_substr($chars,0,8)
                .'-'. mb_substr($chars,8,4)
                .'-'. mb_substr($chars,12,4)
                .'-'. mb_substr($chars,16,4)
                .'-'. mb_substr($chars,20,12);
        return $uuid;
    }

In Typesetter, however, the gadget in Admin Blog Configuration must be regenerated. Changes appear in gadget_archive.php file. All the tests so far have not yielded the desired result: the generated structure is not correct, although I see no error in the code. In Notepad ++ everything seems fine. I can't figure out what's wrong. Otherwise the code is functional, the problem is that the structure of list generated by php is not as it should be. I can't generate the correct structure with the existing php code and I have no idea what I could change. Josh would probably find the solution quickly...

 

1 month ago#11501

mabu
237 Posts
2.3K Downloads
3 Themes
8 Plugins

There is probably a conflict with the existing menu (  $('li').click(function(e){)..  (Can You please mark bold or blue what You changed)

 In Jsfiddle i read   :  ul>li>ul {         display: none;     }  - but there is already  a class nodisplay

$('li').click(function(e){
        e.stopPropagation();
        if(this.getElementsByTagName("ul")[0].style.display =="block")
            $(this).find("ul").slideUp();
        else
            $(this).children(":first").slideDown();
    });

You use :   echo '<li class="simple_blog_gadget_year">'.$y;  ....///   no : <div class="simple_blog_gadget_year  ... li has no  class when using the right mousekey

and  echo '<li class="blog_gadget_link">';  echo '<li class="simple_blog_category_posts">';   ---  but when using the right mousekey, the li's have no class  (perhaps used internal)

* If You add , instead of changes in the php-code , add  to a seperate init.js ($page->head_js[]  = $addonRelativeCode  . '/init.js'; evtl. in hook_head.php - or in simpleblog.php )

You  can disable add all js in the dashboard - the init.js must appear at the bottom of the sourcecode of the site.

$('li.class1').click(function(e){...

$('li.class2').click(function(e){...

$('li.class3').click(function(e){...

 - just look for <li class=  to find the classes. Evtl. its not neccessary for all li's.

For test You can also add a class to every <li in the php-files, (class1....class20)  and then look at the li's in the site ( which classes appear at the li's of  ' inspect element'). With the $('li').click(function(e){ You modify the DOM  and not the php. .(If everything fails You will evtl. have to modify the code or use another method of jquery)

i am not familiar with the code .  Please wait until monday..

 

Edited: 1 month ago#11502

Mulțumesc pentru răspuns,
Iată ce am modificat în cod

        /**
         * Regenerate the static content used to display the archive gadget
         *
         */
        static function GenArchiveGadget(){
            global $addonPathData;

            //get list of posts and times
            $list = SimpleBlogCommon::AStrToArray( 'post_times' );
            if( !count($list) ) return;

            //get year counts
            $archive = array();
            foreach($list as $post_id => $time){
                $ym = date('Y-m',$time); //year&month
                $archive[$ym][] = $post_id;
            }


            ob_start();

            $prev_year = false;
            echo '<ul>';
            foreach( $archive as $ym => $posts ){
                $y = substr($ym,0,4);
                $m = substr($ym,-2);
                if( $y != $prev_year ){
                    if( $prev_year !== false ){
                        echo '</li>';
                    }
                    echo '<li class="simple_blog_gadget_year">'.$y;

echo '<li><div class="simple_blog_gadget_year">'.$y.'</div>';
                    $prev_year = $y;
                }
                $sum = count($posts);
                if( !$sum ){
                    continue;
                }


                echo '<ul>';
                echo '<li class="blog_gadget_link">';

            echo '<li><a class="blog_gadget_link">';
                $time = strtotime($ym.'-01');
                echo strftime('%B',$time);
                echo ' ('.$sum.')';

echo ' ('.$sum.')</a>';
                echo '<ul>';

echo '<ul class="simple_blog_category_posts nodisplay">';
                foreach($posts as $post_id ){
                    $post_title = SimpleBlogCommon::AStrGet('titles',$post_id);
                    echo '<li class="simple_blog_category_posts">';

echo '<ul class="simple_blog_category_posts nodisplay">';
                    echo SimpleBlogCommon::PostLink($post_id, $post_title );
                    echo '</li>';
                }
                echo '</ul>';
                echo '</li>';
                echo '</ul>';
                echo '</li>';
            }
            echo '</ul>';

        echo '</li></ul>';

            $content = ob_get_clean();

            $gadgetFile = $addonPathData.'/gadget_archive.php';
            gpFiles::Save( $gadgetFile, $content );
        }

        static function uuid($str){
            $chars = md5($str);
            return mb_substr($chars,0,8)
                    .'-'. mb_substr($chars,8,4)
                    .'-'. mb_substr($chars,12,4)
                    .'-'. mb_substr($chars,16,4)
                    .'-'. mb_substr($chars,20,12);
            return $uuid;
        }

what is red I have eliminated

<div> elements have been removed because the code does not work properly with them and the nodisplay class is no longer needed in the new version of code

the result is functional (!) but weird!
only the first year appears, if you click on it all the months appear, but as lists included in each other (nested), the posts are opened and can be accessed, and at the end the following year appears, on which if you click on it they open the same every month, and if you click on the month the posts will open and can be accessed and so on
so the code is functional, only that the structure generated is wrong somewhere
I found something on the stack overflow

I numbered all <li> and <ul> and followed the generated code, which is obviously wrong ... but if I delete the extra elements I do not solve anything, on the contrary ...
I think I'll take a break and I'll take it again next week
Thanks a lot for the answer!

 

1 month ago#11503

Thanks for the reply, sorry for posting in a hurry

Here's what I deleted in the code

echo ' ('.$sum.')</a>';

(line 255 in original code from StaticGenerator.php)

 

1 month ago#11504

mabu
237 Posts
2.3K Downloads
3 Themes
8 Plugins

I had a short look at the plugin for half an hour : The reason for the malfunction is that the structure of the tree is very different from the tree which You presented at Jsfiddle. Maybe my proposed method of addings classes to all li's in the php  and adding an init.js functions, because only the li's and ul are affected.

I do not have the time to rewrite the code - You will have to study the php and evtl. chose a different method  from the above jquwry link or from fancy tree. I am not the developer of typesetter - i must reengineer everything as well.

If You just want a sidetree with  a deep structure  - : You can also make a second menutree (at the bottom of pagemanager) - set the top of the primary tree to private ! - and make a deep menustructure in the second menu. You can style the menu with classes in the Dashboard  at content -> extra content ,  and  also by clicking at a site-leaf and then at the right side at menu output classes .

You can add it to the sidebar in the template with  gpOutput::GetFullMenu('m1');  as i described in the forum before.  The main disadvantage is that visitors cannot leave comments. ( Otherwise You can have a free site ad blogspot.com and at wordpress.com.)

Edited: 1 month ago#11505

Thanks for the reply. I think I will have to rewrite the php code, I will see if I can fully understand it and make it work.
To convince ourselves whether it works or not, we can take the code below and save it as gadget_archive.php. Then we replace the original file with it and - here, the archive works correctly!

<ul>
  <li>Year 01
    <ul>
        <li>Month 1
            <ul>
                <li><a href="#">post 1</a></li>
                <li><a href="#">post 2</a></li>
                <li><a href="#">post 3</a></li>
                <li><a href="#">post 4</a></li>
            </ul>
        </li>
        <li>Month 2
            <ul>
                <li><a href="#">post 1a</a></li>
                <li><a href="#">post 2b</a></li>
                <li><a href="#">post 3c</a></li>
                <li><a href="#">post 4d</a></li>
            </ul>
        </li>
    </ul>
</li>

  <li>Year 02
    <ul>
        <li>Month 1
            <ul>
                <li><a href="#">post 1</a></li>
                <li><a href="#">post 2</a></li>
                <li><a href="#">post 3</a></li>
                <li><a href="#">X node</a></li>
            </ul>
        </li>
        <li>Month 2
            <ul>
                <li><a href="#">post 1a</a></li>
                <li><a href="#">post 2b</a></li>
                <li><a href="#">post 3c</a></li>
                <li><a href="#">post 4d</a></li>
            </ul>
        </li>
    </ul>
</li>
</ul>

The problem is that I do not have enough documentation for the php code and it is difficult to dig through all the code, understand it and then modify it. But I'll try.
Another idea would be to choose another method for display, using the existing php code.
All the best and thanks for your prompt answers.

 

1 month ago#11506

The problem is solved !
The solution is posted on GitHub.
1 month ago#11507

mabu
237 Posts
2.3K Downloads
3 Themes
8 Plugins

Yes great  ! - what still can be improved is that in the demo just 2017  appears and not all the leaves of first level(years)  - and after klick all years and subleaves of second level open...(not quite easy - evtl. another style with ul:first child etc. helps here) -

Css-multilevel-nested-accordions are described here , here and at github ( and also with jquery , here  and combo)

(i am at the moment too busy with my universal-path.org(pagespeed 99) and my spiritwiki.de, which i must update to 1.31.5 because my provider has only the 3 newest php-versions.)

Can You have an additional look at the change which https://github.com/webksde/Simple-Blog -  made with 'simple-blog-php' (which is not changed that way in the Juek-version)

Another task is to make it php7.3 ready. A 'nice tool for this ' is Jetbrains php-storm which goes after 30 days into a 30-minute-mode.

Edited: 1 month ago#11508

mabu
237 Posts
2.3K Downloads
3 Themes
8 Plugins

I hope You are not too disapponted of my analysis, but a  look at the source of Your menu at  https://florincatalin.000webhostapp.com/Jurnal  showed me that You use the details open - Styling of the menu.

(see  also  http://html5doctor.com/the-details-and-summary-elements/  ,  https://freefrontend.com/html-details-summary-css/  and a codepen - examples at https://codepen.io/chriscoyier/pen/LdyKjL/  and https://codepen.io/GeorgePorgee/pen/vjQWGe . )

The reason that Your menu opens completely after click at 2017 is that You do not close the details -element after every year with </details>

An insuficient solution is to use : echo '</details><details>'; in StaticGenerator.php

2. Internet Explorer 8-11 and IE Edge do not support the details-marker - element. I opened the site in Edge - and the menu was completely open but not closable. There is a jquery-details-polifill -  js at github (https://github.com/mathiasbynens/jquery-details)  which solves this problem (but not for categories)

3. Google Chrome bents the arrows.

Edited: 1 month ago#11509

It is true that I have not tested in several browsers. But the HTML standard must be respected by all browsers, isn't it ?!
Unfortunately, in order to get a better result, we must rewrite the php code that generates the list structure; which is a bit more difficult and requires a little more time.
1 month ago#11510

mabu
237 Posts
2.3K Downloads
3 Themes
8 Plugins

Internet explorer does not support full html5 thats why html5shiv was developed - which improves it. 

My proposed  solution with echo '</details><details>'; (or echo '</details><details close>';) functions in my Xampp .

If You add the proposed Javascript to hookhead.php (like <--  '/static/jquery.details.js';) then IE functions with Years.

activate with additional $('details').details(); at the end of the js.

You can style the icons in Chrome with a class which You add to the to top (year/category).

Not really much to do - just try it and change (after success) Your website and/or the github repository

( I will try another solution with jquery in december .)

Edited: 1 month ago#11511

Now I understand what you meant. Yes, you're right, I hadn't noticed that tag had to be </details> before <details> to make the code work properly! Now everything is ok, I have also modified GitHub fork and my site. In Firefox it's ok, in Opera it's a little weird, but let's just say it works. IE is not much used, nor is Edge. I will test in Chrome, which is used on a large scale. But browsers are upgraded periodically, so in future versions may be ok.
Thanks for your cooperation and suggestions! If you have a better idea, maybe in December, as you said, then we will test it and if it is ok, modify the plugin on the site, with the new improvements. I think there are many who have used this plugin over time and would find it useful.

All the best,
Florin

1 month ago#11512

mabu
237 Posts
2.3K Downloads
3 Themes
8 Plugins

Yes , in Firefox it is now ok, but not in Edge (it is widelly open) and in Chrome it functions but shifts the arrows one line up (just as in Opera).

What You still have to do is to add the jquery.details.js to Your ./static  - folder and then add to the hookhead.php  (look at the link )

global $addonRelativeData, $addonRelativeCode, $page;

$page->head_js[] = $addonRelativeCode . '/static/jquery.details.js';

so that it functions in Edge - really very simple !

Can You make the patch, and then we will see further.

Edited: 1 month ago#11513

I changed the site and Github code, but in Edge and IE it still doesn't work. In Firefox everything is fine. In Opera (updated) it works, but a little strange. In Chrome I didn't test. But this problem is well known (see here browser compatibility).

I think this solution is viable for most browsers. If we want to extend compatibility, then I think another solution should be addressed, or wait until IE and Edge will implement (or not) these tags.

1 month ago#11514

Comparison of browser engines (HTML support, see details and summary tags)
1 month ago#11515

mabu
237 Posts
2.3K Downloads
3 Themes
8 Plugins

Yes - You must activate the JS by adding  $('details').details(); at the end of the jquery.details.js (or an additional init.js) .

I have a functioning version. Please waite until evening - i will upload a final version here.

In Opera and Chrome the <summary> with ::marker has to be restyled. 

<summary><li><div class="simple_blog_gadget_year">2017</div></li></summary>

The marker-arrow is here in the summary while the Year is in the li in a new div. But the li makes  a new line.

 - with <p> 2017</p> it would function.

Good pens for learning  are this codepen  this codepen. and this pen these Css-examples :

(   details[open] { background: coral; margin-bottom: 1em; }  )

evtl. something like this can help for opera and chrome (in the style.css):

summary::-webkit-details-marker { display: none; }

summary:before { content: "+";  color: green; margin-right: 5px; }

details[open] summary:after { content: "-"; }    // also  other icons

Can You also change the version in the addon.ini to 3.0.5 please . You can check the compatibility at caniuse.

Edited: 1 month ago#11516


 

News

Typesetter 5.1
8/12/2017

Typesetter 5.0.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

Over 8 Times Faster Than Wordpress
5/3/2016

We've known for a long time that Typesetter is fast. It's something we take pride ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register