Code Samples

View model class

Project: RQR PartnersLanguage: TypeScript

import express from 'express';
import {App} from './app';
import {Config} from './config';
import {ViewRenderer} from './viewRenderer';
import {Session} from './session';
import {Translation, TranslationLink} from './translation';

/**
 * The Model class
 * @abstract
 */
export abstract class Model {
	public readonly mainView: string = 'index';
	protected readonly Request: typeof PageRequest = PageRequest;

	public abstract readonly route: string | null;
	public abstract readonly view: string;

	public readonly config: Config;
	private _viewRenderer?: ViewRenderer;

	constructor(public readonly app: App) {
		this.config = app.config;
	}

	/**
	 * Executes a request for this view model
	 * @param {express.Request} request The Express Request object
	 * @param {express.Response} response The Express Response object
	 * @memberof Model
	 */
	exec(request: express.Request, response: express.Response): void {
		const modelRequest = new this.Request(this, request, response);
		if (modelRequest.load) modelRequest.load.then(() => {
			modelRequest.render();
		});
	}

	/**
	 * Translates a string for this view model
	 * @param {string} id The string ID
	 * @param {PageRequest} request The PageRequest instance
	 * @returns {string} The translated string
	 * @memberof Model
	 */
	translate(id: string, request: PageRequest): string {
		return this.app.translate(this.view, id, request);
	}

	/**
	 * Gets or creates the ViewRenderer instance for this view model
	 * @readonly
	 * @type {ViewRenderer}
	 * @memberof Model
	 */
	get viewRenderer(): ViewRenderer {
		if (!this._viewRenderer) this._viewRenderer = new ViewRenderer(this.app, this.view);
		return this._viewRenderer;
	}
}

/**
 * The PageRequest class, which is instantiated for each request
 * @export
 * @class PageRequest
 */
export class PageRequest {
	public readonly load: Promise<void>;
	public readonly query: object;
	public readonly post: object;
	public session?: Session;
	public language?: string;
	public view: string = '';
	public title: string = '';
	public headerNav: string = '';
	public languages: TranslationLink[];

	/**
	 * Creates a PageRequest instance
	 * @param {Model} model The Model instance for the page being requested
	 * @param {express.Request} request The Express Request object
	 * @param {express.Response} response The Express Response object
	 * @memberof PageRequest
	 */
	constructor(public readonly model: Model, public readonly request: express.Request, public readonly response: express.Response) {
		this.query = request.query;
		this.post = request.body;
		this.language = Translation.languages[request.params.language] ? request.params.language : 'en';
		this.languages = Translation.linkList(this);

		const title = this.translate('title');
		this.title = this.model.config.title + (title ? ` ${this.model.config.titleSeparator} ${title}` : '');

		if (request.cookies[model.app.config.sessionCookie]) {
			this.load = Session.load(request.cookies[model.app.config.sessionCookie]).then((session) => {
				this.session = session;
			});
		} else {
			this.session = new Session();
			this.load = Promise.resolve();
		}
	}

	/**
	 * Translates a string for the requested page
	 * @param {string} id The string ID
	 * @returns {string} The translated string
	 * @memberof PageRequest
	 */
	translate(id: string): string {
		return this.model.translate(id, this);
	}

	/**
	 * Renders the page and sends it to the client
	 * @memberof PageRequest
	 */
	render(): void {
		const scope = {request: this, model: this.model};
		this.headerNav = this.model.app.navigation.header.render(this.model.view, this);
		this.view = this.model.viewRenderer.render(scope);
		if (this.session) this.response.cookie(this.model.app.config.sessionCookie, this.session.key, {httpOnly: true});
		this.response.send(this.model.app.viewRenderer.render(scope));
	}
}

Page and Nav classes

Project: ELEVENLanguage: PHP

<?php

