Advent calendar¶

What does it do?¶

An Advent calendar is a special calendar which is used to count the days of Advent in anticipation of Christmas. Usually it starts on December, 1 ^st .

This extension provides such an Advent calendar for you web project.

It replaces my old extension with the same name from 2011 which was not based on Extbase and Fluid and had this annoying typo in its extension key: jhe_adventcalender

Ext:jhe_adventcalender ist outdated and will be marked as obsolete in TER within the next few days. Do not use it anymore!

Screenshots¶

Features¶

• Select your own picture for the Advent calendar
• Use normal TYPO3 pages as the target for each wicket of the Advent calendar
• Use ajax or not for displaying the content of each wicket
• Let it snow if you want! Using the jQuery Snow Effect Plugin from Ivan Lazarevic ( http://workshop.rs/2012/01/jquery-snow-falling-plugin/ ) you can configure your own snowflakes in the days before Christmas.

Preparations¶

What you need before you can start:

A picture with the 24 wickets on that fits to your web projects design and dimensions.

The HTML code for the image map based upon your picture.Example:

<map name="Map" id="Map">
  <area shape="rect" coords="19,45,91,113" href="#" alt="Wicket 1" />
  <area shape="rect" coords="230,352,290,410" href="#" alt="Wicket 2" />
  <area shape="rect" coords="278,183,340,241" href="#" alt="Wicket 3" />
  <area shape="rect" coords="551,38,614,96" href="#" alt="Wicket 4" />
  <area shape="rect" coords="182,11,240,65" href="#" alt="Wicket 5" />
  <area shape="rect" coords="520,197,598,268" href="#" alt="Wicket 6" />
  <area shape="rect" coords="18,347,79,404" href="#" alt="Wicket 7" />
  <area shape="rect" coords="336,16,401,76" href="#" alt="Wicket 8" />
  <area shape="rect" coords="558,327,623,389" href="#" alt="Wicket 9" />
  <area shape="rect" coords="338,348,410,416" href="#" alt="Wicket 10" />
  <area shape="rect" coords="126,81,188,140" href="#" alt="Wicket 11" />
  <area shape="rect" coords="523,123,576,173" href="#" alt="Wicket 12" />
  <area shape="rect" coords="128,354,181,404" href="#" alt="Wicket 13" />
  <area shape="rect" coords="31,255,92,313" href="#" alt="Wicket 14" />
  <area shape="rect" coords="244,73,304,130" href="#" alt="Wicket 15" />
  <area shape="rect" coords="395,224,459,285" href="#" alt="Wicket 16" />
  <area shape="rect" coords="197,255,261,316" href="#" alt="Wicket 17" />
  <area shape="rect" coords="144,154,218,223" href="#" alt="Wicket 18" />
  <area shape="rect" coords="465,296,537,363" href="#" alt="Wicket 19" />
  <area shape="rect" coords="114,281,173,336" href="#" alt="Wicket 20" />
  <area shape="rect" coords="430,37,503,105" href="#" alt="Wicket 21" />
  <area shape="rect" coords="287,267,354,328" href="#" alt="Wicket 22" />
  <area shape="rect" coords="28,161,99,226" href="#" alt="Wicket 23" />
  <area shape="rect" coords="397,113,483,192" href="#" alt="Wicket 24" />
</map>

This can easily be generated with a common HTML editor like Dreamweaver.

It is important that the order of the areas is correct because the extension rewrites the HTML code from line 1 to 24!

Prepare the pages for the content of the Advent calendar in the TYPO3 backend.You need 24 single pages with the content for the wickets.

To prevent the areas to be click-able before the appropriate date do not forget to set the start parameter of the page to that date and the stop date to 25 ^th of December!

If you just use the “normal” mode nothing else has to be done here. The target pages appear in your design just like the rest of your project.

If you want to use the AJAX mode you have to be sure that you have added the Static Template provided by this extension to your typoscript template. It brings a new page type with typeNum 2412 that renders the output of the wicket pages to be used by ajax.

Note: By now the extension does not work with user or usergroup permissions on the target pages! This is under current development and I hope to release a solution for this soon!

Displaying the Advent calendar ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Create a new content element on the page you want by choosing 'Plugins' > 'General Plugin':

Select the “Adventcalendar” plugin:

Upload and select the picture for the Advent calendar in the first tab 'Background picture':

For the correct rendering of the plugin you also should insert the measurements of the image and an alternative text.

On the next tab you have to insert a name for the image and the image map at first and then the prepared HTML code into the text field:

The insert fields of the next tab combine the rendering of the plugin and the prepared pages for the image maps area targets. Just insert the correct page ids:

Note: If you change the order of the pages for your wicket's content you also have to change the pids in this tab, too. Otherwise your changes will have no effect on the links on your Advent calendar image map.

If you like to use the AJAX mode you have to check the box on the next tab and make some further settings for the modal dialog layer:

'Layer width in px' and 'Minimal layer height in px' define the dimensions of the dialog box for the content and the other three settings define the time in milliseconds the modal layer and the dialog box need to fade in and fade out.

If you don't want to use the modal dialog mode just leave the 'Use Ajax?' box unchecked.

The last tab provides the settings for the jQuery Snow Effect Plugin from Ivan Lazarevic ( http://workshop.rs/2012/01/jquery-snow-falling- plugin/ ):

First of all you can decide whether to use it or not.

You can define a color for the snowflakes by inserting a rgb value (don't forget the '#'!).

With the last two boxes you can select the minimum and the maximum width of each snowflake.

The last form field has to be filled by the time that should pass before a new snowflakes is created in milliseconds (ms).Note: If you let it snow too heavily this will need a lot of CPU power on the client, so be careful with this! A period of 500ms worked fine with me.

Just save and see what's happening in the frontend... :-)

2.0.0¶

0.2.0¶

0.1.1¶

0.1.0¶

0.0.12¶

0.0.11¶

0.0.10¶

0.0.9¶

0.0.8¶

0.0.7¶

0.0.6¶

0.0.5¶

0.0.4¶

0.0.3¶

0.0.2¶

0.0.1¶

0.0.0¶

Advent calendar project on GitHub