Redesign - tabela s podatki - puscice za horizontalen scroll
This commit is contained in:
pero1203
parent
1d458c7469
commit
b63f7bc39f
@ -1399,9 +1399,8 @@ class SurveyDataDisplay{
|
||||
|
||||
# div v katerem po potrebi prikazujemo gumbe za skrolanje levo in desno
|
||||
echo '<div id="dataTableScroller">';
|
||||
echo '<span class="faicon arrow_large2_l icon-as_link pointer" onclick="dataTableScroll(\'left\');return false;"></span>';
|
||||
echo ' ';
|
||||
echo '<span class="faicon arrow_large2_r icon-as_link pointer" onclick="dataTableScroll(\'right\');return false;"></span>';
|
||||
echo ' <div class="dataTable_arrow left" onclick="dataTableScroll(\'left\'); return false;"><span class="faicon arrow_large2_l"></span></div>';
|
||||
echo ' <div class="dataTable_arrow right" onclick="dataTableScroll(\'right\'); return false;"><span class="faicon arrow_large2_r"></span></div>';
|
||||
echo '</div>';
|
||||
|
||||
$display1kaIcon = self::$displayEditIcons['dataIcons_quick_view'] ;
|
||||
@ -1846,59 +1845,57 @@ class SurveyDataDisplay{
|
||||
// JS za urejanje vnosov (click in hover) (funkciji sta definirani v postProcess.js)
|
||||
?>
|
||||
<script>
|
||||
$('#dataTableScroller').followTo($("#dataTable").position().top - $("#dataTableScroller").height()-25);
|
||||
dataTableResize(<?=self::$sid?>);
|
||||
$('#dataTable').bind('contextmenu', function (event) { data_preview_content(event); return false; } );
|
||||
<?php
|
||||
if (self::$_VARS[VAR_EDIT] || self::$_VARS[VAR_MONITORING])
|
||||
{
|
||||
?>
|
||||
$('#dataTable td').click( function (event) { edit_data(event); } );
|
||||
$('#dataTable td').hover( function (event) { edit_data_hover(event) }, function (event) { edit_data_hoverout(event) } );
|
||||
edit_data_inline_edit(); // manj utripne, ce takoj za tabelo poklicemo brez cakanja na dom ready
|
||||
$('#dataTable tr:nth-child(3) th').hover( function (event) { data_header_hover(event) }, function (event) { data_header_hoverout(event) } );
|
||||
$('#dataTable tr:nth-child(3) th').live('click', function(event) { data_header_click(event); } );
|
||||
<?php
|
||||
} elseif (self::$_VARS[VAR_CODING]) {
|
||||
?>
|
||||
$('#dataTable tbody tr td').click( function (event) { coding_click( $(this), event ) } );
|
||||
|
||||
$('#dataTable tr:nth-child(3) th').hover( function (event) { data_header_hover(event) }, function (event) { data_header_hoverout(event) } );
|
||||
$('#dataTable tr:nth-child(3) th').live('click', function(event) { data_header_click(event); } );
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
$('#dataTable tr:nth-child(3) th').hover( function (event) { data_header_hover(event) }, function (event) { data_header_hoverout(event) } );
|
||||
$('#dataTable tr:nth-child(3) th').live('click', function(event) { data_header_click(event); } );
|
||||
<?php
|
||||
}
|
||||
<?php
|
||||
if (self::$_VARS[VAR_EDIT] || self::$_VARS[VAR_MONITORING]){
|
||||
?>
|
||||
$('#dataTable td').click( function (event) { edit_data(event); } );
|
||||
$('#dataTable td').hover( function (event) { edit_data_hover(event) }, function (event) { edit_data_hoverout(event) } );
|
||||
edit_data_inline_edit(); // manj utripne, ce takoj za tabelo poklicemo brez cakanja na dom ready
|
||||
$('#dataTable tr:nth-child(3) th').hover( function (event) { data_header_hover(event) }, function (event) { data_header_hoverout(event) } );
|
||||
$('#dataTable tr:nth-child(3) th').live('click', function(event) { data_header_click(event); } );
|
||||
<?php
|
||||
} elseif (self::$_VARS[VAR_CODING]) {
|
||||
?>
|
||||
$('#dataTable tbody tr td').click( function (event) { coding_click( $(this), event ) } );
|
||||
|
||||
?>
|
||||
$('#dataTable td.enkaIcon span.quick_view').click( function (event) { showSurveyAnswers(event); } );
|
||||
var sort_action_url = '<?php echo 'index.php?anketa='.self::$sid.'&a='.A_COLLECT_DATA.'&m='.self::$subAction.self::getVarsNoSort();?>'
|
||||
<?php
|
||||
if (self::$_VARS[VAR_META]) {
|
||||
echo "postProcessAddLurkerTitles(".(self::$_VARS[VAR_RELEVANCE] && self::$canDisplayRelevance ? (4+(int)self::$_VARS[VAR_EMAIL]) : (3+(int)self::$_VARS[VAR_EMAIL])).");\n";
|
||||
}
|
||||
$('#dataTable tr:nth-child(3) th').hover( function (event) { data_header_hover(event) }, function (event) { data_header_hoverout(event) } );
|
||||
$('#dataTable tr:nth-child(3) th').live('click', function(event) { data_header_click(event); } );
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
$('#dataTable tr:nth-child(3) th').hover( function (event) { data_header_hover(event) }, function (event) { data_header_hoverout(event) } );
|
||||
$('#dataTable tr:nth-child(3) th').live('click', function(event) { data_header_click(event); } );
|
||||
<?php
|
||||
}
|
||||
|
||||
# pobarvamo celice in dodamo title za statuse
|
||||
echo "postProcessAddTitles();\n";
|
||||
echo "postProcessAddMetaTitles();\n";
|
||||
?>
|
||||
$('#dataTable td.enkaIcon span.quick_view').click( function (event) { showSurveyAnswers(event); } );
|
||||
var sort_action_url = '<?php echo 'index.php?anketa='.self::$sid.'&a='.A_COLLECT_DATA.'&m='.self::$subAction.self::getVarsNoSort();?>'
|
||||
<?php
|
||||
if (self::$_VARS[VAR_META]) {
|
||||
echo "postProcessAddLurkerTitles(".(self::$_VARS[VAR_RELEVANCE] && self::$canDisplayRelevance ? (4+(int)self::$_VARS[VAR_EMAIL]) : (3+(int)self::$_VARS[VAR_EMAIL])).");\n";
|
||||
}
|
||||
|
||||
// Pobarvamo sistemske identifikatorje
|
||||
if(self::$_HEADERS['_settings']['force_show_hiden_system'] == '1')
|
||||
echo "postProcessAddSystem(".json_encode($system_columns).");\n";
|
||||
# pobarvamo celice in dodamo title za statuse
|
||||
echo "postProcessAddTitles();\n";
|
||||
echo "postProcessAddMetaTitles();\n";
|
||||
|
||||
if (self::$_VARS[VAR_RELEVANCE] && self::$canDisplayRelevance) {
|
||||
echo "postProcessAddRelevanceTitles();\n";
|
||||
}
|
||||
if (self::$_VARS[VAR_EMAIL]) {
|
||||
echo "postProcessAddEmailTitles(".(self::$_VARS[VAR_RELEVANCE] && self::$canDisplayRelevance ? 3 : 2).");\n";
|
||||
}
|
||||
// Pobarvamo sistemske identifikatorje
|
||||
if(self::$_HEADERS['_settings']['force_show_hiden_system'] == '1')
|
||||
echo "postProcessAddSystem(".json_encode($system_columns).");\n";
|
||||
|
||||
?>
|
||||
if (self::$_VARS[VAR_RELEVANCE] && self::$canDisplayRelevance) {
|
||||
echo "postProcessAddRelevanceTitles();\n";
|
||||
}
|
||||
if (self::$_VARS[VAR_EMAIL]) {
|
||||
echo "postProcessAddEmailTitles(".(self::$_VARS[VAR_RELEVANCE] && self::$canDisplayRelevance ? 3 : 2).");\n";
|
||||
}
|
||||
|
||||
?>
|
||||
</script>
|
||||
<?php
|
||||
|
||||
if ($f) {
|
||||
fclose($f);
|
||||
}
|
||||
@ -1978,9 +1975,8 @@ class SurveyDataDisplay{
|
||||
|
||||
# div v katerem po potrebi prikazujemo gumbe za skrolanje levo in desno
|
||||
echo '<div id="dataTableScroller">';
|
||||
echo '<span class="pointer halfCircleLeft" onclick="dataTableScroll(\'left\');return false;"><</span>';
|
||||
echo ' ';
|
||||
echo '<span class="pointer halfCircleRight" onclick="dataTableScroll(\'right\');return false;">></span>';
|
||||
echo ' <div class="dataTable_arrow left" onclick="dataTableScroll(\'left\'); return false;"><span class="faicon arrow_large2_l"></span></div>';
|
||||
echo ' <div class="dataTable_arrow right" onclick="dataTableScroll(\'right\'); return false;"><span class="faicon arrow_large2_r"></span></div>';
|
||||
echo '</div>';
|
||||
|
||||
$display1kaIcon = self::$displayEditIcons['dataIcons_quick_view'] ;
|
||||
@ -2499,51 +2495,50 @@ class SurveyDataDisplay{
|
||||
|
||||
// JS za urejanje vnosov (click in hover) (funkciji sta definirani v postProcess.js)
|
||||
?>
|
||||
<script>
|
||||
$('#dataTableScroller').followTo($("#dataTable").position().top - $("#dataTableScroller").height()-25);
|
||||
dataTableResize(<?=self::$sid?>);
|
||||
$('#dataTable').bind('contextmenu', function (event) { data_preview_content(event); return false; } );
|
||||
<?php
|
||||
if (self::$_VARS[VAR_EDIT] || self::$_VARS[VAR_MONITORING])
|
||||
{
|
||||
?>
|
||||
$('#dataTable td').click( function (event) { edit_data(event); } );
|
||||
$('#dataTable td').hover( function (event) { edit_data_hover(event) }, function (event) { edit_data_hoverout(event) } );
|
||||
edit_data_inline_edit(); // manj utripne, ce takoj za tabelo poklicemo brez cakanja na dom ready
|
||||
$('#dataTable tr:nth-child(3) th').hover( function (event) { data_header_hover(event) }, function (event) { data_header_hoverout(event) } );
|
||||
$('#dataTable tr:nth-child(3) th').live('click', function(event) { data_header_click(event); } );
|
||||
<?php
|
||||
} elseif (self::$_VARS[VAR_CODING]) {
|
||||
?>
|
||||
$('#dataTable tbody tr td').click( function (event) { coding_click( $(this), event ) } );
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
$('#dataTable tr:nth-child(3) th').hover( function (event) { data_header_hover(event) }, function (event) { data_header_hoverout(event) } );
|
||||
$('#dataTable tr:nth-child(3) th').live('click', function(event) { data_header_click(event); } );
|
||||
<?php
|
||||
}
|
||||
<script>
|
||||
|
||||
?>
|
||||
$('#dataTable td.enkaIcon span.quick_view').click( function (event) { showSurveyAnswers(event); } );
|
||||
var sort_action_url = '<?php echo 'index.php?anketa='.self::$sid.'&a='.A_COLLECT_DATA.'&m='.self::$subAction.self::getVarsNoSort();?>'
|
||||
<?php
|
||||
if (self::$_VARS[VAR_META]) {
|
||||
echo "postProcessAddLurkerTitles(".(self::$_VARS[VAR_RELEVANCE] && self::$canDisplayRelevance ? (4+(int)self::$_VARS[VAR_EMAIL]) : (3+(int)self::$_VARS[VAR_EMAIL])).");\n";
|
||||
}
|
||||
<?php
|
||||
if (self::$_VARS[VAR_EDIT] || self::$_VARS[VAR_MONITORING]){
|
||||
?>
|
||||
$('#dataTable td').click( function (event) { edit_data(event); } );
|
||||
$('#dataTable td').hover( function (event) { edit_data_hover(event) }, function (event) { edit_data_hoverout(event) } );
|
||||
edit_data_inline_edit(); // manj utripne, ce takoj za tabelo poklicemo brez cakanja na dom ready
|
||||
$('#dataTable tr:nth-child(3) th').hover( function (event) { data_header_hover(event) }, function (event) { data_header_hoverout(event) } );
|
||||
$('#dataTable tr:nth-child(3) th').live('click', function(event) { data_header_click(event); } );
|
||||
<?php
|
||||
} elseif (self::$_VARS[VAR_CODING]) {
|
||||
?>
|
||||
$('#dataTable tbody tr td').click( function (event) { coding_click( $(this), event ) } );
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
$('#dataTable tr:nth-child(3) th').hover( function (event) { data_header_hover(event) }, function (event) { data_header_hoverout(event) } );
|
||||
$('#dataTable tr:nth-child(3) th').live('click', function(event) { data_header_click(event); } );
|
||||
<?php
|
||||
}
|
||||
|
||||
# pobarvamo celice in dodamo title za statuse
|
||||
echo "postProcessAddMetaTitles();\n";
|
||||
?>
|
||||
$('#dataTable td.enkaIcon span.quick_view').click( function (event) { showSurveyAnswers(event); } );
|
||||
var sort_action_url = '<?php echo 'index.php?anketa='.self::$sid.'&a='.A_COLLECT_DATA.'&m='.self::$subAction.self::getVarsNoSort();?>'
|
||||
<?php
|
||||
if (self::$_VARS[VAR_META]) {
|
||||
echo "postProcessAddLurkerTitles(".(self::$_VARS[VAR_RELEVANCE] && self::$canDisplayRelevance ? (4+(int)self::$_VARS[VAR_EMAIL]) : (3+(int)self::$_VARS[VAR_EMAIL])).");\n";
|
||||
}
|
||||
|
||||
if (self::$_VARS[VAR_RELEVANCE] && self::$canDisplayRelevance) {
|
||||
echo "postProcessAddRelevanceTitles();\n";
|
||||
}
|
||||
if (self::$_VARS[VAR_EMAIL]) {
|
||||
echo "postProcessAddEmailTitles(".(self::$_VARS[VAR_RELEVANCE] && self::$canDisplayRelevance ? 3 : 2).");\n";
|
||||
}
|
||||
?>
|
||||
# pobarvamo celice in dodamo title za statuse
|
||||
echo "postProcessAddMetaTitles();\n";
|
||||
|
||||
if (self::$_VARS[VAR_RELEVANCE] && self::$canDisplayRelevance) {
|
||||
echo "postProcessAddRelevanceTitles();\n";
|
||||
}
|
||||
if (self::$_VARS[VAR_EMAIL]) {
|
||||
echo "postProcessAddEmailTitles(".(self::$_VARS[VAR_RELEVANCE] && self::$canDisplayRelevance ? 3 : 2).");\n";
|
||||
}
|
||||
?>
|
||||
</script>
|
||||
<?php
|
||||
<?php
|
||||
|
||||
|
||||
if ($f) {
|
||||
fclose($f);
|
||||
}
|
||||
|
||||
@ -1364,37 +1364,18 @@ $.fn.followTo = function ( pos ) {
|
||||
};
|
||||
|
||||
|
||||
// Horizontalen scroll tabele s podatki pri kliku na puscice
|
||||
function dataTableScroll(where){
|
||||
|
||||
var scroll_width = $(window).width() / 4 * 3;
|
||||
|
||||
/**
|
||||
* Copyright (c) 2007-2012 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
|
||||
* Dual licensed under MIT and GPL.
|
||||
* @author Ariel Flesler
|
||||
* @version 1.4.3.1
|
||||
*/
|
||||
//(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
|
||||
|
||||
|
||||
/**
|
||||
* Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
|
||||
* Licensed under MIT
|
||||
* @author Ariel Flesler
|
||||
* @version 1.4.14
|
||||
*/
|
||||
//(function(k){'use strict';k(['jquery'],function($){var j=$.scrollTo=function(a,b,c){return $(window).scrollTo(a,b,c)};j.defaults={axis:'xy',duration:0,limit:!0};j.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(f,g,h){if(typeof g=='object'){h=g;g=0}if(typeof h=='function')h={onAfter:h};if(f=='max')f=9e9;h=$.extend({},j.defaults,h);g=g||h.duration;h.queue=h.queue&&h.axis.length>1;if(h.queue)g/=2;h.offset=both(h.offset);h.over=both(h.over);return this._scrollable().each(function(){if(f==null)return;var d=this,$elem=$(d),targ=f,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=win?$(targ):$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}var e=$.isFunction(h.offset)&&h.offset(d,targ)||h.offset;$.each(h.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=j.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(h.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=e[pos]||0;if(h.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*h.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(h.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&h.queue){if(old!=attr[key])animate(h.onAfterFirst);delete attr[key]}});animate(h.onAfter);function animate(a){$elem.animate(attr,g,h.easing,a&&function(){a.call(this,targ,h)})}}).end()};j.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}return j})}(typeof define==='function'&&define.amd?define:function(a,b){if(typeof module!=='undefined'&&module.exports){module.exports=b(require('jquery'))}else{b(jQuery)}}));
|
||||
|
||||
function dataTableScroll(where)
|
||||
{
|
||||
if (where == 'left'){
|
||||
//$(window).scrollTo('-=500px', 300, { axis:'x' });
|
||||
|
||||
var leftPos = $('html').scrollLeft();
|
||||
$("html").animate({scrollLeft: leftPos - 700}, 800);
|
||||
var leftPos = $('#tableContainer').scrollLeft();
|
||||
$("#tableContainer").animate({scrollLeft: leftPos - scroll_width}, 600);
|
||||
}
|
||||
if (where == 'right'){
|
||||
//$(window).scrollTo('+=500px', 300, { axis:'x' });
|
||||
|
||||
var leftPos = $('html').scrollLeft();
|
||||
$("html").animate({scrollLeft: leftPos + 700}, 800);
|
||||
var leftPos = $('#tableContainer').scrollLeft();
|
||||
$("#tableContainer").animate({scrollLeft: leftPos + scroll_width}, 600);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -5,6 +5,47 @@
|
||||
#tableContainer{
|
||||
overflow-x: auto;
|
||||
|
||||
// Puscice za scroll
|
||||
#dataTableScroller{
|
||||
position: fixed;
|
||||
top: calc(50% - 85px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
.dataTable_arrow{
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 170px;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.69);
|
||||
|
||||
transition: 0.2s;
|
||||
|
||||
&.left{
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.right{
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.faicon:before{
|
||||
color: $white;
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table#dataTable {
|
||||
table-layout: fixed;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user