orbit-4-1/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) {
      $('.item-menu').removeAttr('style');
      element.removeClass('active')
             .closest('.navbar-inner')
             .removeClass('active');
    },
    loadComplete: function(pageslide, element) {
      $openSlide.removeClass('active');
      $('.navbar-inner').removeClass('active');
      $('.item-menu').removeAttr('style');
      element.addClass('active')
             .closest('.item-menu')
             .css('display', 'inline-block')
             .closest('.navbar-inner')
             .addClass('active');
      _type = element.hasClass('page') ? 'page' : 'link';
      var _id = element.data('id'),
          _parent = element.data('parent'),
          _edit = element.hasClass('edit') ? true : false;
      $('#pageslide .parent').val(_parent);
      if(_id !== 'new') {
        $('#pageslide form').attr({
          'action': $('#pageslide form').attr('action') + '/' + _id,
          'id': 'edit_' + _type + '_' + _id,
          'method': 'put'
        });
        setForm(element.data('form'));
      } else {
        $('#pageslide form').prop('method', 'post')
      };
      _type == 'page' ? pageSetting(element.data('id'), _edit) : linkSetting(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) {
      $('.item-menu').removeAttr('style');
      element.removeClass('active')
             .closest('.navbar-inner')
             .removeClass('active');
      $('#main-wrap').css('width', 'auto')
    },
    loadComplete: function(pageslide, element) {
      $openSlide.removeClass('active');
      $('.navbar-inner').removeClass('active');
      $('.item-menu').removeAttr('style');
      element.addClass('active')
             .closest('.item-menu')
             .css('display', 'inline-block')
             .closest('.navbar-inner')
             .addClass('active');
      pageslide.find('.content').css('padding', 0);
      iFrameContent()
    }
  });
}
function iFrameContent() {
  $('#pageslide_iframe').load(function() {
    var $iContents = $(this).contents(),
        $pc = $iContents.find('.page_content');
    $pc.each(function(index, el) {
      if($(this).siblings('*').length == 0) {
        var _parentH = $(this).parent('*').outerHeight();
        $(this).css('height', _parentH);
      }
    });
    $iContents.find('#orbit-bar').hide();
    $iContents.find('.main_wrap').css('margin-top', 0);
    $iContents.find('a').not('.edit_link a').on('click', function(event) {
      event.preventDefault();
    });
  });
}
function pageSetting(id, edit) {
  $pageModule = $('#pageslide #page_module_app_id');
  $pageF2E = $('#pageslide #page_app_frontend_url');
  $pageDivF2E = $('#pageslide #front_url');
  $pageDesign = $('#pageslide #page_design');
  $pageTheme = $('#pageslide #page_theme_id');
  $pageCategory = $('#pageslide #page-category');
  $pageCategoryGroup = $('#pageslide #page-category-groups');
  $pageTags = $('#pageslide #page-tags');
  $pageTagsGroup = $('#pageslide #page-tags-groups');
  $pagePublishedTrue = $('#pageslide #page_is_published_true');
  $pageCount = $('#pageslide #page_count');
  $pageDivCount = $('#pageslide #front_count');
  _status = edit;
  _ID = id;
  if(_status) {
    $.ajax({
      url: "<%= Rails.application.routes.url_helpers.get_page_setting_json_admin_pages_path %>",
      contentType: "application/json; charset=utf-8",
      dataType: 'json',
      data: {id: id},
      cache: false,
    })
    .done(function(data) {
      _boolean = true;
      _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(_selectData.module.main && val.main[1] == _selectData.module.main) {
          $pageDivF2E.show();
          $.each(val.sub, function(index, val) {
            $pageF2E.append('<option value="' + $(this)[1] + '" ' + ($(this)[1] == _selectData.module.sub ? 'selected="selected"' : '') + '>' + $(this)[0]+ '</option>')
          });
          $.each(val.count, function(index, val) {
            $pageCount.append('<option value="' + val + '" ' + (val == _selectData.module.count ? 'selected="selected"' : '') + '>' + val+ '</option>');
          });
          $pageDivCount.show();

          if(val.category.length > 0) {
            $.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) : '';
            });
            $pageCategoryGroup.show();
          }
          if(val.category.length > 0) {
            $.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) : '';
            });
            $pageTagsGroup.show();
          }
          getView(_selectData.module.main, id);
        };
      });
      _selectData.module.public ? $pagePublishedTrue.prop('checked', true) : $pagePublishedTrue.prop('checked', false);
      $.each(_selectData.module.link, function(index, val) {
        if(val[1]) {
          $('#pageslide .active-link.' + val[0]).find('input[type="checkbox"]').prop('checked', true).end().find('.active-mune').slideDown(300);
          $('#pageslide .active-link.' + val[0]).find('input[type="radio"]').eq(val[2]).prop('checked', true);
        }
      });
      $('#pageslide').find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
      $pagePublishedTrue.prop('checked') ? $('.link-options').slideDown(300) : $('.link-options').slideUp(300);
    })
    .fail(function(jqXHR, textStatus) {
      console.log(jqXHR.status, textStatus)
      var $errorMsg = '<div class="error-cover"><div class="msg"><i class="icons-warning"></i><p>Sorry! Something is wrong</p></div></div>'
      $('#pageslide .view-page').append($errorMsg);
    });
  } else {
    _boolean = false;
    $.each(_pageData.design, function(index, val) {
      $pageDesign.append('<option value="' + val.main[1] + '" ' + (val.main[2] ? 'selected="selected"' : '') + '>' + val.main[0] + '</option>');
      if(val.main[2]) {
        $.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>');
    });
  };
};

