Fix record title display in reorder grid for basket & story

This commit is contained in:
Nicolas Le Goff
2014-07-09 10:53:33 +02:00
parent e46f339c92
commit a04ed200b6
2 changed files with 158 additions and 164 deletions

View File

@@ -21,15 +21,15 @@
<div class="elements row-fluid"> <div class="elements row-fluid">
{% for element in basket.getElements() %} {% for element in basket.getElements() %}
<div id="ORDER_{{ element.getId() }}" class="CHIM diapo" style="height:130px;overflow:hidden;"> <div id="ORDER_{{ element.getId() }}" class="CHIM diapo" style="height:130px;overflow:hidden;">
<div class="title" title="{{ element.getRecord(app).get_title() }}" style="position:relative;z-index:1200;height:30px;overflow:visible;text-align:center;"> <div class="title" title="{{ element.getRecord(app).get_title() }}" style="position:relative;z-index:1200;height:30px;overflow:hidden;text-align:center;text-overflow: ellipsis; line-height: 15px;">
<span>{{ element.getRecord(app).get_title() }}</span> {{ element.getRecord(app).get_title() }} {{ element.getRecord(app).get_title() }}{{ element.getRecord(app).get_title() }}
{{ thumbnail.format(element.getRecord(app).get_thumbnail(), 80, 80, '', false, false) }}
<form style="display:none;">
<input type="hidden" name="id" value="{{ element.getId() }}"/>
<input type="hidden" name="title" value="{{ element.getRecord(app).get_title() }}"/>
<input type="hidden" name="default" value="{{ element.getOrd() }}"/>
</form>
</div> </div>
{{ thumbnail.format(element.getRecord(app).get_thumbnail(), 80, 80, '', false, false) }}
<form style="display:none;">
<input type="hidden" name="id" value="{{ element.getId() }}"/>
<input type="hidden" name="title" value="{{ element.getRecord(app).get_title() }}"/>
<input type="hidden" name="default" value="{{ element.getOrd() }}"/>
</form>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>

View File

