socialforge/app/views/users/user_resource.html.erb

<%= javascript_include_tag 'bootstrap'%>
<%= stylesheet_link_tag 'project' %>
<%= stylesheet_link_tag 'leftside' %>
<%= javascript_include_tag 'attachments'%>
<!--<script type="text/css">-->
<!--html,body{ overflow-y:scroll;}-->
<!--html,body{ overflow:scroll; min-height:101%;}-->
<!--html{ overflow:-moz-scrollbars-vertical;}-->
<!--</script>-->
<script>
    function remote_get_resources(user_id,type){

    }
    function remote_search(){
        $("#resource_search_form").submit();
    }

    function show_upload(){
        $("#ajax-modal").html('<%= escape_javascript( render :partial => 'upload_resource' ,:locals => {:user=>@user})%>');
        showModal('ajax-modal', '452px');
        $('#ajax-modal').siblings().remove();
        $('#ajax-modal').before("<a href='javascript:void(0)' onclick='closeModal();' style='margin-left: 435px;' class='resourceClose'></a>");
        $('#ajax-modal').parent().css("top","40%").css("left","46%");
        $('#ajax-modal').parent().addClass("resourceUploadPopup");
        $('#ajax-modal').css("padding-left","16px").css("padding-bottom","16px");
    }

    function closeModal()
    {
        hideModal($(".uploadBoxContainer"));
    }
    function closePopUp(){
        hideModal($(".boxContainer"));
    }

    function check_files(){
        return $("#attachments_fields").children().length == 0;
    }

    function submit_files(){
        $("#upload_form").submit();
    }
</script>
<div class="homepageRightBanner">
    <div class="NewsBannerName">资源库</div>
    <ul class="resourcesSelect">
      <li class="resourcesSelected"><a href="javascript:void(0);" class="resourcesIcon"></a>
        <ul class="resourcesType">
          <li>
            <%= link_to '全部' ,user_resource_user_path(:id=>@user.id,:type=>1),:remote=>true,:method => 'get',:class=>'resourcesTypeAll resourcesGrey' %>
          </li>
          <li>
            <%= link_to '课程资源' ,user_resource_user_path(:id=>@user.id,:type=>2),:remote=>true,:method => 'get',:class=>'homepagePostTypeAssignment postTypeGrey' %>
          </li>
          <li>
            <%= link_to '项目资源' ,user_resource_user_path(:id=>@user.id,:type=>3),:remote=>true,:method => 'get',:class=>'homepagePostTypeQuiz postTypeGrey' %>
          </li>
          <li>
            <%= link_to '用户资源' ,user_resource_user_path(:id=>@user.id,:type=>5),:remote=>true,:method => 'get',:class=>'resourcesTypeAtt resourcesGrey' %>
          </li>
          <li>
            <%= link_to '附件' ,user_resource_user_path(:id=>@user.id,:type=>4),:remote=>true,:method => 'get',:class=>'resourcesTypeAtt resourcesGrey' %>
          </li>
        </ul>
      </li>
    </ul>
  </div>

