gistfile1.txt

1. Introduction :

    This project implements a comic viewer which adjusts the layout of the original page in order to fit the screen size.
The information of screen size will be sent by the front-end through AJAX to backend. The backend php calculates the best
layout for the current screen information by applying a dynamic programming algorithm. In addition, while adjsuting the size
of the browser, a layout re-calculation will be performed. This comic viewer supports keyboard browsing by pressing left/right
key and also has a images list in the bottom for fast switching between pages.



2. Project Structures:

comics/
  |
  |-- mviewer.html
  |-- php/
  |   |-- allpages.php
  |-- css/
  |   |-- main.css
  |-- js/
  |   |-- lib/
  |   |-- mviewer.js
  |-- img/
  |-- four/
  |-- layout/
  |-- README


    * mviewer.html  : comic viewer's main html file
    * php/          : this DIR contains all the php suorce files
    * allpages.php  : comic viewer's main php file, mainly run a algorithm to determine the best layout of current screen resolution
    * global.php    : header file for php files, includes global variables and array initialization
    * css/          : css source files, all css files are about the whole website's UI layout such as logo, font type,font size, banner color...etc.
    * main.css      : comic viewer's main css file, only this file need to be adjusted if you want to modify the UI of this website.
    * js/           : javascript source files, the front-end features
    * mviewer.js    : comic viewer's main javascript file, mainly are canvas-drawing functions.
    * global.js     : header file for javascript files, includes global variables/website initialzation
    * fullScreen.js : this file implements the full screen mode.
    * imgList.js    : this file implemnts a images list for fast switching between pages.
    * keyBinding.js : this file implements keyboard events such as right/left arrow-keys.
    * loading.js    : this file implements a progress bar at the initialization and also an animated icon for image loading
    * preload.js    : this file implements the preload function for the comic viewer.
        * reSize.js     : this file implemnts the resize event for comic viewer.
    * js/lib/       : all used javascript libraries such as bootsrap, jQuery...etc.
    * img/          : some icons used in the website
    * four/         : original comics pages (.JPG/.CSV)
    * layout/       : layout files for 2,3,4,5 frames