may/1KA_F2F
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign - tabela s podatki - puscice za horizontalen scroll

Browse Source
This commit is contained in:
pero1203 2022-03-23 11:17:48 +01:00
parent 1d458c7469
commit b63f7bc39f
4 changed files with 1585 additions and 1538 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
admin/survey/classes/surveyData/class.SurveyDataDisplay.php
View File

@ -1399,9 +1399,8 @@ class SurveyDataDisplay{
# div v katerem po potrebi prikazujemo gumbe za skrolanje levo in desno # div v katerem po potrebi prikazujemo gumbe za skrolanje levo in desno
echo '<div id="dataTableScroller">'; echo '<div id="dataTableScroller">';
echo '<span class="faicon arrow_large2_l icon-as_link pointer" onclick="dataTableScroll(\'left\');return false;"></span>'; echo ' <div class="dataTable_arrow left" onclick="dataTableScroll(\'left\'); return false;"><span class="faicon arrow_large2_l"></span></div>';
echo '&nbsp;&nbsp;&nbsp;&nbsp;'; echo ' <div class="dataTable_arrow right" onclick="dataTableScroll(\'right\'); return false;"><span class="faicon arrow_large2_r"></span></div>';
echo '<span class="faicon arrow_large2_r icon-as_link pointer" onclick="dataTableScroll(\'right\');return false;"></span>';
echo '</div>'; echo '</div>';
$display1kaIcon = self::$displayEditIcons['dataIcons_quick_view'] ; $display1kaIcon = self::$displayEditIcons['dataIcons_quick_view'] ;
@ -1846,12 +1845,9 @@ class SurveyDataDisplay{
// JS za urejanje vnosov (click in hover) (funkciji sta definirani v postProcess.js) // JS za urejanje vnosov (click in hover) (funkciji sta definirani v postProcess.js)
?> ?>
<script> <script>
$('#dataTableScroller').followTo($("#dataTable").position().top - $("#dataTableScroller").height()-25);
dataTableResize(<?=self::$sid?>);
$('#dataTable').bind('contextmenu', function (event) { data_preview_content(event); return false; } );
<?php <?php
if (self::$_VARS[VAR_EDIT] || self::$_VARS[VAR_MONITORING]) if (self::$_VARS[VAR_EDIT] || self::$_VARS[VAR_MONITORING]){
{
?> ?>
$('#dataTable td').click( function (event) { edit_data(event); } ); $('#dataTable td').click( function (event) { edit_data(event); } );
$('#dataTable td').hover( function (event) { edit_data_hover(event) }, function (event) { edit_data_hoverout(event) } ); $('#dataTable td').hover( function (event) { edit_data_hover(event) }, function (event) { edit_data_hoverout(event) } );
@ -1899,6 +1895,7 @@ class SurveyDataDisplay{
?> ?>
</script> </script>
<?php <?php
if ($f) { if ($f) {
fclose($f); fclose($f);
} }
@ -1978,9 +1975,8 @@ class SurveyDataDisplay{
# div v katerem po potrebi prikazujemo gumbe za skrolanje levo in desno # div v katerem po potrebi prikazujemo gumbe za skrolanje levo in desno
echo '<div id="dataTableScroller">'; echo '<div id="dataTableScroller">';
echo '<span class="pointer halfCircleLeft" onclick="dataTableScroll(\'left\');return false;">&lt;</span>'; echo ' <div class="dataTable_arrow left" onclick="dataTableScroll(\'left\'); return false;"><span class="faicon arrow_large2_l"></span></div>';
echo '&nbsp;'; echo ' <div class="dataTable_arrow right" onclick="dataTableScroll(\'right\'); return false;"><span class="faicon arrow_large2_r"></span></div>';
echo '<span class="pointer halfCircleRight" onclick="dataTableScroll(\'right\');return false;">&gt;</span>';
echo '</div>'; echo '</div>';
$display1kaIcon = self::$displayEditIcons['dataIcons_quick_view'] ; $display1kaIcon = self::$displayEditIcons['dataIcons_quick_view'] ;
@ -2500,12 +2496,9 @@ class SurveyDataDisplay{
// JS za urejanje vnosov (click in hover) (funkciji sta definirani v postProcess.js) // JS za urejanje vnosov (click in hover) (funkciji sta definirani v postProcess.js)
?> ?>
<script> <script>
$('#dataTableScroller').followTo($("#dataTable").position().top - $("#dataTableScroller").height()-25);
dataTableResize(<?=self::$sid?>);
$('#dataTable').bind('contextmenu', function (event) { data_preview_content(event); return false; } );
<?php <?php
if (self::$_VARS[VAR_EDIT] || self::$_VARS[VAR_MONITORING]) if (self::$_VARS[VAR_EDIT] || self::$_VARS[VAR_MONITORING]){
{
?> ?>
$('#dataTable td').click( function (event) { edit_data(event); } ); $('#dataTable td').click( function (event) { edit_data(event); } );
$('#dataTable td').hover( function (event) { edit_data_hover(event) }, function (event) { edit_data_hoverout(event) } ); $('#dataTable td').hover( function (event) { edit_data_hover(event) }, function (event) { edit_data_hoverout(event) } );
@ -2544,6 +2537,8 @@ class SurveyDataDisplay{
?> ?>
</script> </script>
<?php <?php
if ($f) { if ($f) {
fclose($f); fclose($f);
} }

37
admin/survey/script/script_analiza.js
View File

@ -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'){ if (where == 'left'){
//$(window).scrollTo('-=500px', 300, { axis:'x' }); var leftPos = $('#tableContainer').scrollLeft();
$("#tableContainer").animate({scrollLeft: leftPos - scroll_width}, 600);
var leftPos = $('html').scrollLeft();
$("html").animate({scrollLeft: leftPos - 700}, 800);
} }
if (where == 'right'){ if (where == 'right'){
//$(window).scrollTo('+=500px', 300, { axis:'x' }); var leftPos = $('#tableContainer').scrollLeft();
$("#tableContainer").animate({scrollLeft: leftPos + scroll_width}, 600);
}
}
var leftPos = $('html').scrollLeft();
$("html").animate({scrollLeft: leftPos + 700}, 800);
}
}

2848
public/css/admin_new.css
View File

File diff suppressed because it is too large Load Diff

41
resources/sass/admin_new/pages/survey_data/data_table.scss
View File

@ -5,6 +5,47 @@
#tableContainer{ #tableContainer{
overflow-x: auto; 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#dataTable {
table-layout: fixed; table-layout: fixed;