peterS.: alternativer loesungsansatz (teil2): .., controller.

Beitrag lesen

hallo again Felix,

...
die alles steuernde applikation auf basis von JavaScript 1.6 bis 1.8 bzw.
auf basis selbstgetrickter erweiterungen, die unter anderem auch einige
dieser features nach-/abbilden (die YUI-lib basis wurde auskommentiert):

//  [Array.generics.iterators.accessors]      - [http://www.pseliger.de/jsExtendedApi/jsApi.Array.mozGenerics.dev.js] september 23-2006:  
Array.forEach = (function (obj, fct) {if(typeof fct=="function"){var i,l=(((obj instanceof Array)||((typeof obj.length=="number")&&((typeof obj.item=="function")||(typeof obj.item=="object")||(typeof obj.item=="string")||(obj instanceof window.NodeList)||(obj instanceof window.HTMLCollection))))?(obj.length):(0));for(i=0;i<l;++i){fct.call(null,(obj[i]||obj.item(i)),i,obj);}}}); // generic.  
  
String.prototype.toRegExpString = (function () {return this.replace(/([\^\$\.\*\+\?\=\!\:\|\\\/\(\)\[\]\{\}])/g,"\\$1");}); // prototypical.  
//RegExp.toSearchString = (function (str) {return (new String(str)).replace(/([\^\$\.\*\+\?\=\!\:\|\\\/\(\)\[\]\{\}])/g,"\\$1");}); // generic.  
  
  
//to be used whilst state of development only:  
if (typeof Object.prototype.toSource != "function") {Object.prototype.toSource = Object.prototype.toString;}  
  
  
  
