snapshot
/
CartoonReader


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
							/*
 * Copyright (c) 2009 Nokia Corporation.
 */

/**
  * This is run after the the web page has been loaded (possibly before rendering).
  * $(document).ready documented here:
  * http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
  */
function launch() {
 $(document).ready(function() {
  try {
    console.debug("Init started.");
    var params = $.deparam.querystring();
    var db;
    if (window.openDatabase) {
        db = openDatabase("CartoonReader",
                          "1.0",
                          "CartoonReader example",
                          200000);
    }
    if (!db) {
      alert("Failed to open the database on disk.  This is probably because the version was bad or there is not enough space left in this domain's quota");
    }
    var iframeDocument = document.getElementById('cartoonContainerFrame').contentDocument;
    var content = '<html lang="en">'
      +'  <head>'
      +'    <title>CartoonReader</title>'
      +'    <link rel="stylesheet" href="../css/cartoon-view-iframe.css" type="text/css" />'
      +'  </head>'
      +'  <body>'
      +'    <article id="cartoonContainer">'
      +'      <div id="cartoonVisibleInfo">'
      +'        <h1 id="cartoonName"></h1>'
      +'        <h2 id="cartoonTitle"></h2>'
      +'        <p id="cartoonPublished"></p>'
      +'      <div class="full-stop-div"></div>'
      +'      </div>'
      +'      <img id="cartoonImage" src="../images/loading.gif" />'
      +'      <div id="cartoonInfo">'
      +'        <dl>'
      +'          <dt class="cartoonInfoHidden">Image title</dt>'
      +'          <dd id="cartoonTitleText"></dd>'
      +'          <dt class="cartoonInfoHidden">Image alt</dt>'
      +'          <dd id="cartoonAltText"></dd>'
      +'          <dt id="cartoonURLTitle">Cartoon <abbr title="Uniform Resource Locator">URL</abbr></dt>'
      +'          <dd id="cartoonURL"></dd>'
      +'        </dl>'
      +'        <button id="cartoonInfoOK">OK</button>'
      +'      </div>'
      +'    </article>'
      +'  </body>'
      +'</html>';

    iframeDocument.open();
    iframeDocument.write(content);
    iframeDocument.close();
    var backend = new CartoonManagerBackend(db);
    var cartoonContainer = $('#cartoonContainerFrame').contents().find("#cartoonContainer");
    var elements = {document: document,
                    navigation: $("nav"),
                    headerContainer: $("#headerContainer"),
                    cartoonName: cartoonContainer.end().find("#cartoonName"),
                    cartoonTitle: cartoonContainer.end().find("#cartoonTitle"),
                    cartoonImage: cartoonContainer.end().find("#cartoonImage"),
                    cartoonInfo: cartoonContainer.end().find("#cartoonInfo"),
                    cartoonTitleText: cartoonContainer.end().find("#cartoonTitleText"),
                    cartoonAltText: cartoonContainer.end().find("#cartoonAltText"),
                    cartoonPublished: cartoonContainer.end().find("#cartoonPublished"),
                    cartoonURL: cartoonContainer.end().find("#cartoonURL"),
                    images: $("img").add("#cartoonImage",cartoonContainer),
                    body: $("body"),
                    navLiButtons: $("nav li button"),
                    cartoonReader: $("#cartoonReader")};
    var params =  $.deparam.querystring();
    if(window.appWindow) {
      window.close = appWindow.close;
      window.minimize = appWindow.minimize;
    }
    var platform = "";
    if(window.platformResolver) {
      platform = window.platformResolver.platform();
    }
    var helpers = { jQueryEventProxy: new jQueryEventProxy(console),
                    dndHelper: new DnDHelper(),
                    cartoonDataFetcher: new CartoonDataFetcher(new FeedUpdateBroker(),
                                                               new CartoonParser())
                  };
    helpers.maemoHelper = new MaemoHelper(window,
                                          helpers.jQueryEventProxy,
                                          helpers.dndHelper);
    window.SingleCartoon = new SingleCartoon(elements,
                                             helpers,
                                             backend,
                                             window,
                                             params,
                                             platform);
    console.debug("Init finished.");
  }
  catch(e) {
    console.error(e);
    alert(e);
  }
 });
}

