citywebshop_cms/uix/js/sugession.js

/*Main sugession manager*/

var tagTemplate = '<small class="sugessionTag" data-value="[tagValue]">[tagLabel] <a href="javascript:;" onclick="sugessionDeleteTag(this)"><i class="fas fa-times-circle"></i></a></small>';
var initEvent = false;
var counterhowmany = 0;

function sgShowLayer() {
    $('.sugessionLayer').show();
    $('.placeholder').remove();
}


function sgHideLayer() {
    //event.stopPropagation();
    $('#search_locations').remove();
    $('.sugessionLayer').hide();

    $('.sugessionTags').removeClass('viewall');
    $('.sugessionTagsMobile').removeClass('viewall');

    $('.sugessionTags').addClass('show-maximized');
    $('.sugessionTagsMobile').addClass('show-maximized');

    $('.sugessionTags').removeClass('hide-maximized');
    $('.sugessionTagsMobile').removeClass('hide-maximized');

    $('.sugessionTag').addClass('show-fixed');

    $('.hidden-overlow').removeClass('disable-overflow');
    $('.hidden-overlow-mobile').removeClass('disable-overflow-mobile');

    var actContent1 = $('.sugessionTags').html();
    var actContent2 = $('.sugessionTagsMobile').html();

    if (actContent1.indexOf('sugessionTag')>0 && actContent2.indexOf('sugessionTag')>0) {
        $('.sugessionInput').hide();
    }
    else {
        if ($('.sugessionTags').html()!='<span class="placeholder">Város, városrész, vagy utca neve</span>') {
            $('.sugessionTags').html('<span class="placeholder">Város, városrész, vagy utca neve</span>');
            $('.sugessionTagsMobile').html('<span class="placeholder">Város, városrész, vagy utca neve</span>');
        }
    }

    if (counterhowmany>1) {
        $('.howmany').show();
    }
}


function setFocusOn() {
    $('.sugessionInput').remove();
    $('.howmany').hide();
    $('.sugessionLayer').show();
    $('.sugessionTags').append('<input type="text" class="sugessionInput" placeholder="Írj be további címeket!" onfocusin="sgShowLayer()" onkeyup="sgSearchKeyword(event)" autocomplete="off" name="locations" id="search_locations" value=""></input>');
    document.getElementById("search_locations").focus();
    $('.sugessionTags').addClass('viewall');
    $('.sugessionTags').removeClass('show-maximized');
    $('.sugessionTags').addClass('hide-maximized');
    $('.sugessionTag').removeClass('show-fixed');
    $('.hidden-overlow').addClass('disable-overflow');
}


function setFocusOnMobile() {
    $('.sugessionInput').remove();
    $('.howmany').hide();
    $('.sugessionLayer').show();
    $('.sugessionTagsMobile').append('<input type="text" class="sugessionInput" placeholder="Írj be további címeket!" onfocusin="sgShowLayer()" onkeyup="sgSearchKeyword(event)" autocomplete="off" name="locations" id="search_locations" value=""></input>');
    document.getElementById("search_locations").focus();
    $('.sugessionTagsMobile').addClass('viewall');
    $('.sugessionTagsMobile').removeClass('show-maximized');
    $('.sugessionTagsMobile').addClass('hide-maximized');
    $('.sugessionTag').removeClass('show-fixed');
    $('.hidden-overlow-mobile').addClass('disable-overflow-mobile');
}


function sugessionDeleteTag(obj) {
    var item = $(obj).parent('small').attr('data-value');
    counterhowmany--;

    if (counterhowmany>1) {
        $('.counterhowmany').html(counterhowmany.toString());
    }
    else {
        $('.howmany').hide();
    }

    $('.sugessionTag').each(function() {
        if ($(this).attr('data-value')==item) {
            $(this).remove();
        }
    });
    $('.sugessionTagsMobile').each(function() {
        if ($(this).attr('data-value')==item) {
            $(this).remove();
        }
    });
}


function suggesionInit(selecteds) {
    if (selecteds!='' && selecteds!=undefined) {
        var cities = selecteds.split(',');
        counterhowmany = cities.length;
        if (counterhowmany==1) {
            counterhowmany--;
        }
        
        var i = 0;

        sgAddHowMany(counterhowmany);

        $.each(cities,function(key,val) {
            i++;
            if (i==1 && counterhowmany>1) {
                sgAddTag(val,false);
            }
            else {
                sgAddTag(val,false);
            }
        });

        var actContent1 = $('.sugessionTags').html();
        var actContent2 = $('.sugessionTagsMobile').html();

        if (actContent1.indexOf('sugessionTag')>0 || actContent2.indexOf('sugessionTag')>0) {
            $('.placeholder').html('');
            $('.placeholder').hide();
            $('.sugessionTagsMobile').addClass('show-maximized');
            $('.sugessionInput').hide();
        }
        else {
            $('.hidden-overlow').addClass('disable-overflow');
            $('.hidden-overlow-mobile').addClass('disable-overflow-mobile');
        }

        sgHideLayer();
    }
}


