.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =============== Advent calendar =============== :Author: jari-hermann.ernst :Created: 2011-11-21T16:31:11 :Changed by: jari-hermann.ernst :Changed: 2011-11-30T10:32:58.530000000 :Classification: jhe_adventcalender :Description: The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) ---- :Keywords: forAdmins (use this for Administrators) :Author: Jari-Hermann Ernst :Email: jari-hermann.ernst@bad-gmbh.de :Language: en .. _img-1-img-2-Advent-calendar: |img-1| |img-2| Advent calendar =============================== Extension Key: jhe\_adventcalender Language: en Version: 0.2.0 Keywords: forAdmins (use this for Administrators) Copyright 2011, Jari-Hermann Ernst, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- **`Advent calendar 1 <#__RefHeading__5708_1738894311>`_** **`Introduction 3 <#__RefHeading__5710_1738894311>`_** `What does it do? 3 <#__RefHeading__5712_1738894311>`_ `Screenshots 3 <#__RefHeading__404_284585805>`_ `Features 5 <#__RefHeading__406_284585805>`_ **`Installation 6 <#__RefHeading__7107_2102032169>`_** **`Configuration 7 <#__RefHeading__1196_1696300574>`_** **`Tutorial 8 <#__RefHeading__31523_818911409>`_** `Preparations 8 <#__RefHeading__13539_2102032169>`_ `Displaying the Advent calendar 10 <#__RefHeading__13541_2102032169>`_ **`Known problems 14 <#__RefHeading__31525_818911409>`_** **`To-Do list 15 <#__RefHeading__477_413120346>`_** **`ChangeLog 16 <#__RefHeading__31623_818911409>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: 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 :sup:`st` . This extension provides such an Advent calendar for you web project. .. _Screenshots: Screenshots ^^^^^^^^^^^ .. _Frontend: Frontend """""""" The content element displays the given image for the Advent calendar showing the single wickets for each day in December before Christmas. The image map is generated with typolinks so we can use the start parameter of each page to make the areas clickable on the day of appearance and not before. |img-3| The extension has to modes: The normal mode:By clicking on a single area the user is directed to a normal page of your site. The AJAX way:Using jQuery the content of the target pages is displayed in a modal dialog box. |img-4| .. _Backend: Backend """"""" In the TYPO3 backend the extension provides a single content element with all the necessary data to be inserted in a multi-tab flexform. |img-5| |img-6| 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 snowstorm script from Scott Schiller ( `http://www.schillmania.com/projects/snowstorm/ `_ ) you can configure your own snowflakes in the days before Christmas. .. _Installation: Installation ------------ To install this extension, just go the Extension Manager, download the extension from TER and install it the usual way.That's it... .. _Configuration: Configuration ------------- There is no further configuration to be done. Everything has to be set up at the content elements' flexform, which is shown in detail at the Tutorial part of this manual. .. _Tutorial: Tutorial -------- .. _Preparations: 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: :: Wicket 1 Wicket 2 Wicket 3 Wicket 4 Wicket 5 Wicket 6 Wicket 7 Wicket 8 Wicket 9 Wicket 10 Wicket 11 Wicket 12 Wicket 13 Wicket 14 Wicket 15 Wicket 16 Wicket 17 Wicket 18 Wicket 19 Wicket 20 Wicket 21 Wicket 22 Wicket 23 Wicket 24 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 clickable before the appropriate date do not forget to set the start parameter of the page to that date and the stop date to 25 :sup:`th` of December! |img-7| 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 change the template for the pages. The reason for this is that the extension uses the link to the pages, fetches the HTML code and renders everything between and . Therefore the HTML output of the template should be as plain as possible without the design template code. With Templavoila I just added a second main template without all the unneeded trappings and combined that with these pages. With the classical templating way and also with automaketemplate you should easily produce something similar. 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! |img-8| Displaying the Advent calendar ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ |img-9| Create a new content element on the page you want by choosing 'Plugins' > 'Advent calendar': Upload and select the picture for the Advent calendar in the first tab 'Background picture': |img-10| For the correct rendering of the plugin you also should insert the measurements of the image and an alternative text. |img-11| 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: |img-12| 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 seetings define the time in milliseconds the modal layer and the dialog box need to fade in and fade out. |img-13| If you don't want to use the modal dailog mode just leave the 'Use Ajax?' box unchecked. The last tab provides the settings for the snowstorm javascript by Scott Schiller ( `http://www.schillmania.com/projects/snowstorm/ `_ ): |img-14| First of all you can decied whether to use it or not. You can define a color for the snowflakes by inserting a rgb value (don't forget the '#'!). Select a character for the look of the snowflakes. Decide whether to use the twinkle effect for the snowflakes or not!Note: This needs a lot of CPU power on the client, so be careful with this! Insert a css z-index for the snowflake layer. If it is lower than the parameter of the dialog box (9,999) but higher than the modal layer (9,000) the snow appears to fall between both. With the last two boxes you can select the maximum width and height of each snowflake. Just save and see what's happening in the frontend... :-) .. _Known-problems: Known problems -------------- By now the extension does not work in AJAX mode when the target pages have user or usergroup permissions. This is under current development and I hope to release a solution for this soon!Until then I recommend not to use usergroup access rights at this point of time. If you find something else here is the link to the forge page of this project: `Advent calendar project on Forge `_ Feel free to participate... .. _To-Do-list: To-Do list ---------- Nothing, but working on the point of the 'Known problems' part. If you find something to do or have a issue, feel free to use the issue tracker on `Advent calendar project on Forge `_ . .. _ChangeLog: ChangeLog --------- .. ### BEGIN~OF~TABLE ### .. _0-2-0: 0.2.0 ^^^^^ .. container:: table-row Version 0.2.0 Changes debugging: modal layer now swaps the whole page even if the dialog box is larger than the document itself necessary changes in the manual .. _0-1-1: 0.1.1 ^^^^^ .. container:: table-row Version 0.1.1 Changes debugging of some embarrassing typo :-/ .. _0-1-0: 0.1.0 ^^^^^ .. container:: table-row Version 0.1.0 Changes First TER upload (with manual) .. _0-0-12: 0.0.12 ^^^^^^ .. container:: table-row Version 0.0.12 Changes debugging the code rendering in the ajax mode .. _0-0-11: 0.0.11 ^^^^^^ .. container:: table-row Version 0.0.11 Changes some minor localization debuggings .. _0-0-10: 0.0.10 ^^^^^^ .. container:: table-row Version 0.0.10 Changes added the correct ext icons .. _0-0-9: 0.0.9 ^^^^^ .. container:: table-row Version 0.0.9 Changes general code refactoringdebugging of generating the url to the page to be fetched for the ajax output .. _0-0-8: 0.0.8 ^^^^^ .. container:: table-row Version 0.0.8 Changes included the check for an already integrated jquery library on includes it when necessarynew graphlical button for closing the dialog box .. _0-0-7: 0.0.7 ^^^^^ .. container:: table-row Version 0.0.7 Changes debugging of the wrong behaviour of the dialogclose .. _0-0-6: 0.0.6 ^^^^^ .. container:: table-row Version 0.0.6 Changes added an ajax loader pic to the dialog layer .. _0-0-5: 0.0.5 ^^^^^ .. container:: table-row Version 0.0.5 Changes added ajax functionality for dynamically generating the target links .. _0-0-4: 0.0.4 ^^^^^ .. container:: table-row Version 0.0.4 Changes added correct english translation .. _0-0-3: 0.0.3 ^^^^^ .. container:: table-row Version 0.0.3 Changes added multilingualism to the content element's flexformmade most of the javascript settings configurable via flexform .. _0-0-2: 0.0.2 ^^^^^ .. container:: table-row Version 0.0.2 Changes finalizing the ajax functionality (nearls 95%)added snowStorm script .. _0-0-1: 0.0.1 ^^^^^ .. container:: table-row Version 0.0.1 Changes ajax functionality added - but does not work yet :-) .. _0-0-0: 0.0.0 ^^^^^ .. container:: table-row Version 0.0.0 Changes initial code generated with kickstarter .. ###### END~OF~TABLE ###### `Advent calendar project on Forge `_ .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 44 .. :id: graphics5 .. :name: graphics5 .. :vspace: 57 .. :width: 161 .. |img-2| image:: img-2.png .. :align: left .. |img-3| image:: img-3.jpeg .. :align: left .. :border: 0 .. :height: 499 .. :id: Grafik2 .. :name: Grafik2 .. :width: 605 .. |img-4| image:: img-4.jpeg .. :align: left .. :border: 0 .. :height: 569 .. :id: Grafik11 .. :name: Grafik11 .. :width: 605 .. |img-5| image:: img-5.jpeg .. :align: left .. :border: 0 .. :height: 156 .. :id: Grafik3 .. :name: Grafik3 .. :width: 491 .. |img-6| image:: img-6.jpeg .. :align: left .. :border: 0 .. :height: 246 .. :id: Grafik4 .. :name: Grafik4 .. :width: 491 .. |img-7| image:: img-7.jpeg .. :align: left .. :border: 0 .. :height: 181 .. :id: Grafik12 .. :name: Grafik12 .. :width: 236 .. |img-8| image:: img-8.jpeg .. :align: left .. :border: 0 .. :height: 542 .. :id: Grafik10 .. :name: Grafik10 .. :width: 243 .. |img-9| image:: img-9.jpeg .. :align: left .. :border: 0 .. :height: 166 .. :id: Grafik1 .. :name: Grafik1 .. :width: 491 .. |img-10| image:: img-10.jpeg .. :align: left .. :border: 0 .. :height: 329 .. :id: Grafik5 .. :name: Grafik5 .. :width: 491 .. |img-11| image:: img-11.jpeg .. :align: left .. :border: 0 .. :height: 342 .. :id: Grafik6 .. :name: Grafik6 .. :width: 491 .. |img-12| image:: img-12.jpeg .. :align: left .. :border: 0 .. :height: 341 .. :id: Grafik7 .. :name: Grafik7 .. :width: 491 .. |img-13| image:: img-13.jpeg .. :align: left .. :border: 0 .. :height: 317 .. :id: Grafik8 .. :name: Grafik8 .. :width: 491 .. |img-14| image:: img-14.jpeg .. :align: left .. :border: 0 .. :height: 346 .. :id: Grafik9 .. :name: Grafik9 .. :width: 491