(function () { // anonymus application context.  
  
  
  
//var Application = YAHOO.namespace("SlideshowGenerator");  
  (window || this)["SlideshowPlugin"] = {}; // generate global namespace [SlideshowPlugin].  
  var Application = SlideshowPlugin;  
  
  
//var Lang, Dom, Evt, Elm, Anim, Easing, Slct; // shortcuts referencing !YAHOO User Interface Library modules.  
  
  var elmBody;  
  
  
//to be used whilst state of development only:  
  console = (((typeof console != "undefined") && console.log) ? (console) : ({log:(function(msg){/*alert(msg);*/})}));  
  
  
  
  var SlideshowGenerator = (function () { // [SlideshowGenerator] Singleton.  
  
  
    var slideshowData, slideshowList = [], counterDivider = " / ";  
  
  
    var Slideshow = (function (elm, idxOfSlideshowElm) { // [Slideshow] Constructor (no public properties at all).  
  
  
      var slideList, amountOfSlides, idxSlide = -1;  
  
      var elmSlide = elm.getElementsByTagName("img")[0];  
      var elmControl = elm.getElementsByTagName("span")[0];  
    //var elmPrevious = [link:http://developer.yahoo.com/yui/docs/YAHOO.util.Dom.html#method_getElementsByClassName@title=Dom.getElementsByClassName]("previous", "a", elmControl)[0]; // YUI-lib;  
    //var elmNext = Dom.getElementsByClassName("next", "a", elmControl)[0];  
    //var elmPrevious = [link:http://www.pseliger.de/jsExtendedApi/jsApi.bundles.DOM.getters.js@title=Node.getElementsByClassNames](elmControl, "previous")[0]; // [jsApi.bundles.DOM.getters.js]  
    //var elmNext = Node.getElementsByClassNames(elmControl, "next")[0];  
      var controls = elmControl.getElementsByTagName("span");  
      var elmPrevious = controls[0];  
      var elmNext = controls[1];  
      delete controls;  
  
      var elmCounterCopy = elmControl.appendChild(document.createElement("span"));  
      elmCounterCopy = elmCounterCopy.appendChild(document.createTextNode("n" + counterDivider + "m"));  
  
  
      var elmSlideBlend = elmSlide.cloneNode(true);  
    //[link:http://developer.yahoo.com/yui/docs/YAHOO.util.Dom.html#method_addClass@title=Dom.addClass](elmSlideBlend, "blend"); // YUI-lib;  
      elmSlideBlend.className = (elmSlideBlend.className + " blend");  
      elmSlide.parentNode.insertBefore(elmSlideBlend, elmControl);  
  
    //var animFadeOut = new [link:http://developer.yahoo.com/yui/docs/YAHOO.util.Anim.html@title=Anim](elmSlideBlend, {opacity: {to: 0, units: "%"}}, 0.3, [link:http://developer.yahoo.com/yui/docs/YAHOO.util.Easing.html#method_easeOut@title=Easing.easeOut]); // YUI-lib;  
  
  
      var refreshCounter = (function () {  
  
        elmCounterCopy.data = ((idxSlide + 1) + counterDivider + amountOfSlides);  
      });  
      var onNext = (function () {  
        // ...  
      });  
      var onPrevious = (function () {  
        // ...  
      });  
  
  
      (function () { // anonymus [initialize].  
  
        slideList = slideshowData[idxOfSlideshowElm];  
        amountOfSlides = slideList.length;  
  
        for (var regXDataSrc = (/\s/), src = elmSlide.src, len = slideList.length, i = 0; i<len; ++i) {/*  
  
          console.log("i : " + i + " - regXDataSrc : " + regXDataSrc.compile(arr[i].toRegExpString(), "i"));  
          console.log("regXDataSrc.test(\"" + src + "\") : " + regXDataSrc.compile(arr[i].toRegExpString(), "i").test(src));*/  
          if (regXDataSrc.compile(arr[i].toRegExpString(), "i").test(src)) {  
  
            idxSlide = i;  
            break;  
          }  
        }  
        idxSlide = ((idxSlide == -1) ? (0) : (idxSlide));  
  
        refreshCounter();  
  
        elmPrevious.onclick = onPrevious;  // [link:http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html#method_on@title=Evt.on](elmPrevious, "click", onPrevious); // YUI-lib;  
        elmNext.onclick = onNext;          // Evt.on(elmNext, "click", onNext);  
  
      //[link:http://developer.yahoo.com/yui/docs/YAHOO.util.Dom.html#method_setStyle@title=DOM.setStyle](elmControl, "display", "block"); // YUI-lib;  
        elmControl.style.display = "block";  
  
        delete arguments.callee; // throwing away anonymus [initialize].  
      })();  
  
    }); // [Slideshow] Constructor  
  
  
    return {  
  
      importData: (function (obj) {  
  
        slideshowData = obj;  
  
      //console.log("SlideshowGenerator :: importData :: slideshowData.dump() : " + [link:http://developer.yahoo.com/yui/docs/YAHOO.lang.html#method_dump@title=Lang.dump](slideshowData)); // YUI-lib;  
        console.log("SlideshowGenerator :: importData - slideshowData.dump() : " + slideshowData.toSource());  
        console.log("SlideshowGenerator :: importData - (SlideshowGenerator.importData === arguments.callee) ? " + (SlideshowGenerator.importData === arguments.callee));  
  
        delete Application.importSlideShowData;  
        delete SlideshowGenerator.importData;  
        delete arguments.callee;  
      }),  
      initialize: (function (elm) {  
  
        Array.forEach(Dom.getElementsByClassName("slideshow", "div", elmResults), (function (elm, idx/*, arr*/) {  
  
          slideshowList.push(new Slideshow(elm, idx));  
        }));  
        console.log("SlideshowGenerator - Application.importSlideShowData : " + Application.importSlideShowData);  
        console.log("SlideshowGenerator :: importData : " + SlideshowGenerator.importData);  
  
        delete SlideshowGenerator.initialize;  
        delete arguments.callee;  
      })  
    };  
  
  })(); // [SlideshowGenerator] Singleton.  
  
  Application.importSlideShowData = SlideshowGenerator.importData;  
  
  
  
  var initialize = (function () { // initialize application.  
  
      elmBody = (document.body || document.getElementsByTagName("body")[0]);  
  
      //  [document.getRenderEngineType] - [http://www.pseliger.de/jsExtendedApi/jsApi.bundles.DOM.getters.dev.js] as of september-07-2007:  
      document.isRenderEngineKHTML = (function () {return((typeof elmBody.style.KhtmlOpacity!=="undefined")&&(typeof elmBody.style.KhtmlOpacity==="string"));});  
  
      //  [RegExp.prototype.compile]     - [http://www.pseliger.de/jsExtendedApi/jsApi.bundles.DOM.getters.dev.js] as of september-07-2007:  
      if (((typeof RegExp.prototype.compile != "function") && (typeof RegExp.prototype.compile != "object")) || document.isRenderEngineKHTML()) {RegExp.prototype.compile = (function () {return this.constructor.apply(this, arguments);});} // due to a safari bug that does not implement the native JavaScript RegExp method [RegExp.compile] properly;  
  
  
      SlideshowGenerator.initialize();  
  
  
      delete initialize;  
      delete arguments.callee; // [arguments.callee] should be identic to [initialize], even though deletion only takes place if called directly by label instead by the more generic [arguments.callee].  
  });/*  
  
  
  [link:http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html#method_onContentReady@title=Evt.onContentReady]("htmlElementId", (function () { // YUI-lib;  
    // ...  
  }));  
  [link:http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html#method_onDOMReady@title=Evt.onDOMReady](function () { ... */ // YUI-lib;  
  
  (function () { // initialize application automatically.  
  
    if (window.addEventListener) {  
      window.addEventListener("load", initialize);  
    } else if (window.attachEvent) {  
      window.attachEvent("onload", initialize);  
    }  
    delete arguments.callee;  
  })();  
  
  
})();