function sgRemoveLastTag() {
    $('.sugessionTag').last().remove();
    counterhowmany--;
    if (counterhowmany>1) {
        $('.counterhowmany').html(counterhowmany.toString());
    }
    else {
        $('.howmany').hide();
    }
}


function sgSearchKeyword(e) {
    var char = e.which || e.keyCode;
    var actValue = $('#search_locations').val();

    $('.sgTabs').removeClass('sgActiveTab');

    $('#sgKeywords').addClass('sgActiveTab');
    $('#sgKeywordsMobile').addClass('sgActiveTab');

    $('.sugessionResultSet').hide();

    $('#sgResKeywords').show();
    $('#sgResKeywordsMobile').show();

    if (actValue=='') {
        var template = '<table>\
        <tbody>\
            <tr><td onclick="sgAddTag(\'Budapest 01\')">Budapest 01</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 02\')">Budapest 02</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 03\')">Budapest 03</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 04\')">Budapest 04</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 05\')">Budapest 05</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 06\')">Budapest 06</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 07\')">Budapest 07</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 08\')">Budapest 08</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 09\')">Budapest 09</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 10\')">Budapest 10</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 11\')">Budapest 11</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 12\')">Budapest 12</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 13\')">Budapest 13</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 14\')">Budapest 14</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 15\')">Budapest 15</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 16\')">Budapest 16</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 17\')">Budapest 17</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 18\')">Budapest 18</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 19\')">Budapest 19</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 20\')">Budapest 20</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 21\')">Budapest 21</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 22\')">Budapest 22</td></tr>\
            <tr><td onclick="sgAddTag(\'Budapest 23\')">Budapest 23</td></tr>\
        </tbody>\
    </table>';
        $('#sgResKeywordsMobile').html(template);
    }

    if (char==13) {
        sgAddTag(actValue);
    }
    else if (char==8 && actValue=='') {
        sgRemoveLastTag();
    }
    else {
        $.get('/search/tagsearch/?keyword='+actValue,function(resp) {
            $('#sgResKeywords').html(resp);
            $('#sgResKeywordsMobile').html(resp);
        });
    }
}


function sgSetKeyword(e) {
    /*var actValue = $('#search_locations').val();
    if (actValue!='') {
        $('#sgKeywords').html('Találatok "'+actValue+'" kifejezésre');
    }*/
}


function sgAddTag(tag,count=true) {
    var actContent1 = $('.sugessionTags').html();
    var actContent2 = $('.sugessionTagsMobile').html();

    if (tag!='' && actContent1.indexOf(tag)==-1 && actContent2.indexOf(tag)==-1) {
        if (count==true) {
            counterhowmany++;
        }
        if (counterhowmany>1) {
            var actnum = counterhowmany;
            //$('.howmany').show();
            $('.counterhowmany').html(actnum.toString());
            sgAddHowMany(actnum);
        }    
        var newtag = tagTemplate.replace('[tagLabel]',tag);
        newtag = newtag.replace('[tagValue]',tag);
        $('.sugessionTags').append(newtag);
        $('.sugessionTagsMobile').append(newtag);
        $('#search_locations').val('');
        $('#sgKeywords').html('Találatok');
        $('#sgKeywordsMobile').html('Találatok');
        $('.sugessionInput').remove();
        $('.sugessionTags').append('<input type="text" class="sugessionInput" placeholder="Írj be további címeket!" onfocusin="sgShowLayer()" onkeyup="sgSearchKeyword(event)" autocomplete="off" name="locations" id="search_locations" value=""></input>');
        $('.sugessionTagsMobile').append('<input type="text" class="sugessionInput" placeholder="Írj be további címeket!" onfocusin="sgShowLayer()" onkeyup="sgSearchKeyword(event)" autocomplete="off" name="locations" id="search_locations" value=""></input>');
    }
    else {
        return false;
    }
}


function sgAddHowMany(number) {
    var actContent1 = $('.sugessionTags').html();
    var actContent2 = $('.sugessionTagsMobile').html();

    if (actContent1.indexOf('howmany')==-1 && actContent2.indexOf('howmany')==-1) {
        var newtag = '<small class="howmany">Összesen <h6 class="counterhowmany">'+number.toString()+'</h6> kijelölve</small>';
        $('.sugessionTags').append(newtag);
        $('.sugessionTagsMobile').append(newtag);
        $('#search_locations').val('');
        $('#sgKeywords').html('Találatok');
        $('#sgKeywordsMobile').html('Találatok');
        $('.sugessionInput').remove();
        $('.sugessionTags').append('<input type="text" class="sugessionInput" placeholder="Írj be további címeket!" onfocusin="sgShowLayer()" onkeyup="sgSearchKeyword(event)" autocomplete="off" name="locations" id="search_locations" value=""></input>');
        $('.sugessionTagsMobile').append('<input type="text" class="sugessionInput" placeholder="Írj be további címeket!" onfocusin="sgShowLayer()" onkeyup="sgSearchKeyword(event)" autocomplete="off" name="locations" id="search_locations" value=""></input>');
    }
    else {
        return false;
    }

    if (number>2) {
        //$('.howmany').show();
    }
}