function SingleCartoon(elements,
                       helpers,
                       backend,
                       appWindow,
                       params,
                       platform) {
  this.C_MANAGE_URL = "qrc:/html/manage-cartoons-view.html";
  this.PLATFORM = platform;

  this.m_backend = backend;
  this.m_window = appWindow;
  this.m_elements = elements;
  this.m_helpers = helpers;
  this.m_params = params;

  this.m_view = new SingleCartoon.View(elements);
  var adapter = new CartoonSourceResultAdapter(this.cartoonSourceCallback());
  this.m_backend.registerGetCartoonSourceAdapter(adapter);

  var subscribers = [];
  subscribers.push(this.m_view);
  this.m_model = new SingleCartoon.Model(subscribers);
  this.setup(helpers,
             elements,
             platform);
  this.m_backend.getActiveCartoonSource();
}

SingleCartoon.prototype = {
  setup: function(helpers,
                  elements,
                  platform) {
    this.bindNextButton(helpers.jQueryEventProxy,
                        elements.navigation.find("#nextButton"));
    this.bindNewestButton(helpers.jQueryEventProxy,
                          elements.navigation.find("#newestButton"));
    this.bindPreviousButton(helpers.jQueryEventProxy,
                            elements.navigation.find("#previousButton"));
    this.bindInfoToggleButton(helpers.jQueryEventProxy,
                              elements.navigation.find("#infoToggleButton"));
    this.bindInfoToggleButton(helpers.jQueryEventProxy,
                              elements.cartoonInfo.find("#cartoonInfoOK"));
    this.bindManageButton(helpers.jQueryEventProxy,
                          elements.navigation.find("#manageButton"));
    this.bindExitButton(helpers.jQueryEventProxy,
                         elements.navigation.find("#exitButton"));
    helpers.dndHelper.disableDragging(elements.images);
    helpers.dndHelper.disableDragging(elements.body);
    if(platform === "MAEMO") {
      helpers.maemoHelper.createTaskSwitcher(elements.headerContainer);
      helpers.maemoHelper.setFontSizeTo(elements.body, "1.25em");
    }
  },
  cartoonSourceCallback: function() {
    var callbackObject = { that: this,
                           callback: this.receiveCartoonSource,
                           errorCallback: this.receiveError};
    return callbackObject;
  },
  cartoonCallback: function() {
    var callbackObject = {cartoonReceiver: { that: this,
                                             callback: this.receiveCartoons},
                          errorReceiver: { that: this,
                                           callback: this.receiveError}
                         };
    return callbackObject;
  },
  receiveError: function(url, error) {
    alert(error);
    this.m_view.setCartoonImageURL("qrc:/images/error-icon.png");
  },
  receiveCartoonSource: function(sources) {
    var source = sources[0];
    this.m_helpers.cartoonDataFetcher.getDataFromURL(source.getUrl(),
                                                     this.cartoonCallback());
  },
  receiveCartoons: function(cartoons) {
    this.m_model.setCartoons(cartoons);
    this.m_model.setActiveCartoonIndex(0);
    this.toggleNextPreviousVisiblity();
  },
  bindNextButton: function(jQueryEventProxy,
                           nextButton) {
    var handler = { that: this,
                    handler: this.nextButtonClicked};
    jQueryEventProxy.bind(nextButton,
                          "click",
                          handler);
  },
  bindNewestButton: function(jQueryEventProxy,
                             newestButton) {
    var handler = { that: this,
                    handler: this.newestButtonClicked};
    jQueryEventProxy.bind(newestButton,
                          "click",
                          handler);
  },
  bindPreviousButton: function(jQueryEventProxy,
                               previousButton) {
    var handler = { that: this,
                    handler: this.previousButtonClicked};
    jQueryEventProxy.bind(previousButton,
                          "click",
                          handler);
  },
  bindInfoToggleButton: function(jQueryEventProxy,
                                 infoToggleButton) {
    var handler = { that: this,
                    handler: this.infoToggleButtonClicked};
    jQueryEventProxy.bind(infoToggleButton,
                          "click",
                          handler);
  },
  bindManageButton: function(jQueryEventProxy,
                             manageButton) {
    var handler = { that: this,
                    handler: this.manageButtonClicked};
    jQueryEventProxy.bind(manageButton,
                          "click",
                          handler);
  },
  bindExitButton: function(jQueryEventProxy,
                           exitButton) {
    var handler = { that: this,
                    handler: this.exitButtonClicked};
    jQueryEventProxy.bind(exitButton,
                          "click",
                          handler);
  },
  manageButtonClicked: function(target, event) {
    var window = this.m_window;
    var url = this.C_MANAGE_URL;
    if(this.PLATFORM !== "MAEMO" &&
       this.PLATFORM !== "SYMBIAN") {
      this.m_view.fadeOut("slow",
                          function() { window.location = url; });
    }
    else {
      window.location = url;
    }
  },
  nextButtonClicked: function(target, event) {
    if(this.isAvailable({ next: true})) {
      var that = this;
      var model = this.m_model;
      var view = this.m_view;
      this.m_view.hideCartoon(true, function() {
                                      model.setActiveCartoonIndex(model.getActiveCartoonIndex()-1);
                                      that.toggleNextPreviousVisiblity();
                                      view.hideCartoon(false);
                                    });
    }
  },
  newestButtonClicked: function(target, event) {
    this.toggleNextPreviousVisiblity();
    if(this.isAvailable({ newest: true})) {
      var that = this;
      var model = this.m_model;
      var view = this.m_view;
      this.m_view.hideCartoon(true, function() {
                                      model.setActiveCartoonIndex(0);
                                      that.toggleNextPreviousVisiblity();
                                      view.hideCartoon(false);
                                    });
    }
  },
  previousButtonClicked: function(target, event) {
    this.toggleNextPreviousVisiblity();
    if(this.isAvailable({ previous: true})) {
      var that = this;
      var model = this.m_model;
      var view = this.m_view;
      this.m_view.hideCartoon(true, function() {
                                      model.setActiveCartoonIndex(model.getActiveCartoonIndex()+1);
                                      that.toggleNextPreviousVisiblity();
                                      view.hideCartoon(false);
                                    });
    }
  },
  infoToggleButtonClicked: function(target, event) {
    if(this.m_view.infoOn()) {
      this.m_view.toggleInfo(false);
    }
    else {
      this.m_view.toggleInfo(true);
    }
  },
  exitButtonClicked: function(target, event) {
    this.m_window.close();
  },
  toggleNextPreviousVisiblity: function() {
    this.m_view.hidePreviousButton(!this.isAvailable({ previous: true}), 'slow');
    this.m_view.hideNextButton(!this.isAvailable({ next: true}), 'slow');
  },
  isAvailable: function(wantedAction) {
    var returnValue = false;
    var activeCartoonIndex = this.m_model.getActiveCartoonIndex();
    var cartoonsAvailable = this.m_model.getCartoonsAvailable();
    if(wantedAction.next &&
       activeCartoonIndex-1 >= 0) {
      returnValue = true;
    }
    if(wantedAction.previous &&
       activeCartoonIndex+1 < cartoonsAvailable) {
      returnValue = true;
    }
    if(wantedAction.newest &&
       activeCartoonIndex > 0) {
      returnValue = true;
    }
    return returnValue;
  }
};

