load.js

/*
 * MT6 demo load.js
 */
(function($){
  // 後で直ぐに、かつ頻繁に使うノード（要素）を事前に取得しておく
  var $loadingImg = $("#loadingImg");
  var $resultMsg = $("#resultMsg");

  // 記事を全部表示し終わったかを示す変数の初期化。この変数がtrueになったらページを下までスクロールしても追加読み込みしない。
  var loadFinished = false;

  // 検索結果なしを示す変数の初期化
  // var noResult = false;

  <mt:SubCategories top="1" compress="3">
  <mt:If tag="CategoryColor">
  <mt:SetVarBlock name="category_colors" function="push">"<mt:CategoryLabel>@<mt:CategoryColor>"</mt:SetVarBlock>
  </mt:If>
  <mt:SetVarBlock name="category_links" function="push">"<mt:CategoryLabel>@<$mt:CategoryArchiveLink$>"</mt:SetVarBlock>
  </mt:SubCategories>

  // カスタムフィールドのカテゴリカラーとカテゴリーラベルを結びつけて変数にセットしておく
  var categoryColors = [
    <mt:Loop name="category_colors" compress="3">
    <$mt:Var name="__value__"$><mt:If name="__last__"><mt:Else>,</mt:If>
    </mt:Loop>
  ];

  // カテゴリアーカイブリンクとカテゴリーラベルを結びつけて変数にセットしておく
  var categoryLinks = [
    <mt:Loop name="category_links" compress="3">
    <$mt:Var name="__value__"$><mt:If name="__last__"><mt:Else>,</mt:If>
    </mt:Loop>
  ];

  // Data API オブジェクトの作成する。Data APIを利用する必須の事前準備。
  var api = new MT.DataAPI({
    baseUrl:  "<mt:Var name="website_url">mt/mt-data-api.cgi",
    clientId: "BfYMqpO2RzkZepaSh8G2"
  });

  // Data API に渡すパラメータをセット
  var params = {
    status: "Publish", // 公開記事のみ
    offset: 0, // 初期化しておく
    limit: <$mt:Var name="limit_count"$>, // configモジュールで設定
    fields: "id,title,permalink,customFields,categories,date,assets" // 返ってくるieldを限定しておく
  };

  // カテゴリ一覧のときは、カテゴリーを限定するパラメータが必要なので、Data APIに渡す変数に追加する
  // HTML上はinput:hiddenで書き出しておく
  if ($("input:hidden.params").length > 0) {
    $("input:hidden.params").each(function(){
      params[this.name] = this.value;
    });
  }

  // 検索結果ページの場合
  if ($("input[name='searchEnable']").val() === "true") {
    // URLに検索パラメータがある場合
    if (location.search) {
      // 検索オプションを開いておく
      $("#searchOption").show();
      // URLパラメータをデコードして&で分割して配列searchParamsにセット。?は削除。
      var searchParams = decodeURIComponent(location.search.replace(/^\?/, "")).split("&");
      // HTML上のページタイトルに表示させるものを入れる変数を初期化
      var pageTitleItem = {
        title: "",
        tag: "",
        category: ""
      };
      // 上のpageTitleItemの内容をgetApiEntries()に渡すための変数を初期化
      var pageTitle = [];
      // 配列searchParamsに入っているパラメータの数だけループ
      for (var i = 0, l = searchParams.length; i < l; i++) {
        // 配列searchParamsには search=hoge のように = ごと入っているので、=で分割
        // 分割した左（パラメータ名）が searchParam[0]、右（値）が searchParam[1] となる。
        var searchParam = searchParams[i].split("=");
        // 値が「未選択」の場合は次のループへスキップ
        if (searchParam[1] === "未選択") {
          continue;
        }
        // パラメータ名によって処理を分ける。それぞれページタイトルに入れる文言にしてpageTitleItemにセット
        switch (searchParam[0]) {
          // text（キーワード検索）の場合
          case "text":
            var _words = searchParam[1].replace("+", " ");
            params.search = _words;
            $("input[name='text']").val(_words);
            if (searchParam[1]) {
              pageTitleItem.title = "キーワード「" + _words + "」";
            }
            break;
          // カテゴリーの場合
          case "category":
            params.category = searchParam[1];
            $("#categoriesSearch input:radio").each(function(){
              if (this.value === searchParam[1]) {
                $(this).prop("checked", true);
              }
            });
            pageTitleItem.category = "カテゴリ「" + searchParam[1] + "」";
            break;
          // タグの場合
          case "tag":
            params.tag = searchParam[1];
            $("#tagsSearch input:radio").each(function(){
              if (this.value === searchParam[1]) {
                $(this).prop("checked", true);
              }
            });
            pageTitleItem.tag = "タグ「" + searchParam[1] + "」";
            break;
        }
      }
      // キーワード検索、カテゴリ絞り込み、タグ絞り込み、それぞれがある場合に上記でタイトル用の文言にした値をpageTitle配列にpush
      if (pageTitleItem.title) { pageTitle.push(pageTitleItem.title); }
      if (pageTitleItem.category) { pageTitle.push(pageTitleItem.category); }
      if (pageTitleItem.tag) { pageTitle.push(pageTitleItem.tag); }
      // pageTitle配列を「, 」で連結した文字列にして、siteID、パラメータとともにgetApiEntriesに渡す
      getApiEntries (1, params, pageTitle.join(", "));
    }
    else {
      // URLパラメータがセットされていない場合は下記文言を表示
      $resultMsg.text("検索条件を指定してください。").show();
    }
  }
  // ページ下までスクロールしたときにData APIで記事を取得
  var bottomLoad = ($("input[name='bottomLoad']").val() === "false") ? false : true;
  $(window).on("scroll", function() {
    var docHeight = $(document).height();
    var scrollPos = $(window).height() + $(window).scrollTop();
    // ページ下から50pxの範囲が表示されたら読み込み。loadFinishedがtrueの場合は読み込まない。
    if (bottomLoad && !loadFinished && (docHeight - scrollPos) < 50) {
      bottomLoad = false;
      params.offset = params.offset + params.limit;
      getApiEntries (1, params, "");
    }
  });

  // Functions
  function getApiEntries (siteId, params, pageTitle) {
    $loadingImg.show().appendTo("#entries");
    var msg = (pageTitle) ? pageTitle + "に該当するレシピが": "";
    api.listEntries(siteId, params, function(response) {
      if (response.error) {
        alert("データの取得に失敗しました。\nインターネットに接続されているかご確認ください。");
        return;
      }
      if (response.totalResults === 0) {
        if (pageTitle) {
          $resultMsg.text(msg + "見つかりませんでした。").show();
        }
      }
      else {
        if (response.items.length < params.limit) {
          loadFinished = true;
        }
        var entriesHtml = [];
        for (var i = 0, l = response.items.length; i < l; i++) {
          entriesHtml.push(setHTML(response.items[i]));
        }
        if (pageTitle) {
          $resultMsg.text(msg + " " + response.totalResults + " 件見つかりました。").show();
        }
        $("#entries").append(entriesHtml.join(""));
        bottomLoad = true;
      }
      $loadingImg.hide();
    });
  }

  function setHTML (entryData) {
    var assetThumbnailURL = "";
    if (entryData.customFields.length > 0) {
      for (var i = 0, l = entryData.customFields.length; i < l; i++) {
        if (entryData.customFields[i].basename === "imgthumbnail") {
          var _assetId = (entryData.customFields[i].value) ? entryData.customFields[i].value.replace(/<form mt:asset-id="(\d+)".+/g, "$1"): "";
          var y = (entryData.assets.length) ? entryData.assets.length : 0;
          for (var x = 0; x < y; x++) {
            if (entryData.assets[x].id == _assetId) {
              assetThumbnailURL = entryData.assets[x].thumbnailUrl.replace("thumb-220xauto", "thumb-220x220");
            }
          }
        }
      }
    }
    // var assetUrl = (assetThumbnailURL !== "") ? "<mt:Var name="website_url">assets_c/" + entryData.date.replace(/(\d{4})-(\d{2}).+/, "$1/$2/") + assetThumbnailURL : "";
    var partCategorycolor = "";
    for (var i = 0, l = categoryColors.length; i < l; i++) {
      var categoryColor = categoryColors[i].split("@");
      if (categoryColor[1] && categoryColor[0] === entryData.categories[0]) {
        partCategorycolor = " " + categoryColor[1];
      }
    }
    var partcategoryLink = "";
    for (var i = 0, l = categoryLinks.length; i < l; i++) {
      var categoryLink = categoryLinks[i].split("@");
      if (categoryLink[1] && categoryLink[0] === entryData.categories[0]) {
        partcategoryLink = " " + categoryLink[1];
      }
    }
    return [
      '<div class="list">',
        '<div class="thum">',
          '<a href="' + entryData.permalink + '">',
            '<img src="' + assetThumbnailURL + '" alt="">',
            '<div class="listDescription">',
              '<span class="listDescriptionTxt">' + entryData.title + '</span>',
            '</div>',
          '</a>',
        '</div>',
        '<p class="listCategory' + partCategorycolor + '"><a href="' + partcategoryLink + '">' + entryData.categories[0] + '</a></p>',
      '</div>'
    ].join("");
  }

})(jQuery);