<div class="resources mt10" id="users_setting">
  <div class="resourcesSearchBanner mt10">
    <div class="resourcesUploadBox">
      <a href="javascript:void(0);" onclick="show_upload();" class="uploadBoxIcon">上传资源</a></div>
    <div id="search_div">
      <%= render :partial =>  'resource_search_form',:locals => {:user=>@user,:type=>@type} %>
    </div>
    <div style="
    float: left;
            margin-top: 7px;
            font-size: 14px;
            margin-left: 15px;
    "><span style="align:center ;font-size: 14px;color: gray;">为您找到<span id="res_all_count"><%= @atta_count%></span>个资源</span></div>
  </div>
  <div class="resourcesListBanner">
    <ul class="resourcesListTab">
      <li class="resourcesListCheckbox fl"> </li>
      <li class="resourcesListName fl">资源名称</li>
      <li class="resourcesListSize fl">大小</li>
      <li class="resourcesListType fl">类别</li>
      <li class="resourcesListUploader fl">上传者</li>
      <li class="resourcesListTime fl">上传时间</li>
    </ul>
  </div>
  <form id="resources_list_form">
    <div id="resources_list">

      <%= render :partial => 'resources_list' ,:locals=>{ :attachments => @attachments} %>

    </div>
    <div class="resourcesListOption">
      <div class="resourcesCheckAll">
        <input id="checkboxAll" type="checkbox" value="" onclick="all_select();"  class="resourcesCheckbox" />
      </div>
      <a href="javascript:void(0);" class="replyGrey1 mr15" onclick="all_select();">全选</a>
      <a href="javascript:void(0);" class="replyGrey1" onclick="batch_delete();">删除</a>
      <div class="resourcesSelectSend">
        <div class="fl">选择&nbsp;<span class="c_red" id="res_count">0</span>&nbsp;个资源</div>
        <div class="resourcesSelectSendButton" onclick="batch_send();">
          <a href="javascript:void(0);" class="sendButtonBlue db" data-remote="true" >发送</a>
        </div>
      </div>
    </div>
  </form>
  <div class="cl"></div>
  <div>
    <ul class="wlist" id="pages" style="margin-top: 5px;">
      <%= pagination_links_full @atta_pages, @atta_count, :per_page_links => false, :remote => @is_remote, :flag => true%>
    </ul>
  </div>
</div>

<div class="cl"></div>
<!--<div id="upload_box" style="display: none">-->
<!--<%#= render :partial => 'upload_resource' ,:locals => {:user=>@user}%>-->
<!--</div>-->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" id="contextMenu">
  <li><a tabindex="-1" href="#" onclick="if(<%= User.current.logged?%>)preview();" onfocus="this.blur()">预览</a></li>
  <li><a tabindex="-1" href="#" onclick="if(<%= User.current.logged?%>)rename();" onfocus="this.blur()">重命名</a></li>
  <!--  data-remote="true" 这个属性会让ajax请求状态标志就在当前按钮的上方显示，就不会滚动浏览器，因而弹出框也会在当前窗口中央展示-->
  <li><a tabindex="-1" href="#" onclick="if(<%= User.current.logged?%>)show_send();" data-remote="true" onfocus="this.blur()" >发送</a></li>
  <li><a tabindex="-1" href="#" onclick="if(<%= User.current.logged?%>)delete_file();" onfocus="this.blur()">删除</a></li>
</ul>

