HTML Templates

Τα HTML templates που χρησιμοποιεί το σύστημα για την εμφάνιση των σελίδων περιέχουν μπλοκ κώδικα HTML που μπορεί να διαχωριστεί και να εμφανιστεί μία ή περισσότερες φορές και μεταβλητές που αντικαθίστανται κατά την εμφάνιση των σελίδων. Τα ονόματα μεταβλητών γράφονται μεταξύ @{%@ και@ %}@ (π.χ. @{%VariableName%}@ ενώ τα μπλοκ κώδικα εμφανίζονται ανάμεσα σε ζεύγη σχολίων HTML ως εξής: 

<!-- BEGIN BlockName -->
...
<!-- END BlockName -->

Τα templates είναι αποθηκευμένα σε υποκαταλόγους του καταλόγου templates. Για να αναγνωριστεί ένας υποκατάλογος ως template, θα πρέπει να περιέχει τουλάχιστον το αρχείο theme.html, που χρησιμοποιείται για τις περισσότερες σελίδες. Τα αρχεία που αναζητούνται για διάφορες λειτουργίες είναι τα:

* heme.html - βασικό theme για την εμφάνιση των περισσοτέρων σελίδων της πλατφόρμας * ebook_fullscreen.html - για την παρουσίαση σε πλήρη οθόνη του ηλεκτρονικού βιβλίου * dtheme.html - για την εμφάνιση παραθύρων επιλογής πόρων (εγγράφων, πολυμέσων κλπ.) από τον rich text editor * mtheme.html - για την εμφάνιση σελίδων μέσω της mobile app

Αν υπάρχει ένα αρχείο settings.php, αυτό εκτελείται αυτόματα. Μπορεί να ορίζει τη μεταβλητή $icon_map που περιέχει ένα array με μετατροπές των τιμών της IMG_CLASS. Για παράδειγμα: 

<?php
$icon_map = array(
    'arrow' => '...',
    'announcements' => '...',
    'calendar' => '...',
    'dropbox' => '...',
    'docs' => '...',
    'links' => '...',
    'description' => '...',
    'forum' => '...',
    'assignments' => '...',
    'exercise' => '...',
    'questionnaire' => '...',
    'ebook' => '...',
    'videos' => '...',
    'groups' => '...',
    'lp' => '...',
    'conference' => '...',
    'glossary' => '...',
    'wiki' => '...',
    'course_info' => '...',
    'users' => '...',
    'tooladmin' => '...',
    'usage' => '...'
);

Επίσης, στο φάκελο κάθε theme υπάρχει ο φάκελος img που περιέχει μερικά από τα εικονίδια του theme.

Όλα τα υπόλοιπα αρχεία που βρίσκονται μέσα στον υποκατάλογο ενός theme περιέχουν πόρους (εικονίδια, CSS κλπ.) που φορτώνονται από κάποιο από τα παραπάνω αρχεία, και δεν απαιτείται να έχουν συγκεκριμένη δομή ή ονόματα.

Παρακάτω αναλύεται η δομή μπλοκ και οι μεταβλητές που ορίζονται σε καθένα από τα αρχεία αυτά.

''theme.html''

  • Μπλοκ mainBlock - περικλείει το τμήμα του template που περιέχει όλα τα υπόλοιπα μπλοκ και μεταβλητές
  • Μεταβλητές:
    • PAGE_TITLE - τίτλος τρέχουσας σελίδας
    • template_base - base absolute URL του theme (π.χ. ένα αρχείο CSS μπορεί να αναφέρεται ως <link href=“{%template_base%}/theme.css” rel=“stylesheet” type=“text/css”>
    • img_base - base absolute URL του φακέλου img (π.χ. <img src=“{%template_base%}/img/example.png”>
    • EXTRA_CSS, TOOL_CSS, HEAD_EXTRAS - μεταβλητές για τη φόρτωση πόρων (JavaScript, CSS κλπ.) που πρέπει να περιέχονται στο <head> element της HTML.
    • ECLASS_HOME_EXTRAS_LEFT, ECLASS_HOME_EXTRAS_RIGHT - αντικαθίστανται με τα περιεχόμενα των μεταβλητών $langExtrasLeft και $langExtrasRight και χρησιμοποιούνται για την προσθήκη κειμένου/εικονιδίων αριστερά και δεξιά στην αρχική σελίδα
    • ECLASS_LEFTNAV_EXTRAS - περιέχει κώδικα που εμφανίζεται κάτω από το αριστερό μενού και αναφέρεται στα Ανοικτά Ακαδημαϊκά Μαθήματα (OpenCourses)
    • CONTENT_MAIN_CSS - περιέχει τις τιμές content_main_no_nav (όταν αποκρύπτεται το αριστερό μενού πλοήγησης), content_main_first (στην αρχική σελίδα όταν ο χρήστης δεν έχει συνδεθεί) ή content_main (στις υπόλοιπες περιπτώσεις)
    • THIRD_BAR_TEXT, THIRDBAR_LEFT_ICON τίτλος και εικονίδιο (lesson_icon, admin_bar_icon, briefcase_icon, logo_icon) σελίδας
  • Μπλοκ:
  • HeaderBlock - περιέχει την επικεφαλίδα με το λογότυπο της πλατφόρμας και χρησιμοποιεί τις παρακάτω μεταβλητές:
    • Μηνύματα: LANG_USER («Χρήστης»), LANG_LOGOUT («Έξοδος»), LANG_SELECT_TITLE («Επιλογή Γλώσσας»), LANG_SEARCH («Αναζήτηση»), SEARCH_ADVANCED («Προχωρημένη αναζήτηση»), LANG_COPYRIGHT_NOTICE(«Πληροφορίες Πνευματικών Δικαιωμάτων»)
    • Στοιχεία χρήστη: USER_NAME, USER_SURNAME
    • Στοιχεία UI: LOGOUT_LINK (URL που οδηγεί σε αποσύνδεση), LANG_SELECT (HTML element <select name=“localize”> για την επιλογή γλώσσας), URL_PATH (URL πλατφόρμας), SITE_NAME (όνομα πλατφόρμας), SEARCH_ACTION (το όνομα του τρέχοντος αρχείου αναζήτησης, π.χ. search.php), SEARCH_ADVANCED_URL (το όνομα του αρχείου της φόρμας προχωρημένης αναζήτησης, συνήθως ίδιο με το SEARCH_ACTION)
  • breadCrumbHomeBlock, breadCrumbStartBlock, breadCrumbEndBlock - το αρχικό, μεσαίο και τελικό μπλοκ των breadcumbs - χρησιμοποιούν τις παρακάτω μεταβλητές:
    • {%BREAD_HREF_FRONT%}{%BREAD_TEXT%}{%BREAD_HREF_END%} - ένα πλήρες link στο αντίστοιχο τμήμα του breadcrumb
    • BREAD_ARROW - το string » ή κενό για το διαχωρισμό των στοιχείων
    • leftNavBlock - αριστερό μενού
    • leftNavCategoryBlock - κατηγορία στο αριστερό μενού
    • leftNavCategoryTitleBlock- τίτλος κατηγορίας - χρησιμοποιεί τις μεταβλητές: NAV_CSS_CAT_CLASS (κλάση τίτλου: spacer, split, category), ACTIVE_TOOLS (κείμενο τίτλου: NBSP, NBSP ή κείμενο, αντίστοιχα), TOOL_GROUP_ID (αύξων αριθμός κατηγορίας, 0…n)
  • leftNavLinkBlock - ένα στοιχείο του μενού - χρησιμοποιεί τις μεταβλητές: @TOOL_LINK@ (το URL του εργαλείου), TOOL_ATTR (πρόσθετα attributes που πρέπει να προστεθούν στο σύνδεσμο του εργαλείου, π.χ. ' target=“_blank”', IMG_FILE (το εικονίδιο του εργαλείου, π.χ. document_on.png), IMG_CLASS (το όνομα του εικονιδίου κανονικοποιημένο (χωρίς την κατάληξη _on/_off), με την τιμή που έχει στον πίνακα $icon_map αν έχει οριστεί), TOOL_TEXT (ο τίτλος του εργαλείου), TOOL_CLASS (έχει τιμή “current” αν πρόκειται για το τρέχον εργαλείο, αλλιώς κενή)
  • toolTitleBlock - επικεφαλίδα περιεχομένου τρέχοντος υποσυστήματος - χρησιμοποιεί τις παρακάτω μεταβλητές:
    • TOOL_NAME - όνομα υποσυστήματος
    • HELP_LINK_ICON - εικονίδιο με link για την εμφάνιση της βοήθειας
    • RSS_LINK_ICON - εικονίδιο με link για το RSS
    • ACTIVATE_MODULE - link για ενεργοποίηση / απενεργοποίηση υποσυστήματος
    • TOOL CONTENT - περικλείει την HTML του υποσυστήματος και χρησιμοποιεί τις παρακάτω μεταβλητές:
    • EXTRA_MSG - μήνυμα για πραγματοποίηση ενέργειας - περιέχει ένα @<div>@ με μία από τις παρακάτω κλάσεις: …
    • TOOL_CONTENT - το κυρίως περιεχόμενο του υποσυστήματος - ορίζεται από τη global μεταβλητή $tool_content