Changeset 86 in t29-www for shared/js


Ignore:
Timestamp:
Mar 21, 2009, 12:19:25 AM (11 years ago)
Author:
sven
Message:

Telefunken T40W:

  • Bilddateien in eigenes Verzeichnis verschoben
  • Slider um Automatik-Play-Modus erweitert

Heribert hat zwar schon nen Text geschrieben, den ich aber
versehentlich ueberschrieben habe. Der kommt also morgen.

-- Sven @ t29

File:
1 edited

Legend:

Unmodified
Added
Removed
  • shared/js/slider/slider.js

    r85 r86  
    44 * This is a lightweight slider implementation originally from
    55 * http://www.arantius.com/article/lightweight+javascript+slider+control
    6  * (2006 Anthony Lieuallen)
     6 * (2006 Anthony Lieuallen).
     7 * It has been improved a lot to fully implement the requirements of
     8 * technikum29.
    79 *
     10 * FEATURES of the slider + player extension:
    811 *
     12 * * basic features: Can be used as simple slider in a user defined
     13 *   range and with an user defined call back function.
     14 * * There can be as much sliders on your page as you want.
     15 * * player features: The player imitates some kind of media player
     16 *   where the slider is the actual position in the played file.
     17 *   Principally, it's a highly configurable extension that simply
     18 *   increases/decreases your slider value on a regular basis.
     19 *
     20 * This script uses advanced DOM technologies like they are typical
     21 * for huge javascript libraries like prototype. Anyway, it's very
     22 * small for it's features.
     23 *
     24 * This script is used for the Telefunken T40W page.
     25 *
     26 * (c) 2009 Sven Koeppel
     27 * Released under the public domain.
    928 */
    1029
     
    6887}
    6988/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
     89/**
     90 * function attachSliderEvents: Called at window onload, parses
     91 * DOM tree to get slider widgets and setup events for mouse
     92 * capturing. This will also setup the player button/extension.
     93 **/
    7094function attachSliderEvents() {
    7195        var divs=document.getElementsByTagName('div');
    72         var divNum;
     96        var divNum, playerButton;
    7397        for(var i=0; i<divs.length; i++) {
    7498                if (divNum=divs[i].id.match(/\bslider(\d+)\b/)) {
    75                         // set initial properties
    7699                        divNum=parseInt(divNum[1]);
    77                         divs[i].min=slider[divNum].min;
    78                         divs[i].max=slider[divNum].max;
    79                         divs[i].val=slider[divNum].val;
    80                         divs[i].onchange=slider[divNum].onchange;
    81                         divs[i].num=divNum;
     100                        // copy initial properties
     101                        for(var key in slider[divNum]) {
     102                                divs[i][key] = slider[divNum][key];
     103                        }
     104                        divs[i].num = divNum;
     105
    82106                        // and make sure the display matches
    83107                        drawSliderByVal(divs[i]);
    84108                        divs[i].onchange(divs[i].val, divNum);
     109
     110                        if(playerButton=document.getElementById('slider-button'+divNum)) {
     111                                divs[i].isPlayable = true;
     112                                // announce them to each other
     113                                divs[i].playerButton = playerButton;
     114                                playerButton.slider = divs[i];
     115                                // setup button
     116                                setPlayerLabel(divs[i]);
     117                                addAnEvent(playerButton, 'click', function(e){
     118                                        togglePlayer(this.slider);
     119                                });
     120                                // auto start support
     121                                if(divs[i].playerAutoStart)
     122                                        startPlayer(divs[i]);
     123                        } else {
     124                                divs[i].isPlayable = false;
     125                        }
    85126
    86127                        addAnEvent(divs[i], 'mousedown', function(e){
     
    98139        }
    99140}
     141
     142/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
     143/**
     144 * startPlayer(slider): This will start the player extension (moving the
     145 * slider automatically).
     146 **/
     147function startPlayer(slider) {
     148        if(slider.isPlaying) stopPlayer(slider);
     149        if(slider.isPlayerPreparingRepeatFromMin) {
     150                // we are now starting from minimum.
     151                slider.isPlayerPreparingRepeatFromMin = false;
     152                // rewind rapidly back to minimum
     153                /*while(slider.val > slider.min) {
     154                        slider.val -= slider.playerStepDistance * 100;
     155                        drawSliderByVal(slider);
     156                        slider.onchange(slider.val, slider.num);
     157                }*/
     158                slider.val = slider.min;
     159        }
     160        slider.isPlaying = true;
     161        setPlayerLabel(slider);
     162        slider.playerInterval = window.setInterval(function(slider){
     163                slider.val += slider.playerStepDistance;
     164                if(slider.val > slider.max) {
     165                        slider.val = slider.max;
     166                        if(slider.playerAutoReverse)
     167                                slider.playerStepDistance *= -1;
     168                        else
     169                                stopPlayer(slider);
     170                        if(slider.playerRepeatFromMin) {
     171                                slider.isPlayerPreparingRepeatFromMin = true
     172                                setPlayerLabel(slider);
     173                        }
     174                } else if(slider.val < slider.min) {
     175                        slider.val = slider.min;
     176                        if(slider.playerAutoReverse)
     177                                slider.playerStepDistance *= -1;
     178                        else
     179                                stopPlayer(slider);
     180                }
     181                drawSliderByVal(slider);
     182                slider.onchange(slider.val, slider.num);
     183        }, slider.playerStepTimeout, slider);
     184}
     185
     186/**
     187 * stopPlayer(slider): This function does exactly what you think it
     188 * will do (see startPlayer).
     189 **/
     190function stopPlayer(slider) {
     191        slider.isPlaying = false;
     192        setPlayerLabel(slider);
     193        window.clearInterval(slider.playerInterval);
     194}
     195
     196/**
     197 * setPlayerLabel(slider): Set the player button label according to
     198 * the current state (whether the slider is currently playing or not)
     199 **/
     200function setPlayerLabel(slider) {
     201        if(!slider.isPlayable) return false;
     202        if(slider.isPlaying) {
     203                slider.playerButton.value = slider.playerStopLabel?slider.playerStopLabel:'|_| Stop';
     204        } else if(slider.isPlayerPreparingRepeatFromMin) {
     205                slider.playerButton.value = slider.playerRepeatLabel?slider.playerRepeatLabel:'|<< Repeat';
     206        } else {
     207                slider.playerButton.value = slider.playerStartLabel?slider.playerStartLabel:'> Start';
     208        }
     209}
     210
     211/**
     212 * togglePlayer(slider): Start/Stop the slider player according to
     213 * the current state (wheter the slider is currently playing or not)
     214 **/
     215function togglePlayer(slider) {
     216        if(slider.isPlaying) {
     217                stopPlayer(slider);
     218        } else {
     219                startPlayer(slider);
     220        }
     221}
     222
    100223/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
    101224//borrowed from prototype: http://prototype.conio.net/
Note: See TracChangeset for help on using the changeset viewer.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License