Only execute dragdrop.js if device does not support touch events.

Also hide noscript controls for plugin manager differently, but show
them on no-js and touch devices. This is supposed to compensate the
fact that the dragdrop JS does not work on touch devices. Might need
a better solution long-term here.
This commit is contained in:
Matthias Mees 2014-01-20 12:32:36 +01:00
parent 98e2d2fd7c
commit c731c371d3
3 changed files with 40 additions and 27 deletions

View File

@ -1,29 +1,31 @@
$("document").ready(function() { $("document").ready(function() {
$('.pluginmanager_sidebar .pluginmanager_container').sortable(getDragdropConfiguration('plugins_sidebar')); if (! Modernizr.touch){
$('.pluginmanager_event .pluginmanager_container').sortable(getDragdropConfiguration('plugins_event')); $('.pluginmanager_sidebar .pluginmanager_container').sortable(getDragdropConfiguration('plugins_sidebar'));
$('.configuration_group .pluginmanager_container').sortable(getDragdropConfiguration('plugins_event')); $('.pluginmanager_event .pluginmanager_container').sortable(getDragdropConfiguration('plugins_event'));
$('.configuration_group .pluginmanager_container').sortable(getDragdropConfiguration('plugins_event'));
function getDragdropConfiguration(group) { function getDragdropConfiguration(group) {
return { return {
containerSelector: '.pluginmanager_container', containerSelector: '.pluginmanager_container',
group: group, group: group,
handle: '.pluginmanager_grablet', handle: '.pluginmanager_grablet',
onDrop: function ($item, container, _super) { onDrop: function ($item, container, _super) {
var placement = $item.parents('.pluginmanager_container').data("placement"); var placement = $item.parents('.pluginmanager_container').data("placement");
$item.find('input[name$="placement]"]').val(placement); $item.find('input[name$="placement]"]').val(placement);
$item.removeClass("dragged").removeAttr("style") $item.removeClass("dragged").removeAttr("style")
$("body").removeClass("dragging") $("body").removeClass("dragging")
$.autoscroll.stop(); $.autoscroll.stop();
}, },
onDragStart: function ($item, container, _super) { onDragStart: function ($item, container, _super) {
$.autoscroll.init(); $.autoscroll.init();
$item.css({ $item.css({
height: $item.height(), height: $item.height(),
width: $item.width() width: $item.width()
}) })
$item.addClass("dragged") $item.addClass("dragged")
$("body").addClass("dragging") $("body").addClass("dragging")
}
} }
} }
} }

View File

@ -56,8 +56,7 @@
{/if} {/if}
</li> </li>
<noscript> <li class="pluginmanager_place nojs-controls">
<li class="pluginmanager_place">
<select name="serendipity[placement][{$plugin_data['name']}]"> <select name="serendipity[placement][{$plugin_data['name']}]">
{foreach $plugin_data.gopts as $k => $v} {foreach $plugin_data.gopts as $k => $v}
{if {$plugin_data.is_plugin_editable} && $k == 'hide'} {if {$plugin_data.is_plugin_editable} && $k == 'hide'}
@ -67,7 +66,7 @@
{/foreach} {/foreach}
</select> </select>
</li> </li>
<li class="pluginmanager_move"> <li class="pluginmanager_move nojs-controls">
{if $plugin_data.sort_idx == 0} {if $plugin_data.sort_idx == 0}
{else} {else}
<a href="?{$serendipity_setFormTokenUrl}&amp;serendipity[adminModule]=plugins&amp;submit=move+up&amp;serendipity[plugin_to_move]={$plugin_data.key}{if $event_only}&amp;serendipity[event_plugin]=true{/if}"> <a href="?{$serendipity_setFormTokenUrl}&amp;serendipity[adminModule]=plugins&amp;submit=move+up&amp;serendipity[plugin_to_move]={$plugin_data.key}{if $event_only}&amp;serendipity[event_plugin]=true{/if}">
@ -82,7 +81,6 @@
</a> {* i18n *} </a> {* i18n *}
{/if} {/if}
</li> </li>
</noscript>
</ul> </ul>
</li> </li>
{/foreach} {/foreach}

View File

@ -1933,6 +1933,19 @@ form > .button_link:first-of-type,
z-index: 2000; z-index: 2000;
} }
/* Touch/no-js fallback */
.nojs-controls,
.touch .pluginmanager_grablet {
display: none;
visibility: hidden;
}
.no-js .nojs-controls,
.touch .nojs-controls {
display: block;
visibility: visible;
}
/* MEDIA DB /* MEDIA DB
----------------------------------------------------------------- */ ----------------------------------------------------------------- */