function sgStopDelegate(e) {
    e.preventDefault();
    return true;
}


function setSGTab(obj,content) {
    $('.sgTabs').removeClass('sgActiveTab');
    $(obj).addClass('sgActiveTab');
    $('.sugessionResultSet').hide();
    $(content).show();
}


function sgSetEditable(obj) {
    $(obj).children('.ar-label').hide();
    //$(obj).children('.currency-label').hide();
    $(obj).children('.arbox').show();
    $(obj).children('span').show();
    //$('.arbox').first().focus();
}


function sgSetSizeEditable(obj) {
    $(obj).children('.size-label').hide();
    $(obj).children('.sizebox').show();
    $(obj).children('span').show();
}

function sgSetRoomsEditable(obj) {
    $(obj).children('.room-label').hide();
    $(obj).children('.szobabox').show();
    $(obj).children('span').show();
}


function showHideRooms(tipus) {
    if (tipus=='Lakóingatlan - teljesepulet') {
        $('.sgRoomBox').hide();
        $('.sgRoomBoxMobil').hide();
    }
    else if (tipus=='garazs') {
        $('.sgRoomBox').hide();
        $('.sgRoomBoxMobil').hide();
    }
    else if (tipus=='kereskedelmi') {
        $('.sgRoomBox').hide();
        $('.sgRoomBoxMobil').hide();
    }
    else if (tipus=='mezogazdasagi') {
        $('.sgRoomBox').hide();
        $('.sgRoomBoxMobil').hide();
    }
    else if (tipus=='tarolo') {
        $('.sgRoomBox').hide();
        $('.sgRoomBoxMobil').hide();
    }
    else if (tipus=='telek') {
        $('.sgRoomBox').hide();
        $('.sgRoomBoxMobil').hide();
    }
    else {
        $('.sgRoomBox').show();
        $('.sgRoomBoxMobil').show();
    }
}


$(document).ready(function() {
    if (page!='map') {
        suggesionInit($('.sugessionTags').attr('data-selecteds'));
        //suggesionInit($('.sugessionTagsMobile').attr('data-selecteds'));
        $('.sugessionInput').hide();
    }
});


$(document).mouseup(function(e) {
    var container = $(".sgPriceBox");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ($('#armin').val()=='' && $('#armax').val()=='') {
            $('.sgPriceBox').children('.ar-label').show();
            $('.sgPriceBox').children('.arbox').hide();
            $('.sgPriceBox').children('span').hide();
        }
    }

    var container = $(".sgPriceBox");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ($('#iranyar_min').val()=='' && $('#iranyar_max').val()=='') {
            $('.sgPriceBox').children('.ar-label').show();
            $('.sgPriceBox').children('.arbox').hide();
            $('.sgPriceBox').children('span').hide();
        }
    }

    var container = $(".sgSizeBox");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ($('#sizemin').val()=='' && $('#sizemax').val()=='') {
            $('.sgSizeBox').children('.size-label').show();
            $('.sgSizeBox').children('.sizebox').hide();
            $('.sgSizeBox').children('span').hide();
        }
    }

    var container = $(".sgSizeBox");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ($('#meret_netto_min').val()=='' && $('#meret_netto_max').val()=='') {
            $('.sgSizeBox').children('.size-label').show();
            $('.sgSizeBox').children('.sizebox').hide();
            $('.sgSizeBox').children('span').hide();
        }
    }

    var container = $(".sgPriceBoxMobil");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ($('#armin_mobil').val()=='' && $('#armax_mobil').val()=='') {
            $('.sgPriceBoxMobil').children('.ar-label').show();
            $('.sgPriceBoxMobil').children('.arbox').hide();
            $('.sgPriceBoxMobil').children('span').hide();
        }
    }

    var container = $(".sgSizeBoxMobil");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ($('#sizemin_mobil').val()=='' && $('#sizemax_mobil').val()=='') {
            $('.sgSizeBoxMobil').children('.size-label').show();
            $('.sgSizeBoxMobil').children('.sizebox').hide();
            $('.sgSizeBoxMobil').children('span').hide();
        }
    }


    if (page!='map') {
        var container = $(".sugessionLayer");
        var container2 = $(".sugessionInput");
        if (!container.is(e.target) && container.has(e.target).length === 0 && !container2.is(e.target) && container2.has(e.target).length === 0) {
            if (initEvent==true) {
                sgHideLayer();
            }
            else {
                initEvent = true;
            }
        }
    }
});