@@ -1,55 +1,55 @@
{% import 'common/thumbnail.html.twig' as thumbnail %} {% import 'common/thumbnail.html.twig' as thumbnail %}
<div id="reorder_options" class="PNB" style="height:30px;bottom:auto;"> <div class="PNB" style="height:40px;bottom:auto">
<span>{% trans 'Reordonner automatiquement' %}</span> <form id="reorder_options" class="form-inline" style="display:inline-block;">
<select id="auto_order"> <span>{% trans 'Reordonner automatiquement' %}</span>
<option value="">{% trans 'Choisir' %}</option> <select id="auto_order">
<option value="default">{% trans 'Re-initialiser' %}</option> <option value="">{% trans 'Choisir' %}</option>
<option value="title">{% trans 'Titre' %}</option> <option value="default">{% trans 'Re-initialiser' %}</option>
</select> <option value="title">{% trans 'Titre' %}</option>
<button type="button" class="autoorder">{% trans 'Re-ordonner' %}</button> </select>
<button type="button" class="reverseorder">{% trans 'Inverser' %}</button> <button type="button" class="autoorder">{% trans 'Re-ordonner' %}</button>
</div> <button type="button" class="reverseorder">{% trans 'Inverser' %}</button>
<div style="top:30px;overflow:auto;" id="reorder_box" class="PNB"> </form>
<div class="elements"> <form style="display:inline-block;" class="form-inline" name="reorder" method="POST" action="{{ path('prod_stories_story_reorder', { 'sbas_id' : story.get_sbas_id(), 'record_id' : story.get_record_id() }) }}">
{% for element in story.get_children() %} {% for element in story.get_children() %}
<div id="ORDER_{{ element.get_record_id() }}" class="CHIM diapo" style="height:130px;overflow:hidden;"> <input type="hidden" name="element[{{ element.get_record_id() }}]" value="{{ element.get_number() }}"/>
<div class="title" title="{{ element.get_title() }}" style="position:relative;z-index:1200;height:30px;overflow:visible;text-align:center;"> {% endfor %}
<span>{{ element.get_title() }}</span> <button type="button">{% trans 'boutton::valider' %}</button>
{{ thumbnail.format(element.get_thumbnail(), 80, 80, '', false, false) }}
<form style="display:none;">
<input type="hidden" name="id" value="{{ element.get_record_id() }}"/>
<input type="hidden" name="title" value="{{ element.get_title() }}"/>
<input type="hidden" name="default" value="{{ element.get_number() }}"/>
</form>
</div>
</div>
{% endfor %}
</div>
<form name="reorder" method="POST" action="{{ path('prod_stories_story_reorder', { 'sbas_id' : story.get_sbas_id(), 'record_id' : story.get_record_id() }) }}">
{% for element in story.get_children() %}
<input type="hidden" name="element[{{ element.get_record_id() }}]" value="{{ element.get_number() }}"/>
{% endfor %}
<button>{% trans 'boutton::valider' %}</button>
</form> </form>
</div> </div>
<div style="top:45px;overflow:auto;" id="reorder_box" class="PNB">
<div class="elements">
{% for element in story.get_children() %}
<div id="ORDER_{{ element.get_record_id() }}" class="CHIM diapo" style="height:130px;overflow:hidden;">
<div class="title" title="{{ element.get_title() }}" style="position:relative;z-index:1200;height:30px;overflow:hidden;text-align:center;text-overflow: ellipsis; line-height: 15px;">
{{ element.get_title() }} {{ element.get_title() }} {{ element.get_title() }}
</div>
{{ thumbnail.format(element.get_thumbnail(), 80, 80, '', false, false) }}
<form style="display:none;">
<input type="hidden" name="id" value="{{ element.get_record_id() }}"/>
<input type="hidden" name="title" value="{{ element.get_title() }}"/>
<input type="hidden" name="default" value="{{ element.get_number() }}"/>
</form>
</div>
{% endfor %}
</div>
</div>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
var container = $('#reorder_box');//p4.Dialog.get(1).getDomElement();
var container = $('#reorder_box');//p4.Dialog.get(1).getDomElement(); $('button.autoorder', container).bind('click', function(){
autoorder();
return false;
});
$('button.autoorder', container).bind('click', function(){ $('button.reverseorder', container).bind('click', function(){
autoorder(); reverse_order();
return false; return false;
}); });
$('button.reverseorder', container).bind('click', function(){
reverse_order();
return false;
});
function autoorder() function autoorder()
{ {
@@ -94,140 +94,134 @@
}); });
} }
$('.elements', container).sortable({ $('.elements', container).sortable({
appendTo : container, appendTo : container,
placeholder: 'diapo ui-sortable-placeholder', placeholder: 'diapo ui-sortable-placeholder',
distance:20, distance:20,
cursorAt: { cursorAt: {
top:10, top:10,
left:-20 left:-20
}, },
items:'div.diapo', items:'div.diapo',
scroll:true, scroll:true,
scrollSensitivity:40, scrollSensitivity:40,
scrollSpeed:30, scrollSpeed:30,
start:function(event, ui){ start:function(event, ui){
var selected = $('.selected',container); var selected = $('.selected',container);
selected.each(function(i,n){ selected.each(function(i,n){
$(n).attr('position',i); $(n).attr('position',i);
}); });
var n = selected.length - 1; var n = selected.length - 1;
$('.selected:visible', container).hide(); $('.selected:visible', container).hide();
while(n > 0) while(n > 0)
{ {
$('<div style="height:130px;" class="diapo ui-sortable-placeholderfollow"></div>').after($('.diapo.ui-sortable-placeholder', container)); $('<div style="height:130px;" class="diapo ui-sortable-placeholderfollow"></div>').after($('.diapo.ui-sortable-placeholder', container));
n--; n--;
} }
}, },
stop:function(event, ui){ stop:function(event, ui){
$('.diapo.ui-sortable-placeholderfollow', container).remove(); $('.diapo.ui-sortable-placeholderfollow', container).remove();
var main_id = $(ui.item[0]).attr('id'); var main_id = $(ui.item[0]).attr('id');
var selected = $('.selected',container); var selected = $('.selected',container);
var sorter = new Array(); var sorter = new Array();
selected.each(function(i,n){ selected.each(function(i,n){
var position = parseInt($(n).attr('position')); var position = parseInt($(n).attr('position'));
if(position !== '') if(position !== '')
{ {
sorter[position] = $(n); sorter[position] = $(n);
}
var id = $(n).attr('id');
if(id == main_id)
{
return;
}
});
var before = true;
var last_moved = $(ui.item[0]);
$(sorter).each(function(i,n){
$(n).show().removeAttr('position');
if($(n).attr('id') == main_id)
{
before = false;
}
else
{
if(before)
$(n).before($(ui.item[0]));
else
$(n).after($(last_moved));
}
last_moved = sorter[i];
});
},
change:function(){
$('.diapo.ui-sortable-placeholderfollow', container).remove();
var n = OrderSelection.length() - 1 ;
while(n > 0)
{
$('<div style="height:130px;" class="diapo ui-sortable-placeholderfollow"></div>').after($('.diapo.ui-sortable-placeholder', container));
n--;
}
} }
var id = $(n).attr('id'); }).disableSelection();
if(id == main_id)
{
return;
}
}); var OrderSelection = new Selectable($('.elements', container), {
selector : '.CHIM'
var before = true;
var last_moved = $(ui.item[0]);
$(sorter).each(function(i,n){
$(n).show().removeAttr('position');
if($(n).attr('id') == main_id)
{
before = false;
}
else
{
if(before)
$(n).before($(ui.item[0]));
else
$(n).after($(last_moved));
}
last_moved = sorter[i];
});
},
change:function(){
$('.diapo.ui-sortable-placeholderfollow', container).remove();
var n = OrderSelection.length() - 1 ;
while(n > 0)
{
$('<div style="height:130px;" class="diapo ui-sortable-placeholderfollow"></div>').after($('.diapo.ui-sortable-placeholder', container));
n--;
}
}
}).disableSelection();
var OrderSelection = new Selectable($('.elements', container), {
selector : '.CHIM'
}); });
$('form[name="reorder"]', container).bind('submit', function(event){ $('form[name="reorder"] button').bind('click', function(event){
var $form = $(this).closest("form");
//$this.SetLoader(true); $('.elements form', container).each(function(i, el){
var id = $('input[name="id"]', $(el)).val();
$('input[name="element[' + id + ']"]', $form).val(i+1);
});
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serializeArray(),
dataType: 'json',
beforeSend:function(){
var $form = $(this); },
success: function(data){
if(!data.success) {
alert(data.message);
}
p4.WorkZone.refresh('current', null, false, 'story');
p4.Dialog.get(1).Close();
$('.elements form', container).each(function(i, el){ return;
var id = $('input[name="id"]', $(el)).val(); },
error: function(){
$('input[name="element[' + id + ']"]', $form).val(i+1); },
timeout: function(){
}
});
return false;
}); });
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serializeArray(),
dataType: 'json',
beforeSend:function(){
},
success: function(data){
if(!data.success)
{
alert(data.message);
}
p4.WorkZone.refresh('current', null, false, 'story');
p4.Dialog.get(1).Close();
return;
},
error: function(){
},
timeout: function(){
}
});
return false;
});
}); });
</script> </script>