function linkSetting(id, edit) {
  $linkPublishedTrue = $('#link_is_published_true');
  _status = edit;
  if(_status) {
    $.ajax({
      url: "<%= Rails.application.routes.url_helpers.get_link_setting_json_admin_links_path %>",
      contentType: "application/json; charset=utf-8",
      dataType: 'json',
      data: {id: id},
      cache: false,
    })
    .done(function(data) {
      _linkData = data;
      data.public ? $linkPublishedTrue.prop('checked', true) : $linkPublishedTrue.prop('checked', false);
      $linkPublishedTrue.prop('checked') ? $('.link-options').slideDown(300) : $('.link-options').slideUp(300);
      $.each(_linkData.link, function(index, val) {
        if(val[1]) {
          $('#pageslide .active-link.' + val[0]).find('input[type="checkbox"]').prop('checked', true).end().find('.active-mune').slideDown(300);
          $('#pageslide .active-link.' + val[0]).find('input[type="radio"]').eq(val[2]).prop('checked', true);
        }
      });
      $('#pageslide').find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
    })
    .fail(function(jqXHR, textStatus) {
      console.log(jqXHR.status, textStatus)
      var $errorMsg = '<div class="error-cover"><div class="msg"><i class="icons-warning"></i><p>Sorry! Something is wrong</p></div></div>'
      $('#pageslide .view-page').append($errorMsg);
    });
  }
}

function getPageData() {
  $.getJSON("<%= Rails.application.routes.url_helpers.get_page_design_module_json_admin_items_path %>").done(function(data) {
    _pageData = data;
  });
}
function getView(module_id, id) {
  var _data = {};
      _data.val = $('#pageslide #page_app_frontend_url option:selected').val();
      _data.id = id;
      _data.module_id = module_id
      $.ajax({
        url: "<%= Rails.application.routes.url_helpers.get_display_style_admin_pages_path %>",
        dataType: "script",
        data: _data,
        contentType: "application/html; charset=utf-8",
        cache: false,
      });
}