SingleCartoon.Model = function(subscribers) {
  this.m_subscribers = subscribers;
  this.m_cartoons = undefined;
  this.m_activeCartoonIndex = 0;
};

SingleCartoon.Model.prototype = {
  getCartoons: function(id) {
    return this.m_cartoons;
  },
  setCartoons: function(cartoons) {
    this.m_cartoons = cartoons;
    this.informSubscribers({ cartoons: this.m_cartoons });
  },
  getCartoonsAvailable: function() {
    var cartoonsAvailable = 0;
    if(this.m_cartoons) {
      cartoonsAvailable = this.m_cartoons.cartoons.length;
    }
    return cartoonsAvailable;
  },
  getActiveCartoonIndex: function() {
    return this.m_activeCartoonIndex;
  },
  setActiveCartoonIndex: function(activeCartoonIndex) {
    this.m_activeCartoonIndex = activeCartoonIndex;
    this.informSubscribers({ activeCartoonIndex: this.m_activeCartoonIndex,
                             activeCartoonItem: this.m_cartoons.cartoons[this.m_activeCartoonIndex]});
  },
  informSubscribers: function(changes) {
    for (var i=0; i<this.m_subscribers.length; i++) {
      this.m_subscribers[i].receiveChangedValue(changes);
    }
  }
};

SingleCartoon.View = function(elements) {
  this.m_elements = elements;
  this.m_end = 0;
  this.setup(elements);
  this.m_activeCartoonItem = undefined;
};

