orbit-basic/app/assets/javascripts/lib/items/items.js.erb

// Items Quantity
function itemsQuantity() {
  var $sortable = $('.sortable'),
      $host = $sortable.children('.navbar').eq(0),
      $navbar = $('.sortable li').children('.navbar'),
      $quantity = $sortable.find('li').length; 
  $host.find('.badge').text($quantity);
  $navbar.each(function(i) {
    if($navbar.eq(i).next('ol').length>0) {
      var $amount = $navbar.eq(i).next('ol').find('li').length;
      $navbar.eq(i).find('.badge').text($amount);
    }else{
      $navbar.eq(i).find('.badge').text('0');
    }
    $navbar.eq(i).find('.badge').text()>0 ? $navbar.eq(i).find('.badge').addClass('badge-info'):$navbar.eq(i).find('.badge').removeClass('badge-info');
  })
}
function tip() {
  if(!$.support.touch) {
    $('.tip').tooltip({
      position: {
        my: "center bottom-4",
        at: "center top",
      }
    });
  };
}
function touchSupport() {
  if($.support.touch) {
    $('.item-menu').css({
        'display': 'inline-block'
    })
  }
}
function customOpenSlide() {
  var $openSlide = $('.open-slide'),
      $pageslideW;

  $(window).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954;
  $(window).resize(function() {
      $(this).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954;
  });
  $noiFrame = $openSlide.not('.view-page');
  $iFrame = $openSlide.filter('.view-page.open-slide');

  $noiFrame.pageslide({
    W: 314,
    openFn: function(pageslide, element) {
      element.addClass('active')
             .closest('.item-menu')
             .css('display', 'inline-block')
             .closest('.navbar-inner')
             .addClass('active');
    },
    closeFn: function(pageslide, element) {
      element.removeClass('active')
             .closest('.navbar-inner')
             .removeClass('active');
    },
    loadComplete: function(pageslide, element) {
      $openSlide.removeClass('active');
      $('.navbar-inner').removeClass('active');
      element.addClass('active').closest('.navbar-inner').addClass('active');
      var _id = element.data('id'),
          _type = element.hasClass('page') ? 'page' : 'link',
          _edit = element.hasClass('edit') ? true : false;

      if(_id !== 'new') {
        $('#pageslide form').attr({
          'action': $('#pageslide form').attr('action') + '/' + _id,
          'id': 'edit_' + _type + '_' + _id
        });
      };
      _type == 'page' ? pageSetting(element.data('id'), _edit) : '';
    }
  });
  $iFrame.pageslide({
    W: $pageslideW,
    iframe: true,
    openFn: function(pageslide, element) {
      element.addClass('active')
             .closest('.item-menu')
             .css('display', 'inline-block')
             .closest('.navbar-inner')
             .addClass('active');
    },
    closeFn: function(pageslide, element) {
      element.removeClass('active')
             .closest('.navbar-inner')
             .removeClass('active');
      $('#main-wrap').css('width', 'auto')
    },
    loadComplete: function(pageslide, element) {
      $openSlide.removeClass('active');
      $('.navbar-inner').removeClass('active');
      element.addClass('active').closest('.navbar-inner').addClass('active');
      pageslide.find('.content').css('padding', 0);
    }
  });
}