$(function() {
  $pageModule = null,
  $pageF2E = null,
  $pageDivF2E = null,
  $pageDesign = null,
  $pageTheme = null,
  $pageCategory = null,
  $pageCategoryGroup = null,
  $pageTags = null,
  $pageTagsGroup = null,
  $pagePublishedTrue = null,
  $pageCount = null,
  $pageDivCount = null,
  $linkKey = null,
  $linkUrl = null,
  $linkTitle = null,
  $linkPublishedTrue = null,  
  _boolean = null,
  _ID = null,
  _type = null,
  _status = null,
  _pageData = null,
  _selectData = null,
  _linkData = 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.update_position_admin_items_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();
  });
  $("#dialog").on('show', function (e) {
    $(this).find('.delete-item').on(clickEvent, function() {
      $target.parents('.navbar').parent('li').remove();
      $('ol').not('.sortable').each(function() {
        if($(this).children('li').index() == -1) {
          $(this).remove();
        }
      });
      itemsQuantity();
      $('#dialog').modal('hide');
      e.preventDefault();
    })
  });

  $('#pageslide').on('change', '.change', function(event) {
    var _data, _select, _subData, $subSelete;
    if(event.target.id !== 'page_app_frontend_url') {
      if(event.target.id == 'page_design') {
        _data = _pageData.design;
        _select = _boolean ? _selectData.design : null;
        _subData = 'template';
        $subSelete = $('#pageslide #page_theme_id');
      } else {
        _data = _pageData.module;
        _select = _boolean ? _selectData.module : null;
        _subData = 'module';
        $subSelete = $('#pageslide #page_app_frontend_url');
        $pageDivF2E.show();
      };
      $(this).children("option:selected").each(function () {
        var _val = $(this).val();
        $subSelete.empty();
        if(_val) {
          $.each(_data, function(index, val) {
            if(_val == val.main[1]) {
              getView(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.sub + '>' + $(this)[0] + '</option>');
              });
              $.each(val.count, function(index, val) {
                $pageCount.append('<option value="' + val + '" ' + (_select && _select.main == _val && val == _selectData.module.count ? 'selected="selected"' : '') + '>' + val+ '</option>');
              });
              $pageDivCount.show();

              if(event.target.id == 'page_module_app_id') {
                if(val.category.length > 0) {
                  $.each(val.category, function(index, val) {
                    if(val !== 0) {
                      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) : '';
                    }
                  });
                  $pageCategoryGroup.show();
                } else {
                  $pageCategory.empty();
                  $pageCategoryGroup.hide();
                }
                if(val.tags.length > 0) {
                  $.each(val.tags, function(index, val) {
                    if(val !== 0) {
                      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) : '';
                    }  
                  });
                  $pageTagsGroup.show();
                } else {
                  $pageTags.empty();
                  $pageTagsGroup.hide();
                }
              }
              return false;
            };
          });
        } else {
          $pageCategory.empty();
          $pageCategoryGroup.hide();
          $pageTags.empty();
          $pageTagsGroup.hide();
          $pageF2E.empty();
          $pageDivF2E.hide();
          $pageCount.empty();
          $pageDivCount.hide();
        }
      });
    }
    else {
      getView($pageModule.val());
    }
    event.preventDefault();
  });



  $('#pageslide').on('change', '.checkbox-groups input', function(event) {
    var $checked = $(this);
    if($checked.attr('type') == 'checkbox') {
      if($checked.hasClass('select_all') && $checked.prop('checked')) {
        $checked.closest('.checkbox').siblings('.groups').find('input[type="checkbox"]').prop('checked', false);
      } else if($checked.prop('checked') && !$checked.hasClass('lang-enable')) {
        $checked.closest('.groups').siblings('.checkbox').find('.select_all').prop('checked', false);
      } else {
        if($checked.prop('checked')) {
          $checked.closest('.active-link').addClass('active').siblings('active-link').removeClass('active').end().find('.active-mune').slideDown(300);
          if(_status) {
            var _index = $checked.closest('.link-options').find('.active').index() - 1,
                _index = _type == 'page' ? _selectData.module.link[_index][1] : _linkData.link[_index][1] ;
            $checked.closest('.active-link').find('.active-mune input').eq(_index).prop('checked', true);
          }
        } else {
          $('.active-link').removeClass('active');
          $checked.closest('.active-link').find('.active-mune').slideUp(300, function() {
            $(this).find('input:eq(0)').prop('checked', true);
          })
        }
      }
      return false;
    } else if($checked.attr('type') == 'radio' && !$(this).closest('div').hasClass('active-mune')) {
      $('#pageslide #page_is_published_true').prop('checked') || $('#pageslide #link_is_published_true').prop('checked') ? $('.link-options').slideDown(300) : $('.link-options').slideUp(300);
      return false;
    }
    event.preventDefault();
  });
  tip();
  touchSupport()
  itemsQuantity();
  getPageData();
});

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