Public pracitice source

/***/
// Prevent executing on Agile Developers
if(!/mode=edit/.test(window.top.location.search))
  main();

function main() {

  // モジュールがロードされると、まず exports 関数が実行されます。
  exports = function() {

    // $S.drawIn() 関数で body 全体に book の標準デザインを適用します。
    $S.drawIn();

    // ここでの "this" は モジュールそのもの（インスタンス）です。
    // モジュールの setup イベントに対して、 IFSetup 関数をバインドします。
    this.setup(IFSetup);

  };

  function IFSetup() {

    // データベースの "test" コレクションと 紐付いた BOOK を生成します。
    var book = window.book = new $S.BOOK('test');
    var bnam = book.name();

    // >> assign a form (have item "list" type=[dynamic-list]) >>
    // wrapper_name is set as "test"
    book.setup('#FORM', {
      setup: {
        list: $('#TEMPLATE')
      }
    });

    var dynamicList = book.elem('test', 'list').elem;

    // >> assign a form (have item "list" type=[html]) >>
    // wrapper_name is set as "test1"
    book.setup('#LABEL');

    var label = book.elem('test1', 'list').elem;

    // >> get current data list >>
    // book の中に image を入れてやっているので
    // 項目を指定して取得してやることで、レスポンスに配慮します。
    var img_dfds, ls_clear, ls_save;
    book.talk('find', [{}, {
      "photo.src": 0
    }], function(err, res) {

      if(err)
        return alert('データ取得に失敗しました。');

      // put datas to list
      book.value(bnam, 'list', convertForList(res));

      // image data gets on stream.
      // TODO support by book.stream()
      img_dfds = [], ls_clear = false, ls_save = {};
      res.forEach(putImage), $.when.apply($, img_dfds).done(function() {
        ls_clear && LS.clear(), $.each(ls_save, function(k, v) {
          LS.setItem(k, v);
        });
      });

      // add event photo open
      // * Modal Window 表示モジュールです。
      var SHOWING = false;
      book.elem(bnam, 'list').elem.$wrap.on('click', '.s-row', function() {

        if(SHOWING)
          return;
        $('body').css('overflow', 'hidden');
        SHOWING = true;

        var $this = $(this), $photo = $this.find('.photo'), img = new Image();
        img.onload = function() {
          var img_w = Math.min($(window).width() - 60, img.width);
          var img_h = Math.min($(window).height() - 60, img.height);
          var rw = img_w / img.width, rh = img_h / img.height;
          var r = Math.min(rw, rh);
          img_w = img.width * r, img_h = img.height * r;

          var $img = $(img).css({
            position: 'absolute',
            left: ($(window).width() - img_w) / 2,
            top: window.scrollY + ($(window).height() - img_h) / 2,
            width: img_w,
            height: img_h,
            background: '#fff',
            borderRadius: 16,
            zIndex: 10,
            opacity: 0
          }).appendTo('body').animate({
            opacity: 1
          });

          var $overlay = $('
').css({
            position: 'absolute',
            left: 0,
            top: 0,
            background: '#000',
            opacity: 0,
            zIndex: 9,
            width: $(window).width(),
            height: $(document).height(),
            cursor: 'pointer'
          }).appendTo('body').click(function() {
            $img.remove()
            $(this).fadeOut(function() {
              $overlay.remove(), SHOWING = false;
              $('body').css('overflow', '');
            });
          }).animate({
            opacity: 0.8
          });

        };
        img.src = $photo.attr('src');
      }).on('contextmenu', '.s-row', function($e) {
        $e.preventDefault();

        var $this = $(this), $_id = $this.find('._id');
        if(~["sOvYZgbh", "0Eh0fzdb", "H7HZw9Om"].indexOf($_id.text()))
          return alert('このデータは削除できません。');

        confirm($_id.text() + 'を削除しますか？') && (function() {

          book.del($_id.text(), function(e, r) {
            dynamicList.dec($this);
            $('body').animate({
              scrollTop: 0
            });
            label.data($_id.text() + 'を削除しました。');
          });

        })();

      });

    });

    function putImage(d, i) {

      var src = [], skip = 0, _id = d._id;
      var dfd = null;
      dfd = Array.isArray(img_dfds) ? img_dfds[img_dfds.push($.Deferred()) - 1]
        : $.Deferred();

      var ls_key = _id + '' + d.stamp, ls_val = LS.getItem(ls_key);
      ls_val == null && (ls_clear = true);

      var $pbar = $('<progress min="0" value="0"/>');
      var $ptxt = $('<div><div class="size">'
        + '<span class="progress"></span><span>/</span><span class="max"></span>'
        + '</div>');
      var $wbar = $('
');

      var $img = dynamicList.$wrap.find('.s-row').eq(i).find('img');
      $img.parent().css('text-align', 'center');
      countPhotoGet();

      function countPhotoGet() {
        book.talk('aggregate', [[{
          $match: {
            _id: _id
          }
        }, {
          $project: {
            photo: "$photo.src"
          }
        }, {
          $unwind: "$photo"
        }, {
          $group: {
            _id: null,
            count: {
              $sum: 1
            }
          }
        }]], function(err, res) {
          (function(r) {
            $pbar.attr('max', r ? r.count: 1);
            $img.after($wbar.append($pbar, $ptxt));
            r && !ls_val ? (function() {
              $ptxt.find('.size').text('約 ' + (r.count * 8192) + ' byte');
              $ptxt.find('.max').text(r.count);
              streamPhotoGet(r.count);
            })(): simplePhotoGet(ls_val, $pbar.attr('max'));
          })(res[0]);
        });
      }

      function simplePhotoGet(raw, max) {

        raw == null ? book.talk('findOne', [{
          _id: _id
        }, {
          "photo.src": 1
        }], function(err, res) {
          err ? simplePhotoGet(): simpleRender(res.photo.src);
        }): simpleRender(raw);

        function simpleRender(img_src) {
          $pbar.attr('value', max || 1), render(img_src);
          ls_save && (ls_save[ls_key] = img_src), dfd.resolve();
        }

      }

      function streamPhotoGet(max) {

        book.talk('aggregate', [[{
          $match: {
            _id: _id
          }
        }, {
          $project: {
            photo: "$photo.src"
          }
        }, {
          $unwind: "$photo"
        }, {
          $skip: skip
        }, {
          $limit: 8
        }] // ~= 64kb 
        ], function(err, res) {

          if(err || res == null) // error and retry.
            return setTimeout(function() {
              streamPhotoGet(max);
            }, 5000 * Math.random())

          res.length ? foonyah.nextTick(function() {
            skip += 8, skip = Math.min(skip, max);
            $pbar.attr('value', skip), $ptxt.find('.progress').text(skip);
            src.push(res.map(function(d) {
              return d.photo;
            }).join('')), streamPhotoGet(max);
          }): (function() {
            var img_src = src.join('');
            render(img_src);
            ls_save && (ls_save[ls_key] = img_src), dfd.resolve();
          })();

        });
      }

      function render(src) {
        $img.attr('src', src), $pbar.fadeOut(function() {
          $wbar.remove();
        });
      }

    }

    // >> on broadcast event >>
    // !!CHECK!! "password", "confirm" is not broadcasted
    book.on('broadcast', function(r, h) {
      debugger;
      console.log('book.broadcast.recieve', r, h);

      if($S.DB().isMyToken(h.token))
        return;

      if(Array.isArray(r)) { // remove will broadcasted as array

        var rms = r.map(function(v) {
          return v._id;
        });

        var idx = [];
        dynamicList.$elem.find('.s-data._id').each(function(i) {
          rms.indexOf($(this).text()) != -1 && idx.push(i);
        });

        dynamicList.dec(idx);
        label.data(rms.join(',') + 'が削除されました。');
        return;
      }

      var _id = r._id, email = r.email, n = book.name(), v = book.value(n,
        'list');
      r.lastupdate = stampToLastupdate(r.stamp);

      // dynamic-list will be increased or updated, and html will be updated.
      var r_idx = v.email.indexOf(email), r_len = v.email.length;
      (r_idx != -1 ? function() {

        // once remove image data.
        var rem_d = {};
        rem_d['photo[' + r_idx + ']'] = '';
        book.elem(n, 'list').elem.data(rem_d);

        $.each(book.elem(null, 'list'), function(k, item) {
          item.name == n ? item.elem.update(r_idx, r) && putImage(r, r_idx)
            : item.elem.data('更新：' + r.email + ' (最終更新:' + r.stamp + ')');
        });
        console.log('(recieve-side)' + n + ' の _id ' + _id + ' が更新されました。');

      }: function() {
        $.each(book.elem(null, 'list'), function(k, item) {
          item.name == n ? item.elem.inc(r)
            && putImage(r, item.elem.count() - 1): item.elem.data('追加：'
            + r.email + ' (最終更新:' + r.stamp + ')');
        });
        console.log('(recieve-side)' + n + ' の _id ' + _id + ' が追加されました。');
        $('body').animate({
          scrollTop: $(document).height()
        });

      })();
    });

    // >> utility >>
    function convertForList(arr) {
      var obj = {};
      arr.forEach(function(v, i) {
        $.each($.extend(true, {
          lastupdate: stampToLastupdate(v.stamp)
        }, v), function(k, v) {
          !Array.isArray(obj[k]) && (obj[k] = []);
          obj[k][i] = v;
        });
      });
      return obj;
    }

    function stampToLastupdate(stamp) {
      return new Date(stamp).toGMTString();
    }
  }
}