<script>
    var pageX = 0;
    var pageY = 0;
    //当前选中的行
    var line;
    //已经选中的行，和当前选中的行的区别是：右键选中为line，换一行右键后，line变为last_line,line变为换行后的line
    var last_line;
    //资源名称
    var res_name;
    //资源名称的链接
    var res_link;
    var id; //资源id
    var sendType;  //发送到课程 1  发送到项目 2
    var lastSendType;  //保存上次发送的发送类型
    $("#resources_list").mousedown(function(e) {
        //如果是右键的话
        if (3 == e.which) {
            document.oncontextmenu = function() {return false;}
            pageX = e.clientX;
            pageY = e.clientY;
            $("#contextMenu").hide();
            $("#contextMenu").attr("style","display: block; position: fixed; top:"
                    + pageY
                    + "px; left:"
                    + pageX
                    + "px; width: 80px;");
            $("#contextMenu").show();
            //当前光标所在的对象

            var ele = document.elementFromPoint(pageX,pageY);
            //转换为jquery对象
            line = $(ele).parent();
            //如果上一条存在被选中，那么将上一条的背景色改为白色
            if(last_line != null){
                last_line.children().css("background-color", 'white');
                restore();
                last_line == null;
            }
            //如果当前的tag是li，那么还要li的父级元素
            if(line.get(0).tagName === 'LI'){
                line = line.parent();
            }
            //将当前的元素的所有子元素的背景色改为蓝色
            line.children().css("background-color", '#e1e1e1');
            //将当前元素赋给 上一个对象 保存起来。
            last_line = line;
        }
    });
    //元素包含关系计算
    var contains  = function(root, el) {
        if (root.compareDocumentPosition)
            return root === el || !!(root.compareDocumentPosition(el) & 16);
        if (root.contains && el.nodeType === 1){
            return root.contains(el) && root !== el;
        }
        while ((el = el.parentNode))
            if (el === root) return true;
        return false;
    }
    $(document.body).click(function(e) {
        //在列表上的任何单击事件都要恢复原来的样子
        //隐藏右键菜单
        //e.preventDefault();
        $("#contextMenu").hide();
        document.oncontextmenu = function() {return true;}
        //如果当前行为空，那么要将当前行的拿到
        var ele;
        if(line == null){
            ele = document.elementFromPoint(e.clientX, e.clientY);
            line = $(ele).parent();
            //如果是在li上点击事件，那么要获得父组件
            if(line.get(0).tagName === 'LI'){
                line = line.parent();
            }

        }
        //如果当前对象在表格里，将当前行改变为白色,这里主要是防止点击页面的其他链接的时候，那个链接背景色变白了
        if( contains($("#resources_list").get(0),line.get(0))){
            line.children().css("background-color", 'white');
        }

        //当前行恢复编辑状态到链接状态
        if(ele && ele.nodeName != 'INPUT') {
            restore();
        }
        line = null;
    });
    //只要有一个选中了就是true
    function checkboxSelected(){
        selected = false;
        $("#resources_list").find("input[name='checkbox1[]']").each(function(){
            if($(this).attr('checked') == true){
                selected = true;
            }
        });
        return selected;
    }
    //只有全选才是true
    function checkboxAllSelected(){
        allSelected = true;
        $("#resources_list").find("input[name='checkbox1[]']").each(function(){
            if($(this).attr('checked') == undefined){
                allSelected = false;
            }
        });
        return allSelected;
    }
    //只有全部不选才是true
    function checkboxAllDeselected(){
        allDeselected = true;
        $("#resources_list").find("input[name='checkbox1[]']").each(function(){
            if($(this).attr('checked') == 'checked'){
                allDeselected = false;
            }
        });
        return allDeselected;
    }
    //查看所有的checkbox状态，并且按情况更改$("#checkboxAll")的状态
    function checkAllBox(checkbox){
        //只有选中当前checkbox且这个时候所有的checkbox都被选中了，$("#checkboxAll")才是被选中状态，其余都是非选中状态
        if(checkbox.attr('checked') == 'checked' && checkboxAllSelected()){
            $("#checkboxAll").attr('checked',true);
        }else{
            $("#checkboxAll").attr('checked',false);
        }
        $("#res_count").html(getCheckBoxSeletedCount());

    }
    //获取当前checkbox选中的数目
    function getCheckBoxSeletedCount(){
        var i = 0;
        $("#resources_list").find("input[name='checkbox1[]']").each(function(){
            if($(this).attr('checked') == 'checked'){
                i ++;
            }
        });
        return i;
    }
    //全选反选
    function all_select(){

        if($("#checkboxAll").attr('checked')){
            $("#resources_list").find("input[name='checkbox1[]']").each(function(){
                $(this).attr('checked',true);
            });
            $("#res_count").html(getCheckBoxSeletedCount());
        }else{
            $("#resources_list").find("input[name='checkbox1[]']").each(function(){
                $(this).attr('checked',false);
            });
            $("#res_count").html(0);
        }
    }
    //批量删除
    function batch_delete(){
        var data = $("#resources_list_form").serialize();
        if(data != "" && confirm('您删不掉这其中上传者不是您的资源，确认要删除这些资源吗？')) {
            $.post(
                    '<%= user_resource_delete_user_path(@user)%>',
                    $("#resources_list_form").serialize(),//只会对选中的控件进行序列化提交
                    function (data) {

                    }
            );
        }
    }



    function show_send(){
        $("#contextMenu").hide();
        document.oncontextmenu = function() {return true;}
        line.children().css("background-color",'white');
        id = line.children().last().html();
        if (lastSendType === '1'){  //如果已经发送过一次了，那么就应该沿用上次发送的类型。
            $.ajax({
                type: 'get',
                url: '<%= search_user_course_user_path(@user)%>' + '?send_id=' + id
            });
        }else{
            $.ajax({
                type: 'get',
                url: '<%= search_user_project_user_path(@user)%>' + '?send_id=' + id
            });
        }
    }

    function batch_send(){
        if($("#resources_list_form").serialize() == ""){
            alert('暂时不支持多页选择，您当前页没有选择任何资源');
            return ;
        }
        if (lastSendType === '1'){  //如果已经发送过一次了，那么就应该沿用上次发送的类型。
            $.ajax({
                type: 'get',
                url: '<%= search_user_course_user_path(@user)%>' + '?'+ $("#resources_list_form").serialize()
            });
        }else{
            $.ajax({
                type: 'get',
                url: '<%= search_user_project_user_path(@user)%>' + '?' +  $("#resources_list_form").serialize()
            });
        }
    }

    function preview(){
        $("#contextMenu").hide();
        document.oncontextmenu = function() {return true;}
        line.children().css("background-color",'white');
        id = line.children().last().html();
        $.ajax({
            type:'get',
            url:'<%= resource_preview_user_path(@user)%>'+"?resource_id="+id
        });
    }

    function rename(){
        $("#contextMenu").hide();
        document.oncontextmenu = function() {return true;}
        line.children().css("background-color",'white');
        id = line.children().last().html();
        user_id = line.children().eq(5).html();
        if(user_id === '<%= User.current.id%>') {
            res_name = line.children().eq(1).children().attr('title');
            res_link = line.children().eq(1).html();
            line.children().eq(1).html('<%= form_tag(url_for(:controller => 'users',:action => 'rename_resource',:method => 'post',:remote=>true,:id=>@user.id),:id=>"res_name_form" ) do%>' +
                    '<input name="res_name" id="res_name" ' +
                    'style="height: 2em;line-height: 2em;overflow: hidden;" onblur="restore();" ' +
                    'value="'+res_name+
                    '"/>  <input type="hidden" id ="res_id" name="res_id" value="'+id+'"/>'+
                    '<% end %>');
            $("#res_name").focus();
            $("html,body").animate({scrollTop:$("#res_name").offset().top},1000)
        }else{
            alert('您无法修改此资源！')
        }
    }
    String.prototype.trim = function() {
        var str = this,
                str = str.replace(/^\s\s*/, ''),
                ws = /\s/,
                i = str.length;
        while (ws.test(str.charAt(--i)));
        return str.slice(0, i + 1);
    }

    //恢复编辑状态到链接状态
    //如果当前是编辑状态，任何的不在输入框里的单击右键事件都需要将编辑状态变回链接状态
    //如果是编辑状态，且做了修改，那么久要进行修改，并且将修改值经过处理替换到页面显示
    function restore(){
        //上一行不为空 且链接不为空
        if( last_line != null && res_link != null && res_link != '') {
            name = $("#res_name").lenght != 0 && $("#res_name").val() != undefined  ?  $("#res_name").val().trim() : undefined ;
            if (name == undefined || name === 'undefined' ){ //只要res_name没有值，那么就不是编辑状态
                return;
            }
            if( name && name != res_name.trim()){

                if(confirm('确定修改为 '+name)){
                    $.post(
                            '<%=rename_resource_user_path(@user) %>',
                                    "res_name="+$('#res_name').val()+"&res_id="+$("#res_id").val(),
                            function (data){
                                if(data != 'fail'){//修改成功，那么将链接恢复，并且将链接的显示内容改变。链接可以不变
                                    last_line.children().eq(1).html(res_link);
                                    last_line.children().eq(1).children().attr('title',name);
                                    last_line.children().eq(1).children().attr('href',data);
                                    last_line.children().eq(1).children().html(name.length > 17? name.substring(0,17)+'...' : name);
                                }else{
                                    last_line.children().eq(1).html(res_link);
                                    res_link = null; //如果修改失败，恢复之后将res_link置空
                                }
                            },
                            'text'
                    );
                }else{
                    last_line.children().eq(1).html(res_link);
                    res_link = null; //如果没有做修改，恢复之后将res_link置空
                }
            }else {
                last_line.children().eq(1).html(res_link);
                res_link = null;//如果没有做修改，恢复之后将res_link置空
            }


        }
    }

    function delete_file() {
        $("#contextMenu").hide();
        document.oncontextmenu = function () {
            return true;
        }
        line.children().css("background-color", 'white');
        id = line.children().last().html();
        user_id = line.children().eq(5).html();
        if(user_id === '<%= User.current.id%>') {
            if (confirm('确定要删除资源"' + line.children().eq(1).children().attr('title').trim() + '"么?')) {
                $.ajax({
                    type: 'post',
                    url: '<%= user_resource_delete_user_path(@user)%>' + '?resource_id=' + id + '&type=' + $('#type').val()
                });
            }
        }else{
            alert('您无法删除此资源！')
        }
    }

    //id 发送的id
    //发送的id数组
    function chooseSendType(res_id,res_ids){

        sendType = $(".resourcesSendType").val();
        if (sendType === lastSendType) {
            return;
        } else if (lastSendType != null) { //不是第一次点击的时候
            if(res_ids == "") {//如果是单个发送
                if (sendType === '1') {
                    $.ajax({
                        type: 'get',
                        url: '<%= search_user_course_user_path(@user)%>' + '?send_id=' + id
                    });
                } else {
                    $.ajax({
                        type: 'get',
                        url: '<%= search_user_project_user_path(@user)%>' + '?send_id=' + id
                    });
                }
            }else{//如果是多个发送
                if (sendType === '1'){
                    $.ajax({
                        type: 'get',
                        url: '<%= search_user_course_user_path(@user)%>' + '?'+ $("#resources_list_form").serialize()
                    });
                }else{
                    $.ajax({
                        type: 'get',
                        url: '<%= search_user_project_user_path(@user)%>' + '?' +  $("#resources_list_form").serialize()
                    });
                }
            }
        }

        lastSendType = sendType;
    }
    //  var iWidth = document.documentElement.clientWidth;
    //  var iHeight = document.documentElement.clientHeight;
    //  var moveX = 0;
    //  var moveY = 0;
    //  var moveTop = 0;
    //  var moveLeft = 0;
    //  var moveable = false;
    //  var docMouseMoveEvent = document.onmousemove;
    //  var docMouseUpEvent = document.onmouseup;
    //  $("#upload_box").mousedown(function() {
    //      var evt = getEvent();
    //      moveable = true;
    //      moveX = evt.clientX;
    //      moveY = evt.clientY;
    //
    //      moveTop = parseInt($("#upload_box").css('top'));
    //      moveLeft = parseInt($("#upload_box").css('left'));
    //
    //      $(document).mousemove( function() {
    //          if (moveable) {
    //              var evt = getEvent();
    //              var x = moveLeft + evt.clientX - moveX;
    //              var y = moveTop + evt.clientY - moveY;
    //              if ( x > 0 &&( x + 322 < iWidth) && y > 0 && (y + 257 < iHeight) ) {
    //                  $("#upload_box").css('left',  x + "px");
    //                  $("#upload_box").css('top', y + "px");
    //                  console.log( moveX)
    //                  console.log( moveY)
    //              }
    //          }
    //      });
    //      $(document).mouseup (function () {
    //          if (moveable) {
    //              document.onmousemove = docMouseMoveEvent;
    //              document.onmouseup = docMouseUpEvent;
    //              moveable = false;
    //              moveX = 0;
    //              moveY = 0;
    //              moveTop = 0;
    //              moveLeft = 0;
    //          }
    //      });
    //  });
    //
    //  // 获得事件Event对象，用于兼容IE和FireFox
    //  function getEvent() {
    //      return window.event || arguments.callee.caller.arguments[0];
    //  }

</script>