r4121 - in trunk/plugins/ullCorePlugin: i18n lib/form/widget web/css web/js

[s...@ull.at]

Author: klemens
Date: 2014-06-27 14:18:11 +0200 (Fri, 27 Jun 2014)
New Revision: 4121

Modified:
trunk/plugins/ullCorePlugin/i18n/ullCoreMessages.de.xml
trunk/plugins/ullCorePlugin/lib/form/widget/ullWidgetManyToManyWrite.class.php
trunk/plugins/ullCorePlugin/web/css/main_multi_format.css
trunk/plugins/ullCorePlugin/web/js/ullWidgetManyToManySortable.js
Log:
Improved many to many sortable widget

Modified: trunk/plugins/ullCorePlugin/i18n/ullCoreMessages.de.xml
===================================================================
--- trunk/plugins/ullCorePlugin/i18n/ullCoreMessages.de.xml 2014-06-27 11:41:11 UTC (rev 4120)
+++ trunk/plugins/ullCorePlugin/i18n/ullCoreMessages.de.xml 2014-06-27 12:18:11 UTC (rev 4121)
@@ -870,8 +870,24 @@
<trans-unit id="3701">
<source>Manage entries</source>
<target>Einträge verwalten</target>
- </trans-unit>
+ </trans-unit>

+ <trans-unit id="3702">
+ <source>Available</source>
+ <target>Verfügbar</target>
+ </trans-unit>
+
+ <trans-unit id="3703">
+ <source>Selected</source>
+ <target>Ausgewählt</target>
+ </trans-unit>
+
+ <trans-unit id="3704">
+ <source>Click to select or deselect entries. Drag selected entries arout to order.</source>
+ <target>Klicken Sie auf Einträge um sie an- oder abzuwählen. Ziehen Sie ausgewählte Einträge mit der Maus in die richtige Reihenfolge.</target>
+ </trans-unit>
+
+
<!-- ullWidgetFCKEditor -->
<trans-unit id="3801">
<source>[SHIFT %arrow%] - [ENTER] creates a single line break</source>

Modified: trunk/plugins/ullCorePlugin/lib/form/widget/ullWidgetManyToManyWrite.class.php
===================================================================
--- trunk/plugins/ullCorePlugin/lib/form/widget/ullWidgetManyToManyWrite.class.php 2014-06-27 11:41:11 UTC (rev 4120)
+++ trunk/plugins/ullCorePlugin/lib/form/widget/ullWidgetManyToManyWrite.class.php 2014-06-27 12:18:11 UTC (rev 4121)
@@ -59,6 +59,8 @@
$this->addOption('filter_config',
"{ label : '" . __('Search', null, 'common') . ":' }");
$this->addOption('filter_results');
+
+ // Use separate sortable widget for multiselect in a particular order
$this->addOption('is_sortable', false);


@@ -261,17 +263,26 @@
// Sortable mode
elseif ($this->getOption('is_sortable'))
{
+ // hidden multi select html form field
$return = parent::render($name, $value, $attributes, $errors);

+ $translations = array(
+ 'available' => __('Available', null, 'ullCoreMessages'),
+ 'selected' => __('Selected', null, 'ullCoreMessages'),
+ );
+
+ $translationsJson = json_encode($translations);
+
$return .= sprintf(<<<EOF
<script type="text/javascript">
jQuery(document).ready(function() {
- manyToManySortableSetup("%s");
+ manyToManySortableSetup("%s", %s);
});
</script>
EOF
,
- $htmlId
+ $htmlId,
+ $translationsJson
);



Modified: trunk/plugins/ullCorePlugin/web/css/main_multi_format.css
===================================================================
--- trunk/plugins/ullCorePlugin/web/css/main_multi_format.css 2014-06-27 11:41:11 UTC (rev 4120)
+++ trunk/plugins/ullCorePlugin/web/css/main_multi_format.css 2014-06-27 12:18:11 UTC (rev 4121)
@@ -1128,9 +1128,16 @@
display: none;
}

-.many_to_many_box {
+.many_to_many_sortable_label_box {
display: inline-block;
width: 200px;
+ margin: 0 30px .5em 0 ;
+ text-align: center;
+}
+
+.many_to_many_sortable_box {
+ display: inline-block;
+ width: 200px;
height: 80px;
overflow: auto;
list-style-type: none;
@@ -1141,7 +1148,7 @@

}

-.many_to_many_box li {
+.many_to_many_sortable_box li {
margin: 0;
padding: 0;
cursor: pointer;

Modified: trunk/plugins/ullCorePlugin/web/js/ullWidgetManyToManySortable.js
===================================================================
--- trunk/plugins/ullCorePlugin/web/js/ullWidgetManyToManySortable.js 2014-06-27 11:41:11 UTC (rev 4120)
+++ trunk/plugins/ullCorePlugin/web/js/ullWidgetManyToManySortable.js 2014-06-27 12:18:11 UTC (rev 4121)
@@ -6,10 +6,11 @@
* @param id form field html id
* @returns
*/
-function manyToManySortable(id)
+function manyToManySortable(id, translations)
{
// PROPERTIES
var id = id;
+ var translations = translations;
var multiselect = $('#' + id);

var selectedOptions = [];
@@ -45,6 +46,18 @@
};


+ var renderLabels = function () {
+ var html = '<div class="many_to_many_sortable_label_box">' +
+ translations['available'] +
+ '</div>' +
+ '<div class="many_to_many_sortable_label_box">' +
+ translations['selected'] +
+ '</div>'
+
+ $(multiselect).before(html);
+ }
+
+
/**
* Create list of selected options from the main data array
*/
@@ -52,7 +65,7 @@

var selectedHtml = '<ul ' +
'id="' + id + '_selected" ' +
- 'class="many_to_many_box many_to_many_sortable_selected"' +
+ 'class="many_to_many_sortable_box many_to_many_sortable_selected"' +
'>';
$(selectedOptions).each(function(i, option) {
selectedHtml += '<li rel="' + selectedValues[i] + '">'
@@ -107,7 +120,7 @@

var unselectedHtml = '<ul ' +
'id="' + id + '_unselected" ' +
- 'class="many_to_many_box many_to_many_sortable_unselected"' +
+ 'class="many_to_many_sortable_box many_to_many_sortable_unselected"' +
'>';
$(unselectedOptions).each(function(i, option) {
unselectedHtml += '<li rel="' + unselectedValues[i] + '">'
@@ -229,6 +242,8 @@
saveOriginalSelectedOptions();
saveOriginalUnselectedOptions();

+ renderLabels();
+
updateUnselectedList();
updateSelectedList();

@@ -243,9 +258,9 @@
*
* @param id form field html id
*/
-function manyToManySortableSetup(id)
+function manyToManySortableSetup(id, translations)
{
- var multisort = new manyToManySortable(id);
+ var multisort = new manyToManySortable(id, translations);
}