الدالة droopy

سلام عليكم

منكن شرح لدالة droopy function ووظيفتها

وشرح الكود

/***** droopy function start *****/
var $wrapper = $(".wrapper");
var droopy = function () {

    /*Counter Animation*/
    var counterAnim = $('.counter-anim');
    if (counterAnim.length > 0) {
        counterAnim.counterUp({
            delay: 1,
            time: 10
        });
    }

    /*Tooltip*/
    if ($('[data-toggle="tooltip"]').length > 0)
        $('[data-toggle="tooltip"]').tooltip();

    /*Popover*/
    if ($('[data-toggle="popover"]').length > 0)
        $('[data-toggle="popover"]').popover()


    /*Sidebar Collapse Animation*/
    var sidebarNavCollapse = $('.fixed-sidebar-left .side-nav  li .collapse');
    var sidebarNavAnchor = '.fixed-sidebar-left .side-nav  li a';
    $(document).on("click", sidebarNavAnchor, function (e) {
        if ($(this).attr('aria-expanded') === "false")
            $(this).blur();
        $(sidebarNavCollapse).not($(this).parent().parent()).collapse('hide');
    });

    /*Panel Remove*/
    $(document).on('click', '.close-panel', function (e) {
        var effect = $(this).data('effect');
        $(this).closest('.panel')[effect]();
        return false;
    });

    /*Accordion js*/
    $(document).on('show.bs.collapse', '.panel-collapse', function (e) {
        $(this).siblings('.panel-heading').addClass('activestate');
    });

    $(document).on('hide.bs.collapse', '.panel-collapse', function (e) {
        $(this).siblings('.panel-heading').removeClass('activestate');
    });

    /*Sidebar Navigation*/
    $(document).on('click', '#toggle_nav_btn,#open_right_sidebar,#setting_panel_btn', function (e) {
        $(".dropdown.open > .dropdown-toggle").dropdown("toggle");
        return false;
    });
    $(document).on('click', '#toggle_nav_btn', function (e) {
        $wrapper.removeClass('open-right-sidebar open-setting-panel').toggleClass('slide-nav-toggle');
        return false;
    });

    $(document).on('click', '#open_right_sidebar', function (e) {
        $wrapper.toggleClass('open-right-sidebar').removeClass('open-setting-panel');
        return false;

    });

    $(document).on('click', '.product-carousel .owl-nav', function (e) {
        return false;
    });

    $(document).on('click', 'body', function (e) {
        if ($(e.target).closest('.fixed-sidebar-right,.setting-panel').length > 0) {
            return;
        }
        $('body > .wrapper').removeClass('open-right-sidebar open-setting-panel');
        return;
    });

    $(document).on('show.bs.dropdown', '.nav.navbar-right.top-nav .dropdown', function (e) {
        $wrapper.removeClass('open-right-sidebar open-setting-panel');
        return;
    });

    $(document).on('click', '#setting_panel_btn', function (e) {
        $wrapper.toggleClass('open-setting-panel').removeClass('open-right-sidebar');
        return false;
    });
    $(document).on('click', '#toggle_mobile_nav', function (e) {
        $wrapper.toggleClass('mobile-nav-open').removeClass('open-right-sidebar');
        return;
    });


    $(document).on("mouseenter mouseleave", ".wrapper > .fixed-sidebar-left", function (e) {
        if (e.type == "mouseenter") {
            $wrapper.addClass("sidebar-hover");
        }
        else {
            $wrapper.removeClass("sidebar-hover");
        }
        return false;
    });

    $(document).on("mouseenter mouseleave", ".wrapper > .setting-panel", function (e) {
        if (e.type == "mouseenter") {
            $wrapper.addClass("no-transition");
        }
        else {
            $wrapper.removeClass("no-transition");
        }
        return false;
    });

    /*Todo*/
    var random = Math.random();
    $(document).on("keypress", "#add_todo", function (e) {
        if ((e.which == 13) && (!$(this).val().length == 0)) {
            $('<li class="todo-item"><div class="checkbox checkbox-success"><input type="checkbox" id="checkbox' + random + '"/><label for="checkbox' + random + '">' + $('.new-todo input').val() + '</label></div></li><li><hr class="light-grey-hr"/></li>').insertAfter(".todo-list li:last-child");
            $('.new-todo input').val('');
        } else if (e.which == 13) {
            alert('Please type somthing!');
        }
        return;
    });

    /*Chat*/
    $(document).on("keypress", "#input_msg_send", function (e) {
        if ((e.which == 13) && (!$(this).val().length == 0)) {
            $('<li class="self mb-10"><div class="self-msg-wrap"><div class="msg block pull-right">' + $(this).val() + '<div class="msg-per-detail mt-5"><span class="msg-time txt-grey">3:30 pm</span></div></div></div><div class="clearfix"></div></li>').insertAfter(".fixed-sidebar-right .chat-content  ul li:last-child");
            $(this).val('');
        } else if (e.which == 13) {
            alert('Please type somthing!');
        }
        return;
    });
    $(document).on("keypress", "#input_msg_send_widget", function (e) {
        if ((e.which == 13) && (!$(this).val().length == 0)) {
            $('<li class="self mb-10"><div class="self-msg-wrap"><div class="msg block pull-right">' + $(this).val() + '<div class="msg-per-detail mt-5"><span class="msg-time txt-grey">3:30 pm</span></div></div></div><div class="clearfix"></div></li>').insertAfter(".chat-for-widgets .chat-content  ul li:last-child");
            $(this).val('');
        } else if (e.which == 13) {
            alert('Please type somthing!');
        }
        return;
    });
    $(document).on("keypress", "#input_msg_send_chatapp", function (e) {
        if ((e.which == 13) && (!$(this).val().length == 0)) {
            $('<li class="self mb-10"><div class="self-msg-wrap"><div class="msg block pull-right">' + $(this).val() + '<div class="msg-per-detail mt-5"><span class="msg-time txt-grey">3:30 pm</span></div></div></div><div class="clearfix"></div></li>').insertAfter(".chat-for-widgets-1 .chat-content  ul li:last-child");
            $(this).val('');
        } else if (e.which == 13) {
            alert('Please type asomthing!');
        }
        return;
    });

    $(document).on("click", ".fixed-sidebar-right .chat-cmplt-wrap .chat-data", function (e) {
        $(".fixed-sidebar-right .chat-cmplt-wrap").addClass('chat-box-slide');
        return false;
    });
    $(document).on("click", ".fixed-sidebar-right #goto_back", function (e) {
        $(".fixed-sidebar-right .chat-cmplt-wrap").removeClass('chat-box-slide');
        return false;
    });

    /*Chat for Widgets*/
    $(document).on("click", ".chat-for-widgets.chat-cmplt-wrap .chat-data", function (e) {
        $(".chat-for-widgets.chat-cmplt-wrap").addClass('chat-box-slide');
        return false;
    });
    $(document).on("click", "#goto_back_widget", function (e) {
        $(".chat-for-widgets.chat-cmplt-wrap").removeClass('chat-box-slide');
        return false;
    });
    /*Horizontal Nav*/
    $(document).on("show.bs.collapse", ".top-fixed-nav .fixed-sidebar-left .side-nav > li > ul", function (e) {
        e.preventDefault();
    });

    /*Slimscroll*/
    $('.nicescroll-bar').slimscroll({
        height: '100%',
        color: '#878787',
        disableFadeOut: true,
        borderRadius: 0,
        size: '40px',
        alwaysVisible: false
    });
    $('.message-nicescroll-bar').slimscroll({
        height: '229px',
        size: '4px',
        color: '#878787',
        disableFadeOut: true,
        borderRadius: 0
    });
    $('.message-box-nicescroll-bar').slimscroll({
        height: '350px',
        size: '4px',
        color: '#878787',
        disableFadeOut: true,
        borderRadius: 0
    });
    $('.product-nicescroll-bar').slimscroll({
        height: '346px',
        size: '4px',
        color: '#878787',
        disableFadeOut: true,
        borderRadius: 0
    });
    $('.app-nicescroll-bar').slimscroll({
        height: '162px',
        size: '4px',
        color: '#878787',
        disableFadeOut: true,
        borderRadius: 0
    });
    $('.todo-box-nicescroll-bar').slimscroll({
        height: '310px',
        size: '4px',
        color: '#878787',
        disableFadeOut: true,
        borderRadius: 0
    });
    $('.users-nicescroll-bar').slimscroll({
        height: '370px',
        size: '4px',
        color: '#878787',
        disableFadeOut: true,
        borderRadius: 0
    });
    $('.users-chat-nicescroll-bar').slimscroll({
        height: '257px',
        size: '4px',
        color: '#878787',
        disableFadeOut: true,
        borderRadius: 0
    });
    $('.chatapp-nicescroll-bar').slimscroll({
        height: '543px',
        size: '4px',
        color: '#878787',
        disableFadeOut: true,
        borderRadius: 0
    });
    $('.chatapp-chat-nicescroll-bar').slimscroll({
        height: '483px',
        size: '4px',
        color: '#878787',
        disableFadeOut: true,
        borderRadius: 0
    });

    /*Product carousel*/
    if ($('.product-carousel').length > 0)
        var $owl = $('.product-carousel').owlCarousel({
            loop: true,
            margin: 15,
            nav: true,
            navText: ["<i class='zmdi zmdi-chevron-left'></i>", "<i class='zmdi zmdi-chevron-right'></i>"],
            dots: false,
            autoplay: true,
            responsive: {
                0: {
                    items: 1
                },
                400: {
                    items: 2
                },
                767: {
                    items: 3
                },
                1399: {
                    items: 4
                }
            }
        });

    /*Refresh Init Js*/
    var refreshMe = '.refresh';
    $(document).on("click", refreshMe, function (e) {
        var panelToRefresh = $(this).closest('.panel').find('.refresh-container');
        var dataToRefresh = $(this).closest('.panel').find('.panel-wrapper');
        var loadingAnim = panelToRefresh.find('.la-anim-1');
        panelToRefresh.show();
        setTimeout(function () {
            loadingAnim.addClass('la-animate');
        }, 100);

        function started() {
        } //function before timeout
        setTimeout(function () {
            function completed() {
            } //function after timeout
            panelToRefresh.fadeOut(800);
            setTimeout(function () {
                loadingAnim.removeClass('la-animate');
            }, 800);
        }, 1500);
        return false;
    });

    /*Fullscreen Init Js*/
    $(document).on("click", ".full-screen", function (e) {
        $(this).parents('.panel').toggleClass('fullscreen');
        $(window).trigger('resize');
        return false;
    });

    /*Nav Tab Responsive Js*/
    $(document).on('show.bs.tab', '.nav-tabs-responsive [data-toggle="tab"]', function (e) {
        var $target = $(e.target);
        var $tabs = $target.closest('.nav-tabs-responsive');
        var $current = $target.closest('li');
        var $parent = $current.closest('li.dropdown');
        $current = $parent.length > 0 ? $parent : $current;
        var $next = $current.next();
        var $prev = $current.prev();
        $tabs.find('>li').removeClass('next prev');
        $prev.addClass('prev');
        $next.addClass('next');
        return;
    });
};
/***** droopy function end *****/
يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

