jQuery Mobile Tweet

jqmtweet.jade

!!! 5
html
  head
    title jqm Tweet
    link(rel="stylesheet", href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css")
    script(src="http://code.jquery.com/jquery-1.7.1.min.js")
    script(src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    meta(charset="UTF-8") 
    style
      .ui-li .ui-btn-text a.ui-link-inherit {
       white-space: normal;
       padding-left: 60px;
      }
      .ui-li-thumb {
       margin-top: 10px;
       margin-left: 10px;
      }
  body
    section#pageTweetList(data-role="page")
      header(data-role="header", data-position="fixed")
        h1 jqmTweet
        a.ui-btn-right(href="#pageSettings", data-transition="flip", data-role="button", data-icon="gear", data-iconpos="notext") 設定
      .content(data-role="content")
        ul(data-role="listview")
      footer(data-role="footer")
        h1 kzfm 
          i jQuery Mobile
    section#pageSettings(data-role="page")
      header(data-role="header")
        h1 jqmTweet
      .content(data-role="content")
        h3 設定
        div(data-role="field-contain")
          label(for="username") Twitterユーザー名:
          input#username(type="text", value="")
        div(data-role="field-contain")
          label(for="slider") 表示させるツイート数:
          input#slider(type="range", name="slider", min="5", max="50", value="")
      footer(data-role="footer")
        h1 kzfm 
          i jQuery Mobile
    section#pageTweetDetail(data-role="page")
      header(data-role="header")
        h1 jqmTweet
      .content(data-role="content")
        .containar-tweet
      footer(data-role="footer")
        h1 kzfm 
          i jQuery Mobile
    a#show-error-page(href="#pageError", data-role="button", data-rel="dialog", data-transition="pop", css="display: none") エラーページを表示する
    section#pageError(data-role="page", data-theme="e")
      header(data-role="header")
        h1 jqmTweet
      .content(data-role="content")
      footer(data-role="footer")
        h1 kzfm 
          i jQuery Mobile
    script
      (function($) {
        var methods = {
          initMainPage : function () {
            var $page = $("#pageTweetList");
            $page.data("rpp", 20);
            $page.data("twitterUser", "kzfm");
            $page.data("boolUpdate",false);
            updateTwitterFeed();
            
            $page.bind("pageshow", function (event, ui) {
              if ($page.data("boolUpdate")) {
                updateTwitterFeed();
                $page.data("boolUpdate", false);
              }
            });
          },
          initDetailPage : function () {
            var $page = $("#pageTweetDetail");
            $page.bind("pageshow", function(event, ui) {
              var objTweet = JSON.parse($page.data("tweetJSON"));
              console.log(objTweet);
              var strHtml = '<p><img src="' + objTweet.profile_image_url + '">';
              strHtml += objTweet.text + '</p>';
              $page.find(".containar-tweet").html(strHtml);
            });
          },
          initSettingsPage : function () {
            var $page = $("#pageSettings");
            var $datapage = $("#pageTweetList");
            $page.find("#username").change(function() {
              var newVal = $(this).val();
              $datapage.data("twitterUser", newVal);
              $datapage.data("boolUpdate", true);
            });
            
            $page.bind("pagebeforhide", function(event, ui) {
              var sliderValue = $page.find("#slider").val();
              if (parseInt(sliderValue, 10) != parseInt($datapage.data("rpp"), 10)) {
                $datapage.data("rpp", sliderValue);
                $datapage.data("boolUpdate", true);
              }
            });
            
            $page.bind("pageshow", function(event, ui) {
              $page.find("#slider").val($datapage.data("rpp")).slider("refresh");
              $page.find("#username").val($datapage.data("twitterUser"));
            });
          },
          initAll : function() {
            $().initApp("initMainPage");
            $().initApp("initDetailPage");
            $().initApp("initSettingsPage");
          }
        };

        $.fn.initApp = function(method) {
          if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call(arguments, 1));
          } else if (typeof method == 'object' || !method ) {
            return methods.initAll.apply(this, arguments);
          } else {
            $.error('メソッド' + method + 'は存在しません');
          };
        };
      })(jQuery);

      $(document).ready(function() {
        $().initApp();
      })

      var updateTwitterFeed = function() {
        $.mobile.showPageLoadingMsg();
        var $page = $("#pageTweetList");
        var strUrl = "http://search.twitter.com/search.json?callback=?&rpp=";
        strUrl += $page.data("rpp");
        strUrl += "&q=from:" + $page.data("twitterUser");
        $.ajax({
          url: strUrl,
          dataType: 'json',
          success: function(data) {
            $page.find(".content").empty();
            if (data.results.length == 0) {
              var strHtml = "<h3>ツイートがありません</h3>";
              strHtml += "<p>ユーザー " + $page.data("twitterUser");
              strHtml += "のツイートは存在しません";
              $("#pageError .content").html(strHtml);
              $("#show-error-page").click();
              $page.find(".content").html("<h3>ツイートがありません</h3>");
              $.mobile.hidePageLoadingMsg();
              return;
            }
            $page.find(".content").html("<ul></ul>");
            $list = $page.find(".content ul");
            for (var i = 0; i<data.results.length; i++) {
              var strHtml = '<li><a href="#pageTweetDetail">';
              strHtml += '<img src="' + data.results[i].profile_image_url + '">';
              strHtml += data.results[i].text;
              strHtml += '</a></li>\\n';
              var tweet = $(strHtml);
              $list.append(tweet);
              $list.find("a:last").data("tweetJSON", JSON.stringify(data.results[i]));
            }
            $list.listview();
            $.mobile.hidePageLoadingMsg();
            $list.find("a").click(function() {
              var $this = $(this);
              $("#pageTweetDetail").data("tweetJSON", $this.data("tweetJSON"));
            });
          },
          error: function() {
            var $page = $("#pageError .content");
            var strHtml = "<h3>更新にしっぱいしました</h3>";
            strHtml += "<p>Twitterフィードを更新できませんでした。リトライしてください</p>";
            $page.html(strHtml);
            $("#show-error-page").click();
            $.mobile.hidePageLoadingMsg();
          }
        });
      };