SingleCartoon.View.prototype = {
  setup: function(elements) {
    //this.fadeIn("slow");
  },
  fadeIn: function(speed, callback) {
    this.m_elements.body.fadeIn(speed, callback);
  },
  fadeOut: function(speed, callback) {
    this.m_elements.body.fadeOut(speed, callback);
  },
  hideCartoon: function(hide,
                        callback) {
    if(!this.cartoonHidden()) {
      this.m_elements.cartoonImage.fadeOut('slow', callback);
    }
    else {
      this.m_elements.cartoonImage.fadeIn('slow', callback);
    }
  },
  cartoonHidden: function() {
    return (this.m_elements.cartoonImage.css("display") === 'none');
  },
  hideNextButton: function(hide ,speed, callback) {
    var nextButton = this.m_elements.navigation.find("#nextButton");
    if(hide) {
      nextButton.hide(speed, callback);
    }
    else {
      nextButton.show(speed, callback);
    }
  },
  nextButtonHidden: function() {
    var nextButton = this.m_elements.navigation.find("#nextButton");
    return (nextButton.attr("display") === 'none');
  },
  hidePreviousButton: function(hide, speed, callback) {
    var previousButton = this.m_elements.navigation.find("#previousButton");
    if(hide) {
      previousButton.hide(speed, callback);
    }
    else {
      previousButton.show(speed, callback);
    }
  },
  previousButtonHidden: function() {
    var previousButton = this.m_elements.navigation.find("#previousButton");
    return (previousButton.attr("display") === 'none');
  },
  updateCartoon: function(cartoons) {
    this.setCartoonName(cartoons.title);
    this.m_end = cartoons.cartoons.length;
  },
  updateActiveCartoonItem: function(activeCartoonItem) {
    this.m_activeCartoonItem = activeCartoonItem;
    this.setCartoonTitle(activeCartoonItem.title);
    this.setCartoonTitleText(activeCartoonItem.titleText);
    this.setCartoonAltText(activeCartoonItem.altText);
    this.setCartoonPublished(activeCartoonItem.date);
    this.setCartoonURL(activeCartoonItem.URL);
    this.setCartoonImageURL(activeCartoonItem.imageURL);
  },
  updateNavigation: function(navigation,
                             itemsAvailable,
                             activeCartoonIndex) {
    this.updatePreviousButton(navigation.find("#previousButton"),
                              itemsAvailable,
                              activeCartoonIndex);
    this.updateNextButton(navigation.find("#nextButton"),
                          itemsAvailable,
                          activeCartoonIndex);
    this.updateNewestButton(navigation.find("#newestButton"),
                            itemsAvailable,
                            activeCartoonIndex);
  },
  updatePreviousButton: function(previousButton,
                                 itemsAvailable,
                                 activeCartoonIndex) {
  },
  updateNextButton: function(nextButton,
                             itemsAvailable,
                             activeCartoonIndex) {
  },
  updateNewestButton: function(newestButton,
                               itemsAvailable,
                               activeCartoonIndex) {
  },
  setCartoonName: function(name) {
    this.m_elements.cartoonName.text(name);
  },
  setCartoonTitle: function(title) {
    this.m_elements.cartoonTitle.text(title);
  },
  setCartoonTitleText: function(titleText) {
    this.m_elements.cartoonTitleText.text(titleText);
    this.m_elements.cartoonImage.attr("title", titleText);
  },
  setCartoonAltText: function(alt) {
    this.m_elements.cartoonAltText.text(alt);
    this.m_elements.cartoonImage.attr("alt", alt);
  },
  setCartoonPublished: function(date) {
    this.m_elements.cartoonPublished.text(date.toDateString());
  },
  setCartoonURL: function(url) {
    this.m_elements.cartoonURL.empty();
    this.m_elements.cartoonURL.append("<a href=\"" + url + "\">" + url + "</a>");
  },
  setCartoonImageURL: function(url) {
    this.m_elements.cartoonImage.attr("src", url);
  },
  infoOn: function() {
    return (this.m_elements.cartoonInfo.css('display') !== 'none');
  },
  toggleInfo: function(infoOn) {
    if(infoOn) {
      this.m_elements.cartoonInfo.fadeIn('slow');
    }
    else {
      this.m_elements.cartoonInfo.fadeOut('slow');
    }
  },
  receiveChangedValue: function(changes) {
    if(changes.cartoons) {
      this.updateCartoon(changes.cartoons);
    }
    if(changes.activeCartoonIndex !=  undefined &&
       changes.activeCartoonItem) {
      this.updateNavigation(this.m_elements.navigation,
                            this.m_end,
                            changes.activeCartoonIndex);
      this.updateActiveCartoonItem(changes.activeCartoonItem);
    }
  }
};

launch();