.. 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: 2013-11-26T21:02:02.350000000 :Classification: jhe_adventcalendar :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\_adventcalendar Language: en Version: 2.0.0 Keywords: forAdmins (use this for Administrators) Copyright 2013, 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. 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: 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 """"""" 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: |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 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. .. _Installation: Installation ------------ To install this extension, just go the Extension Manager, download the extension from TER and install it the usual way. If you are planing to use the AJAX alternative of the plugin you also have to add the Static Template provided by this extension to your typoscript template. 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 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 :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 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! |img-8| Displaying the Advent calendar ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Create a new content element on the page you want by choosing 'Plugins' > 'General Plugin': |img-9| Select the “Adventcalendar” plugin: |img-10| Upload and select the picture for the Advent calendar in the first tab 'Background picture': |img-11| For the correct rendering of the plugin you also should insert the measurements of the image and an alternative text. |img-12| 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: |img-13| 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: |img-14| '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/ `_ ): |img-15| 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... :-) .. _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 GitHub page of this project: `Advent calendar project on GitHub `_ 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 GitHub `_ . .. _ChangeLog: ChangeLog --------- .. ### BEGIN~OF~TABLE ### .. _2-0-0: 2.0.0 ^^^^^ .. container:: table-row Version 2.0.0 Changes Complete new approach using Extbase and Fluid .. _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 GitHub `_ .. ######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.png .. :align: left .. :border: 1 .. :height: 383 .. :id: Grafik2 .. :name: Grafik2 .. :vspace: 19 .. :width: 448 .. |img-4| image:: img-4.png .. :align: left .. :border: 1 .. :height: 376 .. :id: Grafik11 .. :name: Grafik11 .. :vspace: 19 .. :width: 448 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 197 .. :id: Grafik3 .. :name: Grafik3 .. :width: 376 .. |img-6| image:: img-6.png .. :align: left .. :border: 1 .. :height: 210 .. :id: Grafik4 .. :name: Grafik4 .. :vspace: 19 .. :width: 448 .. |img-7| image:: img-7.png .. :align: left .. :border: 1 .. :height: 176 .. :id: Grafik12 .. :name: Grafik12 .. :vspace: 19 .. :width: 241 .. |img-8| image:: img-8.png .. :align: left .. :border: 1 .. :height: 539 .. :id: Grafik10 .. :name: Grafik10 .. :vspace: 17 .. :width: 165 .. |img-9| image:: img-9.png .. :align: left .. :border: 1 .. :height: 140 .. :id: Grafik1 .. :name: Grafik1 .. :vspace: 19 .. :width: 448 .. |img-10| image:: img-10.png .. :align: left .. :border: 1 .. :height: 124 .. :id: Grafik5 .. :name: Grafik5 .. :vspace: 19 .. :width: 448 .. |img-11| image:: img-11.png .. :align: left .. :border: 1 .. :height: 307 .. :id: Grafik6 .. :name: Grafik6 .. :vspace: 19 .. :width: 448 .. |img-12| image:: img-12.png .. :align: left .. :border: 1 .. :height: 361 .. :id: Grafik7 .. :name: Grafik7 .. :vspace: 19 .. :width: 448 .. |img-13| image:: img-13.png .. :align: left .. :border: 1 .. :height: 333 .. :id: Grafik8 .. :name: Grafik8 .. :vspace: 19 .. :width: 562 .. |img-14| image:: img-14.png .. :align: left .. :border: 1 .. :height: 322 .. :id: Grafik9 .. :name: Grafik9 .. :vspace: 19 .. :width: 448 .. |img-15| image:: img-15.png .. :align: left .. :border: 1 .. :height: 288 .. :id: Grafik13 .. :name: Grafik13 .. :vspace: 19 .. :width: 448