MediaWiki:Common.js — различия между версиями

Материал из СисадминВики песочница
Перейти к: навигация, поиск
(Новая страница: « $("#but1").click(function (event) { if ($("#win1").is(':visible')) { $("#win1").hide('slow'); } else { $("#win1").show…»)
 
 
(не показаны 133 промежуточные версии 3 участников)
Строка 1: Строка 1:
     $("#but1").click(function (event) {
+
/**
        if ($("#win1").is(':visible')) {
+
* Slide panel with 2 buttons
            $("#win1").hide('slow');
+
*/
        } else {
+
     var maximumWidthText = $("#text").width();
            $("#win1").show('slow');
+
    var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width();
            if ($("#win2").is(':visible')) {
+
    var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width();
                $("#win2").hide('slow');
+
    var maxHeightBlock = 0;
            }
+
    var maxHeightBlockb = 0;
        }
+
    var indent = document.body.offsetWidth - $('#aside1').offset().left - $('#aside1').width();
 +
    $(function() {
 +
        $("#toc").css("display",'block');
 +
        $("#toc").css("overflow",'scroll');  
  
 
     });
 
     });
  
    $("#but2").click(function (event) {
+
 
 +
$("#but1").click(function (event) {
 +
    if ($("#win1").is(':visible')) {
 +
        $("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );
 +
        $("#win1").hide('slow');
 +
        $('#text').animate({
 +
            width : maximumWidthText, 
 +
        });
 +
 
 +
    } else {
 +
        $("#but1").removeClass( "info_but" ).addClass( "info_but_pressed" );
 +
        $("#win1").show('slow');
 +
        $('#text').animate({
 +
          width : maximumWidthTextWithWin1},
 +
          function(){
 +
var ff= 0;
 +
            if (z - $(window).scrollTop() < 0) {
 +
            if (navigator.userAgent.search(/Firefox/) > -1) {
 +
        ff= 99;
 +
        }       
 +
            scrl = 0;
 +
            posit = $("#block").position().top
 +
            posit2 = $("#toc").position().top
 +
            } else {
 +
            scrl = $(window).scrollTop();
 +
            posit = $("#block").offset().top
 +
        posit2 = $("#toc").offset().top
 +
    }
 +
var xx = document.body.offsetHeight -(posit+17) + scrl -ff;
 +
    var xxb = document.body.offsetHeight -(posit2+26);
 +
    $("#block").css("max-height",xx+'px');
 +
    $("#toc").css("max-height",xxb+'px');
 +
    maxHeightBlock = xx;
 +
    maxHeightBlockb = xxb;
 +
        }
 +
        );
 +
 
 
         if ($("#win2").is(':visible')) {
 
         if ($("#win2").is(':visible')) {
 
             $("#win2").hide('slow');
 
             $("#win2").hide('slow');
         } else {
+
            $("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );
            $("#win2").show('slow');
+
        }
            if ($("#win1").is(':visible')) {
+
    }
                $("#win1").hide('slow');
+
       
            }
+
 
 +
});
 +
 
 +
$("#but2").click(function (event) {
 +
    if ($("#win2").is(':visible')) {
 +
        $("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );
 +
        $("#win2").hide('slow');
 +
         $('#text').animate({
 +
            width : maximumWidthText, 
 +
        });
 +
 
 +
    } else {
 +
        $("#but2").removeClass( "toc_but" ).addClass( "toc_but_pressed" );
 +
        $("#win2").show('slow');
 +
        $('#text').animate({
 +
          width : maximumWidthTextWithWin2,
 +
        });
 +
 
 +
        if ($("#win1").is(':visible')) {
 +
            $("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );
 +
            $("#win1").hide('slow');
 
         }
 
         }
 +
    }
 +
    var ff = 0;
 +
    if (z - $(window).scrollTop() < 0) {
 +
            if (navigator.userAgent.search(/Firefox/) > -1) {
 +
        ff= 46;
 +
        }       
 +
   
 +
    scrl = 0;
 +
        pos = $("#block").position().top
 +
        pos2 = $("#toc").position().top
 +
    } else {
 +
    scrl = $(window).scrollTop();
 +
        pos = $("#block").offset().top
 +
        pos2 = $("#toc").offset().top
 +
    }
 +
    var xx = document.body.offsetHeight -(pos+17) ;
 +
    var xxb = document.body.offsetHeight -(pos2+26) +scrl -ff;
 +
    $("#block").css("max-height",xx+'px');
 +
   
 +
    $("#toc").css("max-height",xxb+'px');
 +
    maxHeightBlock = xx;
 +
    maxHeightBlockb = xxb;
 +
   
 +
});
  
    });
+
var z = $("#aside1").offset().top;
  
 
(function(){  // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными
 
(function(){  // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными
        var a = document.querySelector('#aside1'), b = null;  // селектор блока, который нужно закрепить
+
    var a = document.querySelector('#aside1'), b = null;  // селектор блока, который нужно закрепить
        window.addEventListener('scroll', Ascroll, false);
+
 
        document.body.addEventListener('scroll', Ascroll, false);  // если у html и body высота равна 100%
+
    window.addEventListener('scroll', Ascroll, false);
        function Ascroll() {
+
    document.body.addEventListener('scroll', Ascroll, false);  // если у html и body высота равна 100%
            if (b == null) {  // добавить потомка-обёртку, чтобы убрать зависимость с соседями
+
    function Ascroll() {
                var Sa = getComputedStyle(a, ''), s = '';
+
        if (b === null) {  // добавить потомка-обёртку, чтобы убрать зависимость с соседями
                for (var i = 0; i < Sa.length; i++) {  // перечислить стили CSS, которые нужно скопировать с родителя
+
            var Sa = getComputedStyle(a, ''), s = '';
                    if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
+
            for (var i = 0; i < Sa.length; i++) {  // перечислить стили CSS, которые нужно скопировать с родителя
                        s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
+
                if (Sa[i].indexOf('overflow') === 0 || Sa[i].indexOf('padding') === 0 || Sa[i].indexOf('border') === 0 || Sa[i].indexOf('outline') === 0 || Sa[i].indexOf('box-shadow') === 0 || Sa[i].indexOf('background') === 0) {
                    }
+
                    s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
 
                 }
 
                 }
                b = document.createElement('div');  // создать потомка
 
                var kk = a.offsetWidth;
 
                b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
 
                a.insertBefore(b, a.firstChild);  // поместить потомка в цепляющийся блок первым
 
                var l = a.childNodes.length;
 
                for (var i = 1; i < l; i++) {  // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты)
 
                    b.appendChild(a.childNodes[1]);
 
                }
 
                a.style.height = b.getBoundingClientRect().height + 'px';  // если под скользящим элементом есть другие блоки, можно своё значение
 
                a.style.padding = '0';
 
                a.style.border = '0';  // если элементу присвоен padding или border
 
 
             }
 
             }
             if (a.getBoundingClientRect().top <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
+
             b = document.createElement('div')// создать потомка
                b.className = 'sticky';
+
            var kk = a.offsetWidth;
                b.style.right = '24px';
+
            b.style.cssText = s + ' box-sizing: border-box;';
             } else {
+
            a.insertBefore(b, a.firstChild);  // поместить потомка в цепляющийся блок первым
                 b.className = '';
+
            var l = a.childNodes.length;
 +
             for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты)
 +
                 b.appendChild(a.childNodes[1]);
 
             }
 
             }
             window.addEventListener('resize', function() {
+
             //a.style.height = b.getBoundingClientRect().height + 'px';  // если под скользящим элементом есть другие блоки, можно своё значение
                a.children[0].style.width = getComputedStyle(a, '').width
+
            //a.style.height = '950px';  // если под скользящим элементом есть другие блоки, можно своё значение
            }, false)// если изменить размер окна браузера, измениться ширина элемента
+
           
 +
            a.style.padding = '0';
 +
            a.style.border = '0';  // если элементу присвоен padding или border
 +
        }   
 +
 
 +
        //$("#aside1").offset({top:z});
 +
           
 +
        if (z - $(window).scrollTop() <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
 +
         
 +
          //$("#aside1").offset({top:$(window).scrollTop()});
 +
          b.className = 'sticky';
 +
         
 +
          b.style.right = indent + 'px';
 +
         
 +
        } else {
 +
          //$("#aside1").offset({top:z});
 +
          b.className = '';
 +
        }
 +
        var ff = 0;
 +
        var ff2 = 0;
 +
        if (z - $(window).scrollTop() < 0) {
 +
        pos = $("#block").position().top
 +
        pos2 = $("#toc").position().top
 +
        if (navigator.userAgent.search(/Firefox/) > -1) {
 +
        ff= 99;
 +
        ff2= 46;
 +
        }       
 +
        } else {
 +
        pos = $("#block").offset().top
 +
        pos2 = $("#toc").offset().top
 
         }
 
         }
     })()
+
        maxHeightBlock = document.body.offsetHeight -(pos+17);
 +
        maxHeightBlockb = document.body.offsetHeight -(pos2+26);
 +
 
 +
        var xx0 = z - $(window).scrollTop();
 +
        if (xx0 < 0) { xx0 = z;}
 +
    var xx = maxHeightBlock + z - xx0 - ff;
 +
    var xxb = maxHeightBlockb + z - xx0- ff2;
 +
        xx = xx + 'px';
 +
        xxb = xxb + 'px';
 +
        $("#block").css("max-height",xx);
 +
        $("#toc").css("max-height",xxb);           
 +
     }
 +
})()
 +
/* slide panel with 2 buttons */
 +
 
 +
/**
 +
* Slide panel with 1 button
 +
* @author mwjames
 +
*/
 +
 +
$("#panel-tab").click( function (event) {
 +
event.stopPropagation();
 +
showIfNotVisible( "#panel-content" );
 +
} );
 +
 +
function showIfNotVisible( element ) {
 +
var width = $( '#panel' ).find( 'table').width() + 8;
 +
if ( $(element).css( "width" ) == width + 'px' )
 +
$(element).animate( { width: 0 }, 1500);
 +
else
 +
$(element).animate( { width: width }, 1500);
 +
};
 +
 +
$( function() {
 +
var element = $("#panel-content"),
 +
status = element.attr( 'class' ),
 +
width = element.find( 'table').width() + 8;
 +
 +
if ( status === 'close' ){
 +
element
 +
.width( width )
 +
.animate( { width: 0 }, 1200);
 +
} else {
 +
element
 +
.width( width );
 +
}
 +
 +
 
 +
} );
 +
/* slide panel with 1 button */

Текущая версия на 08:50, 28 июня 2017

/**
 * Slide panel with 2 buttons
 */
    var maximumWidthText = $("#text").width();
    var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width();
    var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width();
    var maxHeightBlock = 0;
    var maxHeightBlockb = 0;
    var indent = document.body.offsetWidth - $('#aside1').offset().left - $('#aside1').width();
    $(function() {
        $("#toc").css("display",'block');
        $("#toc").css("overflow",'scroll'); 

    });


$("#but1").click(function (event) {
    if ($("#win1").is(':visible')) {
        $("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );
        $("#win1").hide('slow');
        $('#text').animate({
            width : maximumWidthText,   
        });

    } else {
        $("#but1").removeClass( "info_but" ).addClass( "info_but_pressed" );
        $("#win1").show('slow');
        $('#text').animate({
           width : maximumWidthTextWithWin1},
           function(){
			var ff= 0;
            if (z - $(window).scrollTop() < 0) { 
            	if (navigator.userAgent.search(/Firefox/) > -1) {
        			ff= 99;
        		}        
    	        scrl = 0;
        	    posit = $("#block").position().top
        	    posit2 = $("#toc").position().top
            } else {
    	        scrl = $(window).scrollTop();
             	posit = $("#block").offset().top
        		posit2 = $("#toc").offset().top
    		}
			var xx = document.body.offsetHeight -(posit+17) + scrl -ff;
    		var xxb = document.body.offsetHeight -(posit2+26);
    		$("#block").css("max-height",xx+'px');
    		$("#toc").css("max-height",xxb+'px'); 
    		maxHeightBlock = xx;
    		maxHeightBlockb = xxb;
        	} 
        );

        if ($("#win2").is(':visible')) {
            $("#win2").hide('slow');
            $("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );
        }
    }
        

});

$("#but2").click(function (event) {
    if ($("#win2").is(':visible')) {
        $("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );
        $("#win2").hide('slow');
        $('#text').animate({
            width : maximumWidthText,   
        });

    } else {
        $("#but2").removeClass( "toc_but" ).addClass( "toc_but_pressed" );
        $("#win2").show('slow');
        $('#text').animate({
           width : maximumWidthTextWithWin2,
        });

        if ($("#win1").is(':visible')) {
            $("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );
            $("#win1").hide('slow');
        }
    }
    var ff = 0;
    if (z - $(window).scrollTop() < 0) {
            if (navigator.userAgent.search(/Firefox/) > -1) {
        		ff= 46;
        	}        
    	
    		scrl = 0;
        	pos = $("#block").position().top
        	pos2 = $("#toc").position().top
    } else {
    		scrl = $(window).scrollTop();
        	pos = $("#block").offset().top
        	pos2 = $("#toc").offset().top
    }
    var xx = document.body.offsetHeight -(pos+17) ;
    var xxb = document.body.offsetHeight -(pos2+26) +scrl -ff;
    $("#block").css("max-height",xx+'px');
    
    $("#toc").css("max-height",xxb+'px'); 
    maxHeightBlock = xx;
    maxHeightBlockb = xxb;
    
});

var z = $("#aside1").offset().top;

(function(){  // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными
    var a = document.querySelector('#aside1'), b = null;  // селектор блока, который нужно закрепить
   
    window.addEventListener('scroll', Ascroll, false);
    document.body.addEventListener('scroll', Ascroll, false);  // если у html и body высота равна 100%
    function Ascroll() {
        if (b === null) {  // добавить потомка-обёртку, чтобы убрать зависимость с соседями
            var Sa = getComputedStyle(a, ''), s = '';
            for (var i = 0; i < Sa.length; i++) {  // перечислить стили CSS, которые нужно скопировать с родителя
                if (Sa[i].indexOf('overflow') === 0 || Sa[i].indexOf('padding') === 0 || Sa[i].indexOf('border') === 0 || Sa[i].indexOf('outline') === 0 || Sa[i].indexOf('box-shadow') === 0 || Sa[i].indexOf('background') === 0) {
                    s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
                }
            }
            b = document.createElement('div');  // создать потомка
            var kk = a.offsetWidth;
            b.style.cssText = s + ' box-sizing: border-box;';
            a.insertBefore(b, a.firstChild);  // поместить потомка в цепляющийся блок первым
            var l = a.childNodes.length;
            for (var i = 1; i < l; i++) {  // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты)
                b.appendChild(a.childNodes[1]);
            }
            //a.style.height = b.getBoundingClientRect().height + 'px';  // если под скользящим элементом есть другие блоки, можно своё значение
            //a.style.height = '950px';  // если под скользящим элементом есть другие блоки, можно своё значение
            
            a.style.padding = '0';
            a.style.border = '0';  // если элементу присвоен padding или border
        }    	

        //$("#aside1").offset({top:z});
    	        
        if (z - $(window).scrollTop() <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
       	    
           //$("#aside1").offset({top:$(window).scrollTop()});
           b.className = 'sticky';
           
           b.style.right = indent + 'px';
           
        } else {
           //$("#aside1").offset({top:z});
           b.className = '';
        }
        var ff = 0;
        var ff2 = 0;
        if (z - $(window).scrollTop() < 0) { 
        	pos = $("#block").position().top
        	pos2 = $("#toc").position().top
        if (navigator.userAgent.search(/Firefox/) > -1) {
        	ff= 99;
        	ff2= 46;
        }        	
        } else {
        	pos = $("#block").offset().top
        	pos2 = $("#toc").offset().top
        }
        maxHeightBlock = document.body.offsetHeight -(pos+17);
        maxHeightBlockb = document.body.offsetHeight -(pos2+26);

        var xx0 = z - $(window).scrollTop();
        if (xx0 < 0) { xx0 = z;}
    	var xx = maxHeightBlock + z - xx0 - ff;
    	var xxb = maxHeightBlockb + z - xx0- ff2;
        xx = xx + 'px';
        xxb = xxb + 'px';
        $("#block").css("max-height",xx);
        $("#toc").css("max-height",xxb);            
    }
})()
/* slide panel with 2 buttons */

/**
 * Slide panel with 1 button
 * @author mwjames
 */
 
$("#panel-tab").click( function (event) {
	event.stopPropagation();
	showIfNotVisible( "#panel-content" );
} );
 
function showIfNotVisible( element ) {
	var width = $( '#panel' ).find( 'table').width() + 8; 
	if ( $(element).css( "width" ) == width + 'px' )
		$(element).animate( { width: 0 }, 1500);
	else
		$(element).animate( { width: width }, 1500);
};
 
$( function() {
	var element = $("#panel-content"),
	status = element.attr( 'class' ),
	width = element.find( 'table').width() + 8;
 
	if ( status === 'close' ){
		element
		.width( width )
		.animate( { width: 0 }, 1200);
	} else {
		element
		.width( width );
	}
	

} );
/* slide panel with 1 button */