Is this abandoned?

[odahcam]

I think that maybe requireJS, SystemJS, etc... can do a better job than this guy here, so is there any pretentions for this repo?

[RichardTMiles]

I like this set up, It's a personal prefrence. I used JQuery + map to create a buffer for loading the optional js only when needed.

When It comes time to execute code in the content fold (since I refresh only inner content it is sometimes convient to pass js code in a template) I rely on event signaling. In the carbon.js file I have

$.fn.runEvent = (ev) => {
        let event;
        if (document.createEvent) {
            event = document.createEvent("HTMLEvents");
            event.initEvent(ev, true, true)
        } else {
            event = document.createEventObject();
            event.eventType = ev
        }
        event.eventName = ev;
        document.createEvent ? document.dispatchEvent(event) :
            document.fireEvent("on" + event.eventType, event);
    };
   $.fn.runEvent("Carbon");

So that when load js loads all sections of code required it will fire the "carbon" event. A template then may use the following snippet

   document.addEventListener("Carbon", (e) => {
            $.fn.load_knob('.knob')
            $.fn.load_timepicker('.timepicker')
        });

The code inside the above eventlister requires the use of jQuery which should be located below the fold. Anyone coming about this in the future should also be made aware of the all the great code these guys put out. https://www.filamentgroup.com/code/

I relied on loadCSS and LoadJS for a while, however I now recommend using google load css fuction which is provided below. (notice the noscript now contains our css)

<noscript id="deferred-styles">
    <!-- REQUIRED STYLE SHEETS -->
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "bower_components/bootstrap/dist/css/bootstrap.min.css") ?>">
    <!-- Theme style -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "dist/css/AdminLTE.min.css") ?>">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
        folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "dist/css/skins/_all-skins.min.css") ?>">
    <!-- DataTables.Bootstrap -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css") ?>">
    <!-- iCheck -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "plugins/iCheck/all.css"); ?>">
    <!-- Ionicons -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "bower_components/Ionicons/css/ionicons.min.css") ?>">
    <!-- Back color -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "dist/css/skins/skin-green.css") ?>">
    <!-- Multiple input dynamic form -->
    <link rel="stylesheet" type="text/css"
          href="<?= $this->versionControl(TEMPLATE . "bower_components/select2/dist/css/select2.min.css") ?>" as="style"
          onload="this.rel='stylesheet'">
    <!-- Check Ratio Box -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "plugins/iCheck/flat/blue.css") ?>">
    <!-- I dont know but keep it -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "bower_components/morris.js/morris.css") ?>">
    <!-- fun ajax refresh -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "plugins/pace/pace.css") ?>">
    <!-- Jquery -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "bower_components/jvectormap/jquery-jvectormap.css") ?>">
    <!-- datepicker -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.css") ?>">
    <!-- date-range-picker -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "bower_components/bootstrap-daterangepicker/daterangepicker.css") ?>">
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "plugins/timepicker/bootstrap-timepicker.css") ?>">
    <!-- Wysihtml -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css") ?>">
    <!-- Font Awesome -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "bower_components/font-awesome/css/font-awesome.min.css") ?>">
    <!-- Font Awesome -->
    <link rel="stylesheet" type="text/css" href="<?= $this->versionControl(TEMPLATE . "bower_components/font-awesome/css/font-awesome.min.css") ?>">
