الدالة 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 *****/

التعليق السابق

2021-08-25T04:13:21+00:00
المزيد
- رابط مختصر

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

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

مجهول

2021-08-25T17:10:12+00:00
المزيد
- رابط مختصر

مثلا هذه الدالة 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);

التعليقات

تطوير الويب