diff --git a/_teendők.md b/_teendők.md index 78df100..c36b877 100644 --- a/_teendők.md +++ b/_teendők.md @@ -8,12 +8,8 @@ Facebook like gomb Betöltéskor rejteni a dolgokat méretezés előtt, vagy betöltést optimalizálni -onresize js! - `@media print{}` # Megjegyzések -~ Adrinak írni, hogy küldjön tökéletesen négyzet logót - szerintem nem kell, megoldottam azt az 1px problémát - -- MEgnézni, hogy gördülésre fekete logó legyen! \ No newline at end of file +~ Adrinak írni, hogy küldjön tökéletesen négyzet logót - szerintem nem kell, megoldottam azt az 1px problémát \ No newline at end of file diff --git a/js/scripts.js b/js/scripts.js index b906d78..045d491 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -54,8 +54,11 @@ // console.log(cssWidths) - /* --------------------------- css values to vars --------------------------- */ + /* -------------------------------------------------------------------------- */ + /* FUNCTIONS */ + /* -------------------------------------------------------------------------- */ + /* --------------------------- css values to vars --------------------------- */ function calcWidths() { let wow = window.outerWidth @@ -84,9 +87,6 @@ } } - var isMobile = checkDevice('mobile') - var isTablet = checkDevice('tablet') - /** * Checks if body has a class @@ -110,242 +110,66 @@ } } - //isHome - const isHome = bodyHasClass('home') - - //isArchive - const isArchive = bodyHasClass('archive', 'category-esemeny') - - //isSearch - const isSearch = bodyHasClass('search-results') - - //isSearchNoResults - const isSearchNoResults = bodyHasClass('search-no-results') - - //isEsemeny - const isEsemeny = bodyHasClass('category-esemeny') - - //isSingle - const isSingle = bodyHasClass('single') - - // Masonrypage: archive, home or search results - var isMasonryPage = isArchive || isHome || isSearch || isSearchNoResults - - - /* -------------------------------------------------------------------------- */ - /* Black logo on scroll on mobile */ - /* -------------------------------------------------------------------------- */ - - $.fn.scrollStopped = function (callback) { - var that = this, $this = $(that); - $this.scroll(function (ev) { - clearTimeout($this.data('scrollTimeout')); - $this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev)); - }); - }; - - var isMenuOpen = function () { - let menuopen = ($('#sidebar').attr('data-simplersidebar') == 'opened') ? true : false - return menuopen - } - - $(window).scroll(function () { - if (isMobile && !isMenuOpen()) { - $('.dis-logo, .menubutton-icon').addClass('black') - } - }) - - $(window).scrollStopped(function () { - if (isMobile && !isMenuOpen()) { - $('.dis-logo, .menubutton-icon').removeClass('black') - } - }) - - /* -------------------------------------------------------------------------- */ - /* SEARCH */ - /* -------------------------------------------------------------------------- */ - - // on mobile add to sidebar: - // if (isMobile) { - // $(".search-box>.search-bar").prependTo("#sidebar-wrapper") - // } - - //clicking on desktop - if (!isMobile) { - $(".search-box button").click(function (e) { - // e.preventDefault() - var bar = $(this).next(".search-bar") - if (bar.hasClass("opensearch")) { - //if search is opened close: - bar.stop().animate({ width: "0" }, 400, function () { - bar.hide().removeClass("opensearch") - }) - } else { - let ww = calcWidths() - //if it's closed open: - bar.show().stop().animate({ width: ww.wiw - (ww.desktophomemargin * 2) }, 400, function () { - bar.addClass("opensearch") - $(".search-input").focus() - }) - // console.log("calc(100% - " + (desktophomemargin * 2) + "px)") - } - - }) - } - - /* ========================================================================== */ - /* MENU */ - /* ========================================================================== */ - - var rotateMenuButton = function () { - if ($(".menubutton button").hasClass("rotated")) { - $(".menubutton button").removeClass("rotated"); - } else { - $(".menubutton button").addClass("rotated").addClass("inverted"); - } - } - - function mwCalc() { - let ww = calcWidths() - if (isMobile) { - return ww.wow - } else if (isTablet) { - return 350 - } else { - return 500 - } - } - var menuWidth = mwCalc() - // var menuWidth = 100 - - // if (isTablet) { - // menuWidth = 350 - // } - // if (!isMobile && !isTablet) { - // menuWidth = 500 - // } - - $("#sidebar").simplerSidebar({ - - selectors: { - trigger: "#toggle-sidebar", - quitter: "#toggle-sidebar" - }, - sidebar: { - width: menuWidth - }, - mask: { - display: false, - css: { - backgroundColor: "black", - opacity: 1, - filter: "Alpha(opacity=100)" // IE opacity fix - } - }, - gap: 0, - events: { - on: { - animation: { - both: rotateMenuButton - - } - }, - callbacks: { - animation: { - open: function () { - if (isMobile) { - $('.social-link, .events-link').removeClass('hidden') - } - }, - close: function () { - $(".menubutton button").removeClass("inverted") - if (isMobile) { - $('.social-link, .events-link').addClass('hidden') - } - }, - freezePage: false - } + /** + * finds a name of a class, from the first element + * @param {Array} classlist the list of classes to search from as an array + * @param {String} startString the string to search for + * @param {String} sep the separator that separates the startString from the rest of the classname + */ + function findClassByStart(classlist, startString, sep = "-") { + var fullstring + for (let i = 0; i < classlist.length; i++) { + let curr = classlist[i].split(sep) + if (curr[0] == startString) { + fullstring = classlist[i] } } - - }); + return fullstring + } - /* --------------------- generic page load for onresize --------------------- */ + /* ----------------------------- random ----------------------------- */ - var articleWrapCounter = 0 + function random2() { + const choices = [ + [1, 3], + [1, 5], + [1, 6], + [2, 4], + [2, 6], + [3, 4], + [3, 5], + [4, 6] + ] + let nr = Math.floor(Math.random() * choices.length); + return choices[nr] + } - function loadPage() { - if (isMobile) { - // hide social buttons - $('.social-link, .events-link').addClass('hidden') - - // move search to menu - $(".search-box>.search-bar").prependTo("#sidebar-wrapper") - - // set up no results - $('article.no-result').show() - $('body.no-result .archivetitle>h2').appendTo('article.no-result') - } else { - // not mobile - - //show social links - $('.social-link, .events-link').removeClass('hidden') - - // move search to back - $("#sidebar-wrapper>.search-bar").appendTo(".search-box") - - // set up no results - $('article.no-result h2').appendTo('.archivetitle') - $('article.no-result').hide() - } - - if (isMasonryPage) { - if (isMobile) { - //no overflowY - $('html').css({ overflowY: "unset" }) - - unWrapArts() - } else { - //no overflowY - $('html').css({ overflowY: "hidden" }) - - wrapArts() - - $("body:not(.no-result) .archivetitle h1").fitText(0.7) + //jquery function, adds random class to 3 random cihldren + (function ($) { + $.fn.addRandomClasses = function () { + let rn = random2() + for (let i = 0; i < 2; i++) { + var j = rn[i] + this.children("article:nth-child(" + j + ")").addClass("random") } - } - } - - loadPage() + return this + }; + })(jQuery); /* -------------------------------------------------------------------------- */ - /* HOME & ARCHIVES */ + /* HOME & ARCHIVES FUNCTIONS */ /* -------------------------------------------------------------------------- */ - /* ------------------------------- no results ------------------------------- */ - - - if (isMasonryPage && $("article").hasClass('no-result')) { - $('body').addClass("no-result") - // if (!isMobile) { - // $('article.no-result h2').appendTo('.archivetitle') - // $('article.no-result').hide() - // } - } - - /* ------------------------------ wrap articles ----------------------------- */ - - function wrapArts() { //calculate wrappable elements if ($(".hbox").length) { return } - $('#content>*:not(.misha_loadmore)').addClass("hbox") + $('#content>article, #content>.archivetitle, #content>.archivedescription').addClass("hbox") var wrapArticles = $(".hbox").length if (isHome) { @@ -395,160 +219,32 @@ function unWrapArts() { $('.home_wrapper-big .hbox').unwrap('.home_wrapper-big') - var wrapArticles = $(".hbox").length - for (let i = 0; i < wrapArticles.length + 1; i++) { - $('article').removeClass('.home-thumbnail-small-' + i) + var wrapArticles = $(".hbox").length + for (let i = 0; i < wrapArticles; i++) { + let hs = 'home-thumbnail-small-' + (i + 1) + $('.' + hs).removeClass(hs) } $('.hbox').removeClass('home-small').removeClass('hbox').unwrap('.home_wrapper-small') + $('.home_wrapper-s1').removeClass('home_wrapper-s1') + + $('.home-big').removeClass('home-big') } - if (!isMobile) { - if (isMasonryPage) { - - - // //calculate wrappable elements - // $('#content>*:not(.misha_loadmore)').addClass("hbox") - // var wrapArticles = $(".hbox").length - - // //wrapping for big-small difference - // if (isHome) { - // $('.hbox:first-child').wrap('
').addClass("home-big") - // $('.hbox:nth-child(2)').wrap('
').addClass("home-big") - // wrapArticles = $(".hbox").length - 2 - // } - - // //add classes to articles and elements - // var articleWrapCounter = 0 - // for (let i = 0; i < wrapArticles; i++) { - // var j = i + 1 - - // if (isHome) { - // j = i + 3 - // } - - // if (i % 6 == 0) { - // articleWrapCounter++ - // } - // //console.log($('.hbox:nth-child(' + j + ')').attr("id"), i, j) - // $('.hbox:nth-child(' + j + ')').addClass("home-small home-thumbnail-small-" + articleWrapCounter) - // //change order if there is a description - // if ($("body").is('.archive, .tag') && articleWrapCounter == 1) { - // if (j == 3 || j == 4) { - // $('.hbox:nth-child(' + j + ')').css({ order: j - 1 }) - // } else if (j == 5 || j == 6) { - // $('.hbox:nth-child(' + j + ')').css({ order: j }) - // } - - // } - // } - // //wrap classes - // for (let i = 0; i < articleWrapCounter; i++) { - // var j = i + 1 - // if (isHome) { - // j = i + 3 - // } - // var k = i + 1 - // $(".home-thumbnail-small-" + k).wrapAll('
') - // if (i == 0) { - // $(".home_wrapper-" + j).addClass("home_wrapper-s1") - // } - // } - - /* -------------------------------- other css ------------------------------- */ - - //add bottom scrollbar to div on bottom: - // if (bottomScrollHeight > 0) { - // $(".home_wrapper-big .metadata").css({ bottom: bottomScrollHeight }) - // } - - //fit title - // $("body:not(.no-result) .archivetitle h1").fitText(0.7) - - }//isMasonryPage end - }// !isMobile end - /* ---------------- move bevezeto out from metadata on mobile --------------- */ - if (isHome && isMobile) { + function moveBevezetoMobile() { $("article .metadata .bevezetoWrapper").each(function () { $(this).parents('article').append($(this)) }) } - /* ----------------------------- random cutouts ----------------------------- */ - - function random2() { - const choices = [ - [1, 3], - [1, 5], - [1, 6], - [2, 4], - [2, 6], - [3, 4], - [3, 5], - [4, 6] - ] - let nr = Math.floor(Math.random() * choices.length); - return choices[nr] + function moveBevezetoDesktop() { + $("article>.bevezetoWrapper").each(function () { + $(this).parent('article').children('.metadata').append($(this)) + }) } - //jquery function, adds random class to 3 random cihldren - (function ($) { - $.fn.addRandomClasses = function () { - let rn = random2() - for (let i = 0; i < 2; i++) { - var j = rn[i] - this.children("article:nth-child(" + j + ")").addClass("random") - } - return this - }; - })(jQuery); - - - $(".home_wrapper-small").each(function () { - $(this).addRandomClasses() - }) - - - /* ---------------------------- Cutouts on mobile --------------------------- */ - - //add class to odd elems - - // function mobileHomeClass() { - // if (isMobile && isMasonryPage) { - // $('article:not(.post_nr):not(.cutOk) ').addClass('cutCurr') - // $('article.cutCurr:nth-child(even)').addClass('cut-even') - // $('article.cutCurr').addClass('cutOk').removeClass('cutCurr') - // } - - // } - - // mobileHomeClass() - - /* ----------------------------- Snap on mobile ----------------------------- */ - - // if (isMobile) { - // if (isMasonryPage) { - // $("article.post").SnapScroll({ - // animateDuration: 400 - // }); - // } - // } - - /* --------------------------------- To top --------------------------------- */ - - // $(".totop>a").click(function (e) { - // e.preventDefault() - // $('html, body').stop().animate({ scrollTop: 0 }, 800); - // }) - - // //hide totop if not needed - // if (!($("main").height() > $(window).height()) && isMobile) { - // $(".totop").hide() - // } - - /* ---------------------------- Scroll on desktop --------------------------- */ /** @@ -628,8 +324,150 @@ } } + + /* -------------------------------------------------------------------------- */ + /* SEARCH */ + /* -------------------------------------------------------------------------- */ + + + //clicking on desktop + if (!isMobile) { + $(".search-box button").click(function (e) { + // e.preventDefault() + var bar = $(this).next(".search-bar") + if (bar.hasClass("opensearch")) { + //if search is opened close: + bar.stop().animate({ width: "0" }, 400, function () { + bar.hide().removeClass("opensearch") + }) + } else { + let ww = calcWidths() + //if it's closed open: + bar.show().stop().animate({ width: ww.wiw - (ww.desktophomemargin * 2) }, 400, function () { + bar.addClass("opensearch") + $(".search-input").focus() + }) + } + }) + } + + /* -------------------------------------------------------------------------- */ + /* MENU */ + /* -------------------------------------------------------------------------- */ + + /* ------------------------------ menufunctions ----------------------------- */ + + var rotateMenuButton = function () { + if ($(".menubutton button").hasClass("rotated")) { + $(".menubutton button").removeClass("rotated"); + } else { + $(".menubutton button").addClass("rotated").addClass("inverted"); + } + } + + function mwCalc() { + let ww = calcWidths() + if (isMobile) { + return ww.wow + } else if (isTablet) { + return 350 + } else { + return 500 + } + } + + /* ----------------------------- Set up the menu ---------------------------- */ + + var menuWidth = mwCalc() + + $("#sidebar").simplerSidebar({ + + selectors: { + trigger: "#toggle-sidebar", + quitter: "#toggle-sidebar" + }, + sidebar: { + width: menuWidth + }, + mask: { + display: false, + css: { + backgroundColor: "black", + opacity: 1, + filter: "Alpha(opacity=100)" // IE opacity fix + } + }, + gap: 0, + events: { + on: { + animation: { + both: rotateMenuButton + + } + }, + callbacks: { + animation: { + open: function () { + if (isMobile) { + $('.social-link, .events-link').removeClass('hidden') + } + }, + close: function () { + $(".menubutton button").removeClass("inverted") + if (isMobile) { + $('.social-link, .events-link').addClass('hidden') + } + }, + freezePage: false + } + } + } + + }); + + + /* -------------------------------------------------------------------------- */ + /* BOOLEANS */ + /* -------------------------------------------------------------------------- */ + + var isMobile = checkDevice('mobile') + var isTablet = checkDevice('tablet') + + //isHome + const isHome = bodyHasClass('home') + + //isArchive + const isArchive = bodyHasClass('archive', 'category-esemeny') + + //isSearch + const isSearch = bodyHasClass('search-results') + + //isSearchNoResults + const isSearchNoResults = bodyHasClass('search-no-results') + + //isEsemeny + const isEsemeny = bodyHasClass('category-esemeny') + + //isSingle + const isSingle = bodyHasClass('single') + + // Masonrypage: archive, home or search results + var isMasonryPage = isArchive || isHome || isSearch || isSearchNoResults + + + /* -------------------------------------------------------------------------- */ + /* Set up specific pages */ + /* -------------------------------------------------------------------------- */ + + /* ------------------------------- no results ------------------------------- */ + + if (isMasonryPage && $("article").hasClass('no-result')) { + $('body').addClass("no-result") + } + const selector = isEsemeny ? 'main>section>article' : 'main>#content>div' + // default current elem for scrolling var currElem = $(selector + ':first-child') //checking the current scroll location for refresh: @@ -668,14 +506,126 @@ // console.log("currscroll", currscroll, "scrollnr", scrollnr, "closest", closest) console.log("start location: " + currElem.attr("class")) - - - - } } - /* -------------------------- on scroll on desktop -------------------------- */ + /* -------------------------------------------------------------------------- */ + /* EVENTS - ESEMÉNYEK */ + /* -------------------------------------------------------------------------- */ + + if (isEsemeny) { + if (!isMobile) { + $('html').css({ overflowY: "hidden" }) + } + } + + /* --------------------- generic page load for onresize --------------------- */ + + var articleWrapCounter = 0 + + function loadPage() { + if (isMobile) { + // hide social buttons + $('.social-link, .events-link').addClass('hidden') + + // move search to menu + $(".search-box>.search-bar").prependTo("#sidebar-wrapper") + + // set up no results + $('article.no-result').show() + $('body.no-result .archivetitle>h2').appendTo('article.no-result') + + + } else { + // not mobile + + //show social links + $('.social-link, .events-link').removeClass('hidden') + + // move search to back + $("#sidebar-wrapper>.search-bar").appendTo(".search-box") + + // set up no results + $('article.no-result h2').appendTo('.archivetitle') + $('article.no-result').hide() + } + + if (isMasonryPage) { + if (isMobile) { + //no overflowY + $('html').css({ overflowY: "unset" }) + + unWrapArts() + + moveBevezetoMobile() + } else { + //no overflowY + $('html').css({ overflowY: "hidden" }) + + wrapArts() + + $("body:not(.no-result) .archivetitle h1").fitText(0.7) + + moveBevezetoDesktop() + + // add random classes + if (!$('.random').length) { + $(".home_wrapper-small").each(function () { + $(this).addRandomClasses() + }) + } + + } + } + + if (isMasonryPage || isEsemeny) { + if (isMobile) { + + } else { + currElem = $(selector + ':first-child') + } + } + } + + loadPage() + + + + + /* -------------------------------------------------------------------------- */ + /* Black logo on scroll on mobile */ + /* -------------------------------------------------------------------------- */ + + $.fn.scrollStopped = function (callback) { + var that = this, $this = $(that); + $this.scroll(function (ev) { + clearTimeout($this.data('scrollTimeout')); + $this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev)); + }); + }; + + var isMenuOpen = function () { + let menuopen = ($('#sidebar').attr('data-simplersidebar') == 'opened') ? true : false + return menuopen + } + + $(window).scroll(function () { + if (isMobile && !isMenuOpen()) { + $('.dis-logo, .menubutton-icon').addClass('black') + } + }) + + $(window).scrollStopped(function () { + if (isMobile && !isMenuOpen()) { + $('.dis-logo, .menubutton-icon').removeClass('black') + } + }) + + /* -------------------------------------------------------------------------- */ + /* SCROLL */ + /* -------------------------------------------------------------------------- */ + + /* ------------------------ scroll on home on desktop ----------------------- */ var scrolltimer = false; $(window).on('wheel DOMMouseScroll', function (e) { @@ -867,8 +817,6 @@ /* ------------------------------ hover on home ----------------------------- */ - - const metadataHeights = {} //hover on big articles @@ -979,6 +927,7 @@ }) } + // Uncomment for debugging hover // if (!isMobile && isHome) { // setTimeout(() => { // bigArticleHoverShow($(".home_wrapper-1 .home-big h2 a")) @@ -986,31 +935,13 @@ // } + /* ------------------------- hover on small articles ------------------------ */ - /** - * finds a name of a class, from the first element - * @param {Array} classlist the list of classes to search from as an array - * @param {String} startString the string to search for - * @param {String} sep the separator that separates the startString from the rest of the classname - */ - function findClassByStart(classlist, startString, sep = "-") { - var fullstring - for (let i = 0; i < classlist.length; i++) { - let curr = classlist[i].split(sep) - if (curr[0] == startString) { - fullstring = classlist[i] - } - } - return fullstring - } - - //hover on small articles function showTitle(th) { if (!$('body').hasClass('no-result')) { $(th).children("h2").show() $(th).children(".metadata").addClass("vis") } - } function hideTitle(th) { @@ -1050,17 +981,6 @@ }, ".home-small a.thumbnailwrapper") - /* -------------------------------------------------------------------------- */ - /* EVENTS - ESEMÉNYEK */ - /* -------------------------------------------------------------------------- */ - - if (isEsemeny) { - if (!isMobile) { - $('html').css({ overflowY: "hidden" }) - } - } - - /* -------------------------------------------------------------------------- */ /* CIRCULAR TEXT */ /* -------------------------------------------------------------------------- */ @@ -1069,26 +989,6 @@ const bedoWords = bedoListItems + " a" const bedoLetters = bedoWords + " span" - - //move subs to wrapper - $(bedoListItems).each(function () { - let itemId = $(this).attr("id") - let tagClass = $(this).attr("class").split(" ") - let itemClass = findClassByStart(tagClass, 'tag') - - // add wrapper div - // $(".sub-wrapper").append('
') - - // add tag title - // $(this).children("a").clone().appendTo(".sub-wrapper #" + itemId) - - //add sub text - // $(this).children("span").appendTo(".sub-wrapper #" + itemId) - - //add circle - // $(".sub-wrapper #" + itemId + " span").append('
') - }) - //wrap each letter to spans var charnum = 0 $(bedoWords).each(function () { @@ -1138,36 +1038,23 @@ //hide caption on desktop if (!isMobile) { - // $('.wp-block-gallery img, .wp-block-image img, .vis').hover(function () { - // $(this).parent('a').next("figcaption").addClass("vis") - // }, function () { - // $('.wp-block-gallery .vis, .wp-block-image .vis') - // .removeClass("vis") - // }) - $('.wp-block-gallery .blocks-gallery-item, .wp-block-image').hover(function () { $(this).find("figcaption").addClass("vis") }, function () { $('.wp-block-gallery .vis, .wp-block-image .vis').removeClass("vis") }) - - - } - /* -------------------------------- Lightbox -------------------------------- */ - - //group gallery images: $('.wp-block-gallery a, .wp-block-image a').addClass('cb-gallery') //copy figcaption to title $("a.cb-gallery ~ figcaption").each(function () { - let captiotext = $(this).html() - $(this).prev('.cb-gallery').attr({ title: captiotext }) + let captiontext = $(this).html() + $(this).prev('.cb-gallery').attr({ title: captiontext }) }) const lightBoxMaxHeight = isMobile ? '65%' : '80%' @@ -1256,17 +1143,8 @@ } } - }//if single end - - /* ------------------------------- IOS fix try ------------------------------ */ - // $(".logo a").click(function(e){ - // e.preventDefault() - // alert('hello') - // }) - - /* -------------------------------------------------------------------------- */ /* window resize event */ /* -------------------------------------------------------------------------- */