الدالة droopy هنا ليس لها دور محدد، فهي فقط تجميع لعدة تعليمات لا علاقة لها ببعضها

الظاهر أن سبب وضع جميع تلك التعليمات في دالة واحدة هو جعلها تتنفذ بعد تحميل الصفحة كاملة

مثلا

$(window).on('load', droopy);

ولشرحها يجب شرح كل جزء من الكود على حدة ، لذلك حدد الجزء الذي تريد فهمه بالضبط

مثلا هذا الجزء يقوم بتهيئة إضافة tooltip في jquery

/*Tooltip*/
if ($('[data-toggle="tooltip"]').length > 0)
    $('[data-toggle="tooltip"]').tooltip();

اشرح لي كل الكود الذي ارسلته لك

لن يفيدك شرح هذا الكود ما دمت لا تعلم أساسيات javascript و jquery

بعد أن تتعلم ذلك ستستطيع فهم كل جزء بنفسك

كيف ليس لها دور وما الفائدة من كتابتها

مفروض كل تكون لها وظيفة

مثلا هذه الدالة sum تقوم بجمع عددين وإعادة ناتجهما

function sum(a, b) {
  return a + b;
}

وهذه الدالة changeColor تقوم بتغيير خلفية الصفحة

function changeColor() {
  $('body').css('background-color', 'red');
}

الدالتين sum و changeColor لديهما دور محدد يمكن وصفه

وهذه الدالة droopy تقوم بدورين لا علاقة لهما ببعض

function droopy() {
  // change body color
  changeColor();

  // log sum of two numbers
  console.log(sum(2, 3));
}

لكن لها هدف وهو أن يتم تنفيذ ما بداخلها بعد تحميل الصفحة كاملة

لذلك يتم وضعها في حدث onload

$(window).on('load', droopy);