seiten, die obigen code einbinden, muessen dann natuerlich noch die slideshow-daten
zur verfuegung stellen - beispielsweise so:

<script type="text/javascript" src="js/SlideshowPlugin.js"></script><!-- obiger code //-->  
<script type="text/javascript">
~~~~~~javascript
  
  
//console.log("YAHOO.AOWLB.importSlideShowData : " + YAHOO.AOWLB.importSlideShowData);  
  console.log("SlideshowPlugin.importSlideShowData : " + SlideshowPlugin.importSlideShowData);  
  
//YAHOO.AOWLB.importSlideShowData([  
  SlideshowPlugin.importSlideShowData([  
  
      ["img/slide01.jpg", "img/slide02.jpg", "img/slide03.jpg", "img/slide04.jpg", "img/slide05.jpg", "img/slide06.jpg", "img/slide07.jpg", "img/slide08.jpg", "img/slide09.jpg"],  
      ["img/slide05.jpg", "img/slide04.jpg", "img/slide03.jpg", "img/slide02.jpg", "img/slide01.jpg"],  
      ["img/slide09.jpg", "img/slide08.jpg", "img/slide07.jpg", "img/slide06.jpg", "img/slide05.jpg", "img/slide04.jpg", "img/slide03.jpg"],  
      ["img/slide02.jpg", "img/slide04.jpg", "img/slide06.jpg", "img/slide08.jpg"],  
      ["img/slide06.jpg", "img/slide04.jpg", "img/slide02.jpg"]  
    ]);
~~~~~~html
  
  
</script>

so long - peterS. - pseliger@gmx.net

--
»Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive.« - Douglas Crockford
ie:( fl:) br:> va:( ls:& fo:) rl:) n3;} n4:} ss:} de:µ js:} mo:? zu:]
3 52

Fader zum Bilder überblenden - ein kleiner Lehrgang

Felix Riesterer
  • javascript
  1. 2

    Das Script (Teil1)

    Felix Riesterer
    1. 1

      Das Script (Teil1) - Reflektion zum Code

      Felix Riesterer
      1. 0
        bosselmann
        1. 0
          Felix Riesterer
    2. 2

      alternativer loesungsansatz (teil1): model, view, ...

      peterS.
      1. 0

        alternativer loesungsansatz (teil2): .., controller.

        peterS.
        1. 0

          alternativer loesungsansatz (teil2): code review (teil 1?)

          peterS.
          1. 0

            alternativer loesungsansatz (teil2): code review (teil 2?)

            peterS.
            1. 0

              alternativer loesungsansatz (teil2): code review (teil 3)

              peterS.
      2. 0
        Felix Riesterer
        1. 0

          konkurrierende ansaetze

          peterS.
          1. 0
            Felix Riesterer
  2. 0

    SELFHTML-Artikel statt Forumsbeitrag?

    Vinzenz Mai
    • meinung
    1. 0
      Felix Riesterer
      1. 0
        Siechfred
        1. 0
          Felix Riesterer
        2. 0

          SELFHTML-Artikel - bin schon fleißig dabei!

          Felix Riesterer
        3. 0

          Artikel eingeschickt

          Felix Riesterer
          1. 0
            Siechfred
            • menschelei
            1. 0
              dedlfix
            2. 1
              Felix Riesterer
    2. 0
      Felix Riesterer
  3. 0

    Das Script (Teil 2)

    Felix Riesterer
  4. 0

    Das Script (Teil 3)

    Felix Riesterer
  5. 0

    Das Script (Endergebnis)

    Felix Riesterer
    1. 1
      molily
      1. 0
        Felix Riesterer
        1. 0
          Struppi
          1. 0
            Felix Riesterer
            1. 0
              bosselmann
              1. 0
                Felix Riesterer
                1. 0

                  Falscher Thread-Zweig...:-/

                  Felix Riesterer
                  1. 0

                    Verständnisfragen

                    bosselmann
                    1. 0
                      Felix Riesterer
                      1. 0
                        bosselmann
                        1. 0
                          Felix Riesterer
                          1. 0
                            bosselmann
                            1. 0
                              Felix Riesterer
                              1. 0

                                Skriptergänzung

                                bosselmann
                                1. 0
                                  Felix Riesterer
                                  1. 0

                                    Skriptergänzung (finale Version)

                                    bosselmann
                                    1. 0
                                      Felix Riesterer
  6. 0
    Felix Riesterer
    1. 0
      Beat
      1. 0

        Review-Version des Lehrgangs

        Felix Riesterer
        1. 0
          Beat
          1. 0
            Felix Riesterer
        2. 0
          Struppi
          1. 0
            Felix Riesterer
            1. 0
              Struppi
              1. 0
                Felix Riesterer