付箋紙もどき 空の付箋紙削除

付箋紙もどきに、 空の付箋紙を削除する機能をつけました。

  $('#erase').on('click', cards_gc);

削除にあたって、 付箋紙オブジェクトの識別番号と zorder のそれぞれの順番を保ちつつ、 途中に空きができないように番号を詰めることにします。

  var cards_gc = function() {
    var ncards = zorder.length;
    cards_compute_zorder(ncards);
    cards_copy_nonblank(ncards);
    cards_update_zorder();
  };

まず、 zorder 配列内での順番を壊さないように途中を抜いて詰めたとした後の位置をあらかじめ付箋紙オブジェクトに記録します。

  var cards_compute_zorder = function(ncards) {
    var i, j;
    for (i = 0, j = 0; i < ncards; ++i) {
      if (cards[zorder[i]].value.length > 0) {
        cards[zorder[i]].zorder = j;
        ++j;
      }
    }
  };

続いて、 記入してある付箋紙オブジェクトに新しい識別番号を割り付けると同時に、 空の付箋紙オブジェクトに対応している div 要素を削除します。 識別番号を変更するときは、 div 要素の id 属性の変更も必要ですので、 同時にやっておきます。

  var cards_copy_nonblank = function(ncards) {
    var i, j, id, jd;
    var cardsnew = {};
    for (i = 0, j = 0; i < ncards; ++i) {
      id = '#bx' + (i + 1).toString();
      if (cards[id].value.length == 0) {
        $(id).remove ();
      }
      else {
        jd = '#bx' + (j + 1).toString();
        cardsnew[jd] = cards[id];
        if (id !== jd)
          $(id).attr('id', jd.substr(1));  // バグ修正
        ++j;
      }
    }
    cards = cardsnew;
  };

最後に、 書き込みがある付箋紙オブジェクトに記録しておいた zorder 配列内の位置から zorder 配列を作り直します。

  var cards_update_zorder = function() {
    zorder = [];
    for (var k in cards)
      zorder[cards[k].zorder] = k;
    zorder.forEach(function (bxid, i, a) {
      $(bxid).css('z-index', (100 + i).toString());
    });
  };