Textpattern Forum

You are not logged in. Register | Login | Help

#1 2012-06-14 13:50:19

txpdevcoder
Member
Registered: 2012-06-07
Posts: 58

Collapsible Archive Tree

HI,

In trying to build a collapsable side bar widget that is a tree of all the articles on the site, grouped into year > month > article link, with number of articles displayed beside the months, as nested lists. Im aiming for something like the one on this website (you will need to scroll down the page a bit and find the Blog Archive widget on the right hand side) http://theowlandtheaccordion.blogspot.co.uk/

Can anyone give some pointers as to how to do this? i think i need to use if_different but its a bit confusing.

Thanks,

James

Offline

#2 2012-06-14 15:27:46

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 4,884
Website

Re: Collapsible Archive Tree

would this be of help?


Yiannis
——————————
neme.org | neme-imca.org | hblack.net | LABS

Offline

#3 2012-06-14 15:43:27

txpdevcoder
Member
Registered: 2012-06-07
Posts: 58

Re: Collapsible Archive Tree

thanks for the pointer – looks like a lot of code though! Plus the demo site doesnt have enough data in it for me to really see if the end result is what i am after.

I essentially want generate this structure as nested lists, with the number of articles in brackets:

  • 2012 (6)
    • June (3)
      • June Article Link
      • June Article Link
      • June Article Link
    • July (3)
      • July Article Link
      • July Article Link
      • July Article Link
  • 2011 (4)
    • April (1)
      • April Article Link
    • May (3)
      • May Article Link
      • May Article Link
      • May Article Link

Does anyone have a simple way to achieve this?

Ta!

Last edited by txpdevcoder (2012-06-14 15:47:41)

Offline

#4 2012-06-14 16:02:56

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 4,884
Website

Re: Collapsible Archive Tree

Hi James

There is upm_date archive but I’m not sure if it is going to work in txp’s next release. There are also some pointers in txptips. I’m not sure if there is anything simpler.


Yiannis
——————————
neme.org | neme-imca.org | hblack.net | LABS

Offline

#5 2012-06-14 16:13:32

txpdevcoder
Member
Registered: 2012-06-07
Posts: 58

Re: Collapsible Archive Tree

I looked through TXPTips, and there was nothing like this on there I think i was misleading by calling it an archive widget. Although it will be titled archive, it will show all the articles on the site, not just ones in the archive section.

Ill keep playing around and see what i can come up with, but if anyone has any ideas, please share! If i manage it, ill post it here and on TXP Tips.

Last edited by txpdevcoder (2012-06-14 16:29:07)

Offline

#6 2012-06-14 16:49:15

etc
Plugin Author
Registered: 2010-11-11
Posts: 1,138
Website

Re: Collapsible Archive Tree

This is much shorter, but it lacks article counts:

<txp:variable name="archive">
<ul class="dummy"><ul>
<txp:article_custom sort="Posted DESC" limit="999">
<txp:if_different></ul></ul><li><txp:posted format="%Y" /></li><ul><ul class="dummy"></txp:if_different>
<txp:if_different></ul><li><txp:posted format="%b" /></li><ul></txp:if_different>
<li><txp:permlink><txp:title /></txp:permlink></li>
</txp:article_custom>
</ul></ul>
</txp:variable>

<txp:etc_query data='<txp:variable name="archive" />'
query="." wraptag="ul" replace="//ul[@class='dummy']">
{node()}
</txp:etc_query>

etc_query plugin is needed here to remove empty items from the list.

Edit: in fact, etc_query is not necessary, <style>.dummy{display:none}</style> will suffice.

Last edited by etc (2012-06-14 17:18:59)

Offline

#7 2012-06-15 08:37:14

trenc
Plugin Author
From: Cologne
Registered: 2008-02-27
Posts: 504
Website

Re: Collapsible Archive Tree

Or use this plugin-less solution, but it lacks also the article count:

<txp:article_custom sort="Posted desc" limit="99999" wraptag="ul" break="" class="archive">

	<txp:variable name="year" value='<txp:if_different><txp:posted format="%Y" /></txp:if_different>' />
	<txp:variable name="month" value='<txp:if_different><txp:posted format="%B" /></txp:if_different>' />

	<txp:if_variable name="year" value=""><txp:else />
		<txp:if_first_article><txp:else />
					</ul>
				</li>
			</ul>
		</txp:if_first_article>
		<li><h2><txp:posted format="%Y" /></h2>
			<ul>
	</txp:variable>

	<txp:if_variable name="month" value=""><txp:else />
		<txp:if_variable name="year" value="">
				</ul>
			</li>
		<txp:else /></txp:if_variable>
		<li><h3><txp:posted format="%B" /></h3>
			<ul>
	</txp:variable>

	<li><txp:posted />: <txp:permlink><txp:title /></txp:permlink></li>

	<txp:if_last_article></ul></li></ul></txp:if_last_article>