function pageSetting(id, edit) {
  $pageModule = $('#page_module_app_id'),
  $pageF2E = $('#page_app_frontend_url'),
  $pageDesign = $('#page_design'),
  $pageTheme = $('#page_theme_id'),
  $pageCategory = $('#page-category'),
  $pageTags = $('#page-tags');
  if(edit) {
    $.ajax({
      url: 'page-setting.json',
      type: 'POST',
      contentType: "application/json; charset=utf-8",
      dataType: 'json',
      data: '{"id": ' + id + '}',
      cache: false,
    })
    .done(function(data) {
      _selectData = data;
      $.each(_pageData.design, function(index, val) {
        $pageDesign.append('<option value="' + val.main[1] + '" ' + (val.main[1] == _selectData.design.main ? 'selected="selected"' : '') + '>' + val.main[0] + '</option>');
        if(val.main[1] == _selectData.design.main) {
          $.each(val.sub, function(index, val) {
            $pageTheme.append('<option value="' + $(this)[1] + '" ' + ($(this)[1] == _selectData.design.sub ? 'selected="selected"' : '') + '>' + $(this)[0]+ '</option>')
          });
        };
      });
      $.each(_pageData.module, function(index, val) {
        $pageModule.append('<option value="' + val.main[1] + '" ' + (val.main[1] == _selectData.module.main ? 'selected="selected"' : '') + '>' + val.main[0] + '</option>');
        if(val.main[1] == _selectData.module.main) {
          $.each(val.sub, function(index, val) {
            $pageF2E.append('<option value="' + $(this)[1] + '" ' + ($(this)[1] == _selectData.module.sub ? 'selected="selected"' : '') + '>' + $(this)[0]+ '</option>')
          });
          $.each(val.category, function(index, val) {
            var _arr = $.inArray($(this)[1], _selectData.module.category[1]);
            $pageCategory.append('<label class="checkbox"><input type="checkbox" name="page[category][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
            if(!_selectData.module.category[0] && _arr !== -1) {
              $pageCategory.find('input[type="checkbox"]').eq(index).prop('checked', true);
            }
            _selectData.module.category[0] ? $pageCategory.siblings('.checkbox').children('.select_all').prop('checked', true) : '';
          });
          $.each(val.tags, function(index, val) {
            var _arr = $.inArray($(this)[1], _selectData.module.tags[1]);
            $pageTags.append('<label class="checkbox"><input type="checkbox" name="page[tag][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
            if(!_selectData.module.tags[0] && _arr !== -1) {
              $pageTags.find('input[type="checkbox"]').eq(index).prop('checked', true);
            }
            _selectData.module.tags[0] ? $pageTags.siblings('.checkbox').children('.select_all').prop('checked', true) : '';
          });
        };
      });
      changeSetting(true);
    })
    .fail(function(jqXHR, textStatus) {
      console.log(jqXHR.status, textStatus)
      var $errorMsg = '<div class="error"><div class="msg"><i class="icons-warning"></i><p>Sorry! Something is wrong</p></div></div>'
      $('#pageslide .view-page').append($errorMsg);
    });
  } else {
    $.each(_pageData.design, function(index, val) {
      $pageDesign.append('<option value="' + val.main[1] + '">' + val.main[0] + '</option>');
      if(index == 0) {
        $.each(val.sub, function(index, val) {
          $pageTheme.append('<option value="' + $(this)[1] + '">' + $(this)[0]+ '</option>')
        });
      };
    });
    $.each(_pageData.module, function(index, val) {
      $pageModule.append('<option value="' + val.main[1] + '">' + val.main[0] + '</option>');
      if(index == 0) {
        $.each(val.sub, function(index, val) {
          $pageF2E.append('<option value="' + $(this)[1] + '">' + $(this)[0]+ '</option>')
        });
        $.each(val.category, function(index, val) {
          $pageCategory.append('<label class="checkbox"><input type="checkbox" name="page[category][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
        });
        $.each(val.tags, function(index, val) {
          $pageTags.append('<label class="checkbox"><input type="checkbox" name="page[tag][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
        });
      };
    });
    changeSetting(false);
  };
};

function changeSetting(boolean) {
  $('#pageslide').on('change', '.change', function(event) {
    var _data, _select, _subData, $subSelete;

    if(event.target.id == 'page_design') {
      _data = _pageData.design;
      _select = boolean ? _selectData.design : null;
      _subData = 'template';
      $subSelete = $('#page_theme_id');
    } else {
      _data = _pageData.module;
      _select = boolean ? _selectData.module : null;
      _subData = 'module';
      $subSelete = $('#page_app_frontend_url');
    };
    $(this).children("option:selected").each(function () {
      var _val = $(this).val();
      $subSelete.empty();
      $.each(_data, function(index, val) {
        if(_val == val.main[1]) {
          $.each(val.sub, function(index, val) {
            var _selected = _select && $(this)[1] == _select.sub ? 'selected="selected"' : '';
            $subSelete.append('<option value="' + $(this)[1] + '" ' + _selected + '>' + $(this)[0] + '</option>');
          });
          if(event.target.id == 'page_module_app_id') {
            $pageCategory.empty();
            $pageTags.empty();
            $('.select_all').prop('checked', false)
            $.each(val.category, function(index, val) {
              if(val !== 0) {
                $('#page-category-groups').slideDown(300);
                var _arr = _select ? $.inArray($(this)[1], _select.category[1]) : '';
                $pageCategory.append('<label class="checkbox"><input type="checkbox" name="page[category][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
                if(_select && !_select.category[0] && _arr !== -1) {
                  $pageCategory.find('input[type="checkbox"]').eq(index).prop('checked', true);
                }
                _select && _val == _select.main && _select.category[0] ? $pageCategory.siblings('.checkbox').children('.select_all').prop('checked', true) : '';
              } else {
                $('#page-category-groups').slideUp(300);
              }
            });
            $.each(val.tags, function(index, val) {
              if(val !== 0) {
                $('#page-tags-groups').slideDown(300);
                var _arr = _select ? $.inArray($(this)[1], _select.tags[1]) : '';
                $pageTags.append('<label class="checkbox"><input type="checkbox" name="page[tag][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
                if(_select && !_select.tags[0] && _arr !== -1) {
                  $pageTags.find('input[type="checkbox"]').eq(index).prop('checked', true);
                }
                _select && _val == _select.main && _select.tags[0] ? $pageTags.siblings('.checkbox').children('.select_all').prop('checked', true) : '';
              } else {
                $('#page-tags-groups').slideUp(300);
              }
            });
          }
          return false;
        };
      });
    });
    event.preventDefault();
  });
  $('#pageslide').on('change', '.checkbox-groups input[type="checkbox"]', function(event) {
    if($(this).hasClass('select_all') && $(this).prop('checked')) {
      $(this).closest('.checkbox').siblings('.groups').find('input[type="checkbox"]').prop('checked', false);
    } else if($(this).prop('checked')) {
      $(this).closest('.groups').siblings('.checkbox').find('.select_all').prop('checked', false);
    }
    event.preventDefault();
  });
}
function getPageData() {
  $.getJSON('page-design-module.json').done(function(data) {
    _pageData = data;
  });
}

$(function(){
  var $pageModule = null,
      $pageF2E = null,
      $pageDesign = null,
      $pageTheme = null,
      $pageCategory = null,
      $pageTags = null;
      _pageData = null;
      _selectData = null;
  $('.sortable').nestedSortable({
    handle: '.brand',
    items: 'li',
    maxLevels: 3,
    opacity: .6,
    toleranceElement: '> div',
    placeholder: 'placeholder',
    startCollapsed: true,
    disableNesting: 'no-nest',
    update: function(event, ui) {
      var position = null;
      if($(ui.item).closest('ol').hasClass('item-groups')) {
        position = $(ui.item).index() - 1;
      } else {
        position = $(ui.item).index();
      };
      $.post("<%= Rails.application.routes.url_helpers.admin_update_position_path %>", { id: ui.item.attr('id'), parent_id: (ui.item.parent().closest('li').attr('id') || ui.item.parent().closest('ol').attr('id')), position: position } );
    }
  });
  $(".sortable").delegate(".brand, .delete", clickEvent, function(e){
    if($(this).hasClass('delete')) {
      $target = $(this);
      $('#dialog a.delete-item').attr("href", $(this).attr("rel"));
      $('#dialog').modal('show');
    } else {
      if($(this).closest('li').children('ol').length > 0){
        $(this).closest('li').toggleClass('collapsed');
      }
    }
    e.preventDefault();
  });

  tip();
  touchSupport()
  itemsQuantity();
  getPageData();
});

function reloadStructure(){
  $.pageslide.close();
  customOpenSlide();
  tip();
  touchSupport()
  itemsQuantity();
};