117 lines
3.5 KiB
Plaintext
117 lines
3.5 KiB
Plaintext
<% content_for :page_specific_css do %>
|
|
<%= stylesheet_link_tag "admin/web_links" %>
|
|
<% end %>
|
|
<table width="100%" id="web_resource_order_table">
|
|
<thead>
|
|
<th>Position</th>
|
|
<th>Link</th>
|
|
</thead>
|
|
<tbody>
|
|
<% @links.each_with_index do |link,i| %>
|
|
<tr>
|
|
<td class="position-text">
|
|
<div class="position-text-div" data-value="<%= (i + 1).to_s %>"><%= (i + 1).to_s %></div>
|
|
</td>
|
|
<td>
|
|
<div class="link-text-id" data-link-id="<%= link.id.to_s %>"><%= link.title %></div>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
<div class="bottomnav clearfix" style="left: 81px;">
|
|
<div class="action pull-right">
|
|
<a class="btn btn-info disabled" id="save-order-button" href="#">Save Order</a>
|
|
</div>
|
|
<div class="pagination pagination-centered"></div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
|
|
var makeEditable = function(){
|
|
var input_box = $("<input type='text'/>"),
|
|
el = $(this);
|
|
input_box.val(el.data("value"));
|
|
input_box.attr("data-old-id",el.data("value"));
|
|
input_box.on("blur",function(){
|
|
putBackdiv($(this));
|
|
});
|
|
input_box.on("keypress",function(e){
|
|
if(e.keyCode == 13 || e.keyCode == 27){
|
|
putBackdiv($(this),e.keyCode);
|
|
}
|
|
})
|
|
el.parent().html(input_box);
|
|
input_box.focus();
|
|
}
|
|
|
|
var putBackdiv = function(el,keyCode){
|
|
current_value = parseInt((el.val() == "" ? el.data("old-id") : el.val())),
|
|
old_value = parseInt(el.data("old-id"));
|
|
if(isNaN(current_value) || keyCode == 27){
|
|
current_value = old_value;
|
|
}
|
|
if(old_value != current_value){
|
|
var new_index_value = (current_value > old_value ? current_value + 1 : current_value - 1),
|
|
div = $("<div class='position-text-div' data-value='" + current_value + "'>" + new_index_value + "</div>");
|
|
div.on("click",makeEditable);
|
|
el.parent().html(div);
|
|
$("#save-order-button").removeClass("disabled");
|
|
sortTable(el.data("old-id"),current_value);
|
|
}else{
|
|
var div = $("<div class='position-text-div' data-value='" + current_value + "'>" + current_value + "</div>");
|
|
div.on("click",makeEditable);
|
|
el.parent().html(div);
|
|
}
|
|
}
|
|
|
|
var sortTable = function(changed_index,changed_to){
|
|
var table_element = document.getElementById("web_resource_order_table"),
|
|
data = [],
|
|
allRows = table_element.rows;
|
|
for(i = 1; i < allRows.length; i++){
|
|
var thisRow = allRows[i],
|
|
text = thisRow.cells[0].textContent.trim(),
|
|
hash = {};
|
|
hash.index = parseInt(text);
|
|
text = thisRow.cells[1].innerHTML.trim();
|
|
if(text != " "){
|
|
hash.link = text;
|
|
}
|
|
data.push(hash);
|
|
}
|
|
data = data.sort(function(a,b){return a.index > b.index});
|
|
renderSortedTable(data,table_element);
|
|
}
|
|
|
|
var renderSortedTable = function(data,table_element){
|
|
var allRows = table_element.rows;
|
|
for(i = 0;i < data.length; i++){
|
|
var thisRow = allRows[i + 1],
|
|
current_value = i + 1;
|
|
thisRow.cells[0].innerHTML = "<div class='position-text-div' data-value='" + current_value + "'>" + current_value + "</div>";
|
|
thisRow.cells[1].innerHTML = data[i].link;
|
|
}
|
|
$("#web_resource_order_table div.position-text-div").on("click",makeEditable);
|
|
}
|
|
|
|
$("#save-order-button").on("click",function(){
|
|
var el = $(this);
|
|
if(!el.hasClass("disabled")){
|
|
var data = [];
|
|
$("#web_resource_order_table .link-text-id").each(function(){
|
|
data.push($(this).data("link-id"));
|
|
})
|
|
$.ajax({
|
|
url : "/admin/web_resources/updateorder",
|
|
data : {"order" : data},
|
|
dataType : "json",
|
|
type : "post"
|
|
}).done(function(){
|
|
el.addClass("disabled");
|
|
})
|
|
}
|
|
})
|
|
|
|
$("#web_resource_order_table div.position-text-div").on("click",makeEditable);
|
|
|
|
</script> |