wc_main.js

/*
Autor: Raphael Hoeser
Datum: 11.07.2017
Version: 1.1

WordClock Main JS

*/

// Settings
var wc_settings = {
	lang: 'DE',
	updateInterval: 1000,
	round: false,
  showMinutePoints: true,
  stencilMode: false
}

// ClassNames of HTML Elements
var wc_wcClassName = 'wc';
var wc_minutesClassName = wc_wcClassName + '__minutes';
var wc_minuteDotClassName = wc_wcClassName + '__minute';
var wc_rowClassName = wc_wcClassName+'__row';
var wc_letterClassName = wc_rowClassName+'__letter';
var wc_stencilLetterClassName = wc_rowClassName+'__stencil';
var wc_brightLetterClassName = wc_letterClassName+'--bright';

// Vars for the Wordclock (not to be changed)
var wc_updateInterval;

// Developer Options
var wc_debugMode = 0; // Debug Mode defines which notes should be logged by wc_debugLog(note, priority) (0 = all Massages default)

// Language Packs
var wc_languagePacks = [];

// adds a LanguagePack to the database
function wc_addLanguagePack(pack){
	wc_languagePacks[wc_languagePacks.length] = pack;
}

// logging Function, which only logs notes with priotity > wc_debugMode
function wc_debugLog(note,priority){
	if(priority-wc_debugMode>0)
		console.log(note);
}

// Init to place Letters in clock and set Interval
function wc_init(){
	wc_setLetters(wc_settings.lang);
	wc_updateInterval = window.setInterval(wc_update,wc_settings.updateInterval);
	wc_update();
}

// Set Load Listener to fire init();
window.addEventListener('load', wc_init);

// Updates Time
function wc_update(){
	var html_wcs = document.getElementsByClassName(wc_wcClassName);
	var date = new Date();
	var pack = wc_getLanguagePack(wc_settings.lang);
	wc_setMinuteDots(date.getMinutes()%5, wc_settings);
	var timestring = pack.timeString(date.getHours(),date.getMinutes(), wc_settings);
	var timewords = timestring.split(' ');
	var displayChars = ''; 
	var rows = pack.letterSet;
	var allRows = [];
	for(var i=0; i<rows.length; i++){
		allRows = allRows.concat(rows[i]);
	}
	displayChars = allRows.join('');
	for(var i=0; i<html_wcs.length; i++){
		var dcToWork = displayChars;
		var letters = html_wcs[i].getElementsByClassName(wc_letterClassName);
		var offset = 0;
		wc_setMode(letters,0,dcToWork.length, false);
		for(var j=0; j<timewords.length; j++){
			var start = dcToWork.search(timewords[j]);
			wc_setMode(letters,start+offset,start+offset+timewords[j].length, true);
			offset += start+timewords[j].length;
			dcToWork = dcToWork.substr(start+timewords[j].length);
		}
	}
}

// Sets all letters from index start to index end-1 to bright if mode == true, else dark
function wc_setMode(domElems, start, end, mode){
	for(var i=start; i<end; i++){
		if(mode)
			domElems[i].classList.add(wc_brightLetterClassName);
		else
			domElems[i].classList.remove(wc_brightLetterClassName);
	}
}

// Sets lettes by Language Code to all Clocks
function wc_setLetters(langCode){
	var html_wcs = document.getElementsByClassName(wc_wcClassName);
	var currentLangPack = wc_getLanguagePack(langCode);
	
	for(var i=0; i<html_wcs.length; i++)
		wc_setHTMLLetters(html_wcs[i],currentLangPack);
}

// Sets HTMl letters of given pack to given clock
function wc_setHTMLLetters(clock,langPack){
	var letters = langPack.letterSet;
	for(var i=0; i<letters.length; i++){
		var html_row = document.createElement('div');
		html_row.classList.add(wc_rowClassName);
		for(var j=0; j<letters[i].length; j++){
			var html_letter = document.createElement('span');
      html_letter.classList.add(wc_letterClassName);
      if(wc_settings.stencilMode){
        html_letter.classList.add(wc_stencilLetterClassName);
      }
			html_letter.innerText = letters[i][j];
			html_row.appendChild(html_letter);
		}
		clock.appendChild(html_row);
	}
}

// returns Language Pack by LangCode
function wc_getLanguagePack(langCode){
	for(var i=0; i<wc_languagePacks.length; i++){
		if(wc_languagePacks[i].langCode == langCode)
			return wc_languagePacks[i];
	}
	return false;
}

function wc_setMinuteDots(dots, settings){
	for(var clock of document.getElementsByClassName(wc_minutesClassName)){
		if (settings.showMinutePoints) {
			clock.classList.remove("wc--hidden");
			for(var i=1; i<=dots; i++){
        clock.getElementsByClassName(wc_minuteDotClassName+'__'+i)[0].classList.add("wc__minute--bright");
        if(wc_settings.stencilMode){
          clock.getElementsByClassName(wc_minuteDotClassName+'__'+i)[0].classList.add("wc__minute--stencil");
        }
			}
			for (var i = dots+1; i <= 4; i++) {
        clock.getElementsByClassName(wc_minuteDotClassName+'__' + i)[0].classList.remove("wc__minute--bright");
        if(wc_settings.stencilMode){
          clock.getElementsByClassName(wc_minuteDotClassName+'__'+i)[0].classList.add("wc__minute--stencil");
        }
			}
		}
		else{
			clock.classList.add("wc--hidden");
		}
	}
}