metanohi-misc-subsites/old-projects/algo/js/navbar.js

285 lines
9.7 KiB
JavaScript

/*
Algo: a dekstop environment look-a-like in your web browser
Copyright (C) 2009 Niels Serup
This file is part of Algo.
Algo is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Algo is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Algo. If not, see <http://www.gnu.org/licenses/>.
*/
/*
The navbar class creates a navigation bar. Normally Algo features two
navigation bars - one at the top of the page and one at the bottom of the
page. Several obejcts can be added to a navigation bar after its creation,
including dropdowns, appboxes (the boxes with text that you can click on,
usually found in the bottom navigation bar) and a clock. The style of the
navigation bar itself and the objects on the navigation bar is found in an
external css themes file.
*/
function navbar(pos) {
// navnum = the order in which it was created (0, 1, etc.)
this.navnum = navi.length
// If pos is undefined, set the navigation bar to be at the top
if (pos == undefined || pos == -1) var pos = [[0, ''], -1, -1, [0, '']]
// Save pos
this.pos = pos
// Create the actual navigation bar element
this.menu = document.createElement('div')
/* Makes it identifiable by a css file.
By adding " navi" followed by the number of the navbar,
each navbar can be independently changed by a css file */
this.menu.className = 'navbar navi' + this.navnum
// Update the position of the navbar
this.update()
// Append the navbar to the wrapper
wrapper.appendChild(this.menu)
}
navbar.prototype.update = function() {
// Loop through the 4 global directions (top to right)
for (var i = 0; i < global_directions_length; i++) {
/* If the pos is not no-existant, style the navbar's menu element with the
amount ([i][0]) followed by a unit ([i][1]) */
if (this.pos[i] != -1)
this.menu.style[global_directions[i]] = this.pos[i][0] + this.pos[i][1]
}
}
navbar.prototype.support = function(name) {
/* When supporting objects, they will be linked to the supporting navbar
to make them accesible later on via the global "posis" list */
posis[name] = this.navnum
// Special cases
if (name == 'dropdowns')
this.drops = []
}
navbar.prototype.unsupport = function(name) {
// Cease support of a certain object
if (posis[name] == undefined) return
delete posis[name]
// Special cases
if (name == 'dropdowns')
delete this.dropdowns
else if (name == 'appboxes')
delete this.appboxes
}
// DROPDOWN
navbar.prototype.drop = function(name, list) {
/* Adds a dropdown menu. Dropdowns will appear in the order they are created.
"name" is the name of the dropdown menu, while "list" holds all the
entries in an array-like format.
*/
var listlen = list.length
var wrap = this.append_level(list, name)
this.dropdowns.appendChild(wrap)
// Adds a new dropdown object to the "drops"
this.drops[this.drops.length] = [wrap, name, list]
}
navbar.prototype.append_level = function(list, first) {
/* This function creates the elements of a dropdown menu,
based on a list of strings and (eventually) more lists.
This function will call itself if a list at level one
has another list. That way, there are no factors that
limit the number of levels in a dropdown menu. "first"
is set to the name of the list when called from the
original drop prototype function, while it is set to
false when called from this function itself. */
var listlen = list.length
var i, wrap, dtop, type, elem, elema, elemb, spl, title
// Creates the temporary element that will hold everything
wrap = document.createElement('div')
if (first) {
wrap.className = 'dropdown'
// dtop = the header element
dtop = document.createElement('div')
// Adds two classes, one general and one special (" drop" + drops.length)
dtop.className = 'top drop' + navi[posis['dropdowns']].drops.length
dtop.innerHTML = first
wrap.appendChild(dtop)
}
else {
/* If it's not the first time the function is called, it will create a
div with entries instead of a div with a header. */
wrap.className = 'entries'
elem = document.createElement('div')
elem.className = 'side'
wrap.appendChild(elem)
}
/* This is the main loop. It looks at the list entries and evaluates them
based on what they are. If a string is encountered, it is written to the
dropdown menu. If an object (a list in this case) is encountered, this
function is recalled with the sublist as the main list. */
for (i = 0; i < listlen; i++) {
type = typeof(list[i])
if (type == 'string') {
spl = [list[i], 'true']
if (list[i].indexOf('#') != -1)
spl = list[i].split('#')
elem = document.createElement('div')
elem.className = 'entry'
elem.rel = spl[1]
elem.onmouseup = function() {
navi[posis['dropdowns']].hide_drops()
}
elem.innerHTML = spl[0]
elem.onclick = function() {
eval('scr.setwindow(\'' + this.innerHTML + '\',' + this.rel + ')')
}
wrap.appendChild(elem)
}
else if (type == 'object') {
elem = document.createElement('div')
elem.className = 'group'
elema = document.createElement('div')
elema.className = 'header'
elema.innerHTML = list[i][0]
elem.appendChild(elema)
elema = this.append_level(list[i][1])
elem.appendChild(elema)
wrap.appendChild(elem)
}
}
return wrap
}
navbar.prototype.hide_drops = function() {
/* When clicking on an entry in a dropdown menu, the mouse will still hover
the dropdown element, and the dropdown element will still be visible.
By temporarily changing the class of the dropdown menu, this function
makes the dropdown disappear. */
if (!hiding_drops) {
hiding_drops = true
var l = this.drops.length
for (i = 0; i < l; i++) {
this.drops[i][0].className = 'dropdownh dropdown'
}
// No need to wait for more than 0.1 seconds
setTimeout('navi[posis[\'dropdowns\']].hide_drops()', 100)
}
else {
hiding_drops = false
var l = this.drops.length
for (i = 0; i < l; i++) {
this.drops[i][0].className = 'dropdown'
}
}
}
navbar.prototype.box = function(name, pos) {
/* This function adds a box with an object to the navigation bar. "pos" is
the css float property and is completely optional. For the most part it
should in fact not be neccesary to use it, as the styles of most elements
added by this function is defined in a css file. */
if (pos == undefined) pos = 'none'
this[name] = document.createElement('div')
this[name].className = name
this[name].style.cssFloat = pos
this.menu.appendChild(this[name])
// Special cases
if (name == 'clock') {
this.setclock()
this.clockinterval = setInterval('navi[posis[\'clock\']].setclock()', 30000)
}
if (name == 'abs_scroller') {
// abs_scroller appears when there is not enough space for all appboxes.
this.abs_scroller.className = 'abs'
var elem
elem = document.createElement('div')
elem.className = 'scrollup'
elem.onclick = function() {
// Scroll up
navi[posis['appboxes']].abs_scroll(1)
}
this.abs_scroller.appendChild(elem)
elem = document.createElement('div')
elem.className = 'scrolldown'
elem.onclick = function() {
// Scroll down
navi[posis['appboxes']].abs_scroll(-1)
}
this.abs_scroller.appendChild(elem)
this.menu.style.overflow = 'hidden'
}
}
navbar.prototype.check_abs_height = function(force) {
/* This function checks if there is a need for a scroller, i.e. if there are
too many appboxes to be shown in one line. */
var abs = navi[posis['appboxes']].height
var rnum = navi[posis['appboxes']].appboxes.scrollHeight
if (ie) {
// Internet Explorer has some issues. This fix isn't perfect.
if ((rnum / abs + '').indexOf('.') != -1) rnum += appbox_margin * 2
}
var num = rnum / abs
if (num > 1) {
// If there are too many appboxes
navi[posis['appboxes']].appboxes.style.marginRight = abs_scroller_width + 3 + 'px'
navi[posis['appboxes']].abs_scroller.style.display = 'block'
/* If the force is true, scroll to the place where the window linked with
the appbox is */
if (force) this.abs_scroll(-Math.floor(wnds[scr.wndpos[0]].appbox.offsetTop / abs))
}
else {
navi[posis['appboxes']].appboxes.style.marginRight = '0'
navi[posis['appboxes']].abs_scroller.style.display = 'none'
this.abs_scroll(-abs_scrolled)
}
}
navbar.prototype.abs_scroll = function(am) {
var abam = abs_scrolled + am * 1
var abs = this.height
var rnum = this.appboxes.scrollHeight
if (ie) {
// Internet Explorer has some issues. This fix isn't perfect.
if ((rnum / abs + '').indexOf('.') != -1) rnum += appbox_margin * 2
}
/* num = the actual height of the appboxes container divided with the
displayed height */
var num = rnum / abs
if (abs_scrolled + am < 1 && abam * -1 < num) {
// Only do the scrolling if there's something to scroll to
abs_scrolled = abam
this.appboxes.style.marginTop = abs * abs_scrolled + 'px'
}
}
navbar.prototype.setclock = function() {
var time = new Date ()
var hours = time.getHours()
var minutes = time.getMinutes()
// "07" is nicer than just "7"
hours = (hours < 10 ? "0" : "") + hours
minutes = (minutes < 10 ? "0" : "") + minutes
this.clock.innerHTML = hours + ':' + minutes
}