</noscript>
<script>
    // Google
    let loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
    };
    let raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener('load', loadDeferredStyles);

    var JSLoaded = new Set();

    //-- JQuery -->
    loadJS("<?= $this->versionControl(TEMPLATE . 'bower_components/jquery/dist/jquery.min.js') ?>", () => {

        //-- Jquery Form -->
        loadJS('<?= $this->versionControl(COMPOSER . 'bower-asset/jquery-form/src/jquery.form.js')?>');

        //-- Background Stretch -->
        loadJS("<?= $this->versionControl(COMPOSER . 'bower-asset/jquery-backstretch/jquery.backstretch.min.js') ?>", () => {
            $.backstretch('<?=SITE?>Public/img/final.jpg');
        });

        //-- Slim Scroll -->
        loadJS("<?= $this->versionControl(TEMPLATE . 'bower_components/jquery-slimscroll/jquery.slimscroll.min.js') ?>");

        //-- Fastclick -->
        loadJS("<?= $this->versionControl(TEMPLATE . 'bower_components/fastclick/lib/fastclick.js') ?>", () => {
            //-- Admin LTE -->
            loadJS("<?= $this->versionControl(TEMPLATE . 'dist/js/adminlte.min.js') ?>");
        });

        //-- Bootstrap -->
        loadJS("<?= $this->versionControl(TEMPLATE . 'bower_components/bootstrap/dist/js/bootstrap.min.js') ?>", () => {

            //-- AJAX Pace -->
            loadJS("<?= $this->versionControl(TEMPLATE . 'bower_components/PACE/pace.js') ?>", () => $(document).ajaxStart(() => Pace.restart()));

            $.fn.CarbonJS = (sc, cb) => (!JSLoaded.has(sc) ? loadJS(sc, cb) : cb());

            //-- Select 2 -->
            $.fn.load_select2 = (select2) =>
                $.fn.CarbonJS("<?= $this->versionControl(TEMPLATE . 'bower_components/select2/dist/js/select2.full.min.js') ?>", () =>
                    $(select2).select2());

            //-- Data tables -->
            $.fn.load_datatables = (table) =>
                $.fn.CarbonJS("<?= $this->versionControl('bower_components/datatables.net-bs/js/dataTables.bootstrap.js') ?>", () =>
                    $(table).DataTable());

            //-- iCheak -->
            $.fn.load_iCheck = (input) => {
                $.fn.CarbonJS("<?= $this->versionControl(TEMPLATE . 'plugins/iCheck/icheck.min.js')?>", () => {
                    $(input).iCheck({
                        checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%' // optional
                    });
                });
            };

            //-- Input Mask -->
            $.fn.load_inputmask = (mask) =>
                $.fn.CarbonJS("<?= $this->versionControl(TEMPLATE . 'plugins/input-mask/jquery.inputmask.js') ?>", () => {
                    loadJS("<?= $this->versionControl(TEMPLATE . 'plugins/input-mask/jquery.inputmask.date.extensions.js') ?>",
                        () => $(mask).inputmask());
                    loadJS("<?= $this->versionControl(TEMPLATE . 'plugins/input-mask/jquery.inputmask.extensions.js') ?>",
                        () => $(mask).inputmask());
                }, () => $(mask).inputmask());

            //-- jQuery Knob -->
            $.fn.load_knob = (knob) => {
                $.fn.CarbonJS("<?= $this->versionControl(TEMPLATE . 'bower_components/jquery-knob/js/jquery.knob.js') ?>", () => {
                    $(knob).knob({
                        draw: function () {
                            // "tron" case
                            if (this.$.data('skin') === 'tron') {

                                var a = this.angle(this.cv)  // Angle
                                    , sa = this.startAngle          // Previous start angle
                                    , sat = this.startAngle         // Start angle
                                    , ea                            // Previous end angle
                                    , eat = sat + a                 // End angle
                                    , r = true;

                                this.g.lineWidth = this.lineWidth;

                                this.o.cursor
                                && (sat = eat - 0.3)
                                && (eat = eat + 0.3);

                                if (this.o.displayPrevious) {
                                    ea = this.startAngle + this.angle(this.value);
                                    this.o.cursor
                                    && (sa = ea - 0.3)
                                    && (ea = ea + 0.3);
                                    this.g.beginPath();
                                    this.g.strokeStyle = this.previousColor;
                                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
                                    this.g.stroke();
                                }

                                this.g.beginPath();
                                this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
                                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
                                this.g.stroke();

                                this.g.lineWidth = 2;
                                this.g.beginPath();
                                this.g.strokeStyle = this.o.fgColor;
                                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                                this.g.stroke();

                                return false;
                            }
                        }
                    });
                });
            };

            //-- Bootstrap Time Picker -->
            $.fn.load_timepicker = (timepicker) => {
                $.fn.CarbonJS("<?= $this->versionControl(TEMPLATE . 'plugins/timepicker/bootstrap-timepicker.min.js') ?>", () => {
                    $(timepicker).timepicker({showInputs: false});
                });
            }

            //--Bootstrap Datepicker -->
            $.fn.load_datepicker = (datepicker) =>
                $.fn.CarbonJS("<?= $this->versionControl(TEMPLATE . 'bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js') ?>", () =>
                    $(datepicker).datepicker({autoclose: true}));

            //--Bootstrap Color Picker -->
            $.fn.load_colorpicker = (colorpicker) =>
                $.fn.CarbonJS("<?= $this->versionControl(TEMPLATE . 'bower_components/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js') ?>", () =>
                    $(colorpicker).colorpicker());

            //-- PJAX-->
            loadJS("<?= $this->versionControl(COMPOSER . 'bower-asset/jquery-pjax/jquery.pjax.js') ?>", () =>
                loadJS("<?= $this->versionControl(COMPOSER . 'bower-asset/mustache.js/mustache.js') ?>", () =>
                    loadJS("<?= $this->versionControl(COMPOSER . 'richardtmiles/carbonphp/Helpers/Carbon.js')?>", () => {
                        Carbon('#pjax-content', 'wss://stats.coach:8888/');
                        // Messages in Navigation, faster to initially load over http
                        $.fn.startApplication('<?= SITE . 'Messages/' ?>');
                        $.fn.startApplication('<?= SITE . 'Notifications/' ?>');
                        $.fn.startApplication('<?= SITE . 'Tasks/' ?>');
                    })));

            //<!-- AdminLTE for demo purposes loadJS("<?= $this->versionControl('dist/js/demo.js') ?>//");

        });
    });

    <!-- Global site tag (gtag.js) - Google Analytics -->
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-100885582-1');
</script>`

[zachleat]

Hey @odahcam, maybe give this guidebook a quick read: https://css-tricks.com/open-source-etiquette-guidebook/ There is an apropos section on “is this maintained” issues.

I wouldn’t say that the project is abandoned. It’s providing value at its currently offered feature set—maybe it doesn’t work for your use case—that’s ok!