class Page {
	var $route, $controller, $title, $active, $icon;
	public function __construct($route, $controller, $title = null, $icon = null, $description = null) {
		global $mainDescription;
		$this->route = $route;
		$this->controller = $controller;
		$this->title = $title;
		$this->icon = $icon;
		$this->description = $description ? $description : $mainDescription;
		$this->active = false;
	}
	public function write() {
		require_once('pages/' . $this->controller . '.php');
	}
	public function fullTitle() {
		global $mainTitle;
		return ($this->title && strlen($this->title) ? ($this->title . ' | ') : '') . $mainTitle;
	}
}

class HiddenPage extends Page {
	var $hidden = true;
}

class Nav {
	var $pages, $activeRoute, $activePage;
	public function __construct($pages) {
		$this->pages = array();
		$this->activeRoute = $_SERVER['REDIRECT_URL'];
		foreach ($pages as &$page) {
			$this->addPage($page);
		}
	}
	public function activate($page) {
		$page->active = true;
		$this->activePage = &$page;
	}
	public function addPage($page) {
		if ($page->route == $this->activeRoute) $this->activate($page);
		$this->pages[] = &$page;
	}
}

Client-side carousel script

Project: ELEVENLanguage: JavaScript/jQuery

$(document).ready(function() {
	var page = $('body').data('page');

	if (page == 'home') {

		// Delay between automatic cycle
		var delay = 8000;

		for (var i = 0; i < 4; i++) {
			$('#preloader').append('<img src="/assets/home' + i + '.jpg">')
		}

		var moving = false;
		var position = 0;
		var body = $('body');
		var bgContainer = $('#bgContainer');
		var mainHeader = $('#container > main > header');
		var carousel = $('#container > main > div');
		var section = carousel.children('section');
		var secHeader = section.children('header');
		var headingsContainer = secHeader.children('div');
		var headings = headingsContainer.children('h2');
		var copyContainer = section.find('> main > div');
		var b = {
			prev: carousel.children('[data-prev]'),
			next: carousel.children('[data-next]')
		};

		var check = function() {
			b.prev.toggleClass('disabled', position <= 0);
			b.next.toggleClass('disabled', position >= headings.length - 1);
		};
		var flip = function(dir) {
			if (moving) return;
			moving = true;
			var origPos = position;
			position += dir;
			if (position >= headings.length) position = 0;
			if (position < 0) position = headings.length - 1;
			headingsContainer.css('top', (position * -100) + '%');
			copyContainer.css('left', (position * -100) + '%');
			mainHeader.css({
				top: position == 0 ? '0' : '-10em',
				opacity: position == 0 ? 1 : 0
			});
			bgContainer.attr('data-slide', origPos).removeClass('fading');
			body.attr('data-slide', position);
			bgContainer.css('opacity'); // Hack to force DOM redraw
			bgContainer.addClass('fading');
			check();
			if ('ontransitionend' in bgContainer[0]) {
				bgContainer.on('transitionend', function() {
					moving = false;
				});
			} else {
				setTimeout(function() {
					moving = false;
				}, 500);
			}
		}
		var auto = setInterval(function() {
			flip(1);
		}, delay);
		var stop = function() {
			if (!auto) return;
			clearInterval(auto);
			auto = null;
		}
		b.prev.click(function() {
			if (b.prev.hasClass('disabled')) return;
			stop();
			flip(-1);
		});
		b.next.click(function() {
			if (b.next.hasClass('disabled')) return;
			stop();
			flip(1);
		});
		check();

		if ('onwheel' in window) $(window).on('wheel', function(e) {
			if (e.originalEvent.deltaY > 0) b.next.click();
			if (e.originalEvent.deltaY < 0) b.prev.click();
		});
		if ('ontouchstart' in copyContainer[0]) {
			copyContainer.on('touchstart', function(e1) {
				var start = e1.originalEvent.changedTouches[0];
				var ts = Date.now();
				copyContainer.one('touchend', function(e2) {
					if (Date.now() - ts > 1000) return;
					var end = e2.originalEvent.changedTouches[0];
					if (end.screenX < start.screenX) b.next.click();
					if (end.screenX > start.screenX) b.prev.click();
					return false;
				});
			});
		}
	}
});