</txp:article_custom>

Offline

#8 2012-06-15 09:05:45

txpdevcoder
Member
Registered: 2012-06-07
Posts: 58

Re: Collapsible Archive Tree

Thanks trenc. Thats a very good start. Would you care to explain the code a little bit… i think i can see whats going on but it could do with some comments in the code.

:)

Offline

#9 2012-06-16 09:59:06

etc
Plugin Author
Registered: 2010-11-11
Posts: 1,138
Website

Re: Collapsible Archive Tree

To get monthly counts, you can postpone the articles output to the end of month, storing them in some variable (here monthly) and counting them afterwards with etc_query:


<txp:article_custom sort="Posted desc" limit="99999" wraptag="ul" break="" class="archive">

	<txp:variable name="year" value='<txp:if_different><txp:posted format="%Y" /></txp:if_different>' />
	<txp:variable name="month" value='<txp:if_different><txp:posted format="%Y-%b" /></txp:if_different>' />

	<txp:if_variable name="month" value=""><txp:else />
		<txp:if_first_article><txp:else />
			(<txp:etc_query data='<txp:variable name="monthly" />' query="li" limit="1">{#total}</txp:etc_query>)
				<ul><txp:variable name="monthly" /></ul>
			</li>
		</txp:if_first_article>
		<txp:if_variable name="year" value=""><txp:else />
			<txp:if_first_article><txp:else />
				</ul></li>
			</txp:if_first_article>
			<li><txp:posted format="%Y" />
				<ul>
		</txp:if_variable>
		<li><txp:posted format="%b" />
		<txp:variable name="monthly" value="" />
	</txp:if_variable>

	<txp:variable name="monthly">
		<txp:variable name="monthly" />
		<li><txp:permlink><txp:title /></txp:permlink></li>
	</txp:variable>

	<txp:if_last_article>
		(<txp:etc_query data='<txp:variable name="monthly" />' query="li" limit="1">{#total}</txp:etc_query>)
		<ul><txp:variable name="monthly" /></ul></li></ul>
	</txp:if_last_article>

</txp:article_custom>

This will be faster than making sql queries for each month. Following the same idea, you can get yearly counts.

Edit: and there are also client-side javascript solutions, with jQuery or such.

Last edited by etc (2012-06-16 10:30:14)

Offline

#10 2012-06-16 13:26:30

etc
Plugin Author
Registered: 2010-11-11
Posts: 1,138
Website

Re: Collapsible Archive Tree

And this is the most logical and complete solution, without any postponing, just DOM manipulation with etc_query (grab the latest version).

<txp:variable name="archive">
<txp:article_custom sort="Posted desc" limit="99999">

	<txp:variable name="year" value='<txp:if_different><txp:posted format="%Y" /></txp:if_different>' />
	<txp:variable name="month" value='<txp:if_different><txp:posted format="%Y-%b" /></txp:if_different>' />

	<txp:if_first_article>
		<year data-year='<txp:posted format="%Y" />'>
		<month data-month='<txp:posted format="%b" />'>
	<txp:else />
		<txp:if_variable name="month" value=""><txp:else />
			</month>
			<txp:if_variable name="year" value=""><txp:else />
				</year>
				<year data-year='<txp:posted format="%Y" />'>
			</txp:if_variable>
			<month data-month='<txp:posted format="%b" />'>
		</txp:if_variable>
	</txp:if_first_article>

	<li><txp:permlink><txp:title /></txp:permlink></li>

	<txp:if_last_article>
		</month></year>
	</txp:if_last_article>

</txp:article_custom>
</txp:variable>


<txp:etc_query data='<txp:variable name="archive" />' query="year" wraptag="ul" break="li">
	{@data-year?} ({count(month/li)})
	<txp:variable name="yearly">
		{month}
	</txp:variable>
	<txp:etc_query data='<txp:variable name="yearly" />' query="month" wraptag="ul" break="li">
		{{@data-month?} ({{count(li)})
		<ul>{{li}</ul>
	</txp:etc_query>
</txp:etc_query>

The double {{ is not a typo.

Offline

Board footer

Powered by FluxBB