ss-utils - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

package.json

 {
   "name": "ss-utils",
   "title": "ServiceStack JavaScript Utils",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "ServiceStack's JavaScript library providing a number of convenience utilities in developing javascript web apps. Integrates with ServiceStack's Server features including Error Handling, Validation and Server Events",
@@ -6,0 +6,0 @@ "homepage": "https://github.com/ServiceStack/ss-utils",

ss-utils.js

 ;(function (root, f) {
-    if (typeof define === "function" && define.amd) {
+    if (typeof exports === 'object' && typeof module === 'object')
+        module.exports = f(require("jquery"));
+    if (typeof define === "function" && define.amd)
         define(["jquery"], f);
-    } else if (typeof exports === "object") {
-        module.exports = f(require("jquery"));
-    } else {
+    else if (typeof exports === "object")
+        f(require("jquery"));
+    else
         f(root.jQuery);
-    }
 })(this, function ($) {
@@ -44,3 +45,3 @@
             ? window.getSelection().toString()
-            : document.selection && document.selection.type != "Control"
+            : document.selection && document.selection.type !== "Control"
                 ? document.selection.createRange().text : "";
@@ -115,3 +116,3 @@ };
             if (p == null) p = '';
-            if (p[0] == '{' && p[p.length - 1] == '}') {
+            if (p[0] === '{' && p[p.length - 1] === '}') {
                 var key = argKeys[p.substring(1, p.length - 1).toLowerCase()];
@@ -134,3 +135,3 @@ if (key) {
         return typeof t != 'string' ? t : t.replace(/([A-Z]|[0-9]+)/g, ' $1').replace(/_/g, ' ');
-    };
+    }
     $.ss.humanize = function (s) { return !s || s.indexOf(' ') >= 0 ? s : splitCase(s); };
@@ -141,2 +142,4 @@
     }
+    $.ss.toCamelCase = toCamelCase;
+    $.ss.toPascalCase = function (s) { return !s ? s : s.charAt(0).toUpperCase() + s.substring(1); };
     $.ss.normalizeKey = function (key) {
@@ -194,3 +197,74 @@ return typeof key == "string" ? key.toLowerCase().replace(/_/g, '') : key;
     };
+    $.ss.createElement = createElement;
+    var keyAliases = {className:'class',htmlFor:'for'};
+    function createElement(tagName, options, attrs) {
+        var el = document.createElement(tagName);
+        if (attrs) {
+            for (var key in attrs) {
+                if (!attrs.hasOwnProperty(key)) continue;
+                el.setAttribute(keyAliases[key] || key, attrs[key]);
+            }
+        }
+        if (options && options.insertAfter) {
+            options.insertAfter.parentNode.insertBefore(el, options.insertAfter.nextSibling);
+        }
+        return el;
+    }
+    $.ss.showInvalidInputs = function() {
+        var errorMsg = this.getAttribute('data-invalid');
+        if (errorMsg) {
+            var isCheck = this.type === "checkbox" || this.type === "radio" || hasClass(this, 'form-check');
+            var elFormCheck = isCheck ? parent(this,'form-check') : null;
+            if (!isCheck)
+                addClass(this, 'is-invalid');
+            else
+                addClass(elFormCheck || this.parentElement, 'is-invalid form-control');
 
+            var elNext = this.nextElementSibling;
+            var elLast = elNext && (elNext.getAttribute('for') === this.id || elNext.tagName === "SMALL")
+                ? (isCheck ? elFormCheck || elNext.parentElement : elNext)
+                : this;
+            var elError = elLast.nextElementSibling && hasClass(elLast.nextElementSibling, 'invalid-feedback')
+                ? elLast.nextElementSibling
+                : $.ss.createElement("div", { insertAfter:elLast }, { className: 'invalid-feedback' });
+            elError.innerHTML = errorMsg;
+        }
+    };
+    function parent(el,cls) {
+        while (!hasClass(el,cls))
+            el = el.parentElement;
+        return el;
+    }
+    function hasClass(el, cls) {
+        return (" " + el.className + " ").replace(/[\n\t\r]/g, " ").indexOf(" " + cls + " ") > -1;
+    }
+    function addClass(el, cls) {
+        if (!hasClass(el, cls)) el.className = (el.className + " " + cls).trim();
+    }
+    function errorResponseExcept(status, fieldNames) {
+        if (typeof fieldNames == 'string')
+            fieldNames = arguments.length == 1 ? [fieldNames] : Array.prototype.slice.call(arguments);
+        if (fieldNames && !(status.errors == null || status.errors.length == 0)) {
+            var lowerFieldsNames = fieldNames.map(function (x) { return (x || '').toLowerCase(); });
+            for (var i = 0, _a = status.errors; i < _a.length; i++) {
+                var field = _a[i];
+                if (lowerFieldsNames.indexOf((field.fieldName || '').toLowerCase()) !== -1) {
+                    return undefined;
+                }
+            }
+            for (var _b = 0, _c = status.errors; _b < _c.length; _b++) {
+                var field = _c[_b];
+                if (lowerFieldsNames.indexOf((field.fieldName || '').toLowerCase()) === -1) {
+                    return field.message || field.errorCode;
+                }
+            }
+        }
+        return status.message || status.errorCode || undefined;
+    }
+    $.ss.errorResponseExcept = errorResponseExcept;
+    $.fn.bootstrap = function(){
+        $(this).find('[data-invalid]').each($.ss.showInvalidInputs);
+        return this;
+    };
+
     $.fn.setFieldError = function (name, msg) {
@@ -218,2 +292,3 @@ $(this).applyErrors({
 
+        var bs4 = opt && opt.type === "bootstrap-v4";
         var o = $.extend({}, $.ss.validation, opt);
@@ -233,3 +308,4 @@ if (opt && opt.messages) {
                 var $prev = $el.prev(), $next = $el.next();
-                var fieldId = this.id || $el.attr("name");
+                var isCheck = this.type === "radio" || this.type === "checkbox";
+                var fieldId = (!isCheck ? this.id : null) || $el.attr("name");
                 if (!fieldId) return;
@@ -240,6 +316,8 @@
                 fieldMap[key] = $el;
-                if ($prev.hasClass("help-inline") || $prev.hasClass("help-block")) {
-                    fieldLabelMap[key] = $prev;
-                } else if ($next.hasClass("help-inline") || $next.hasClass("help-block")) {
-                    fieldLabelMap[key] = $next;
+                if (!bs4) {
+                    if ($prev.hasClass("help-inline") || $prev.hasClass("help-block")) {
+                        fieldLabelMap[key] = $prev;
+                    } else if ($next.hasClass("help-inline") || $next.hasClass("help-block")) {
+                        fieldLabelMap[key] = $next;
+                    }
                 }
@@ -256,4 +334,10 @@ });
                 if ($field) {
-                    $field.addClass("error");
-                    $field.parent().addClass("has-error");
+                    if (!bs4) {
+                        $field.addClass("error");
+                        $field.parent().addClass("has-error");
+                    } else {
+                        var type = $field.attr('type'), isCheck = type === "radio" || type === "checkbox";
+                        if (!isCheck) $field.addClass("is-invalid");
+                        $field.attr("data-invalid", filter(error.message, error.errorCode, "field"));
+                    }
                 }
@@ -267,9 +351,21 @@ var $lblErr = fieldLabelMap[key];
             });
+
+            this.find("[data-validation-summary]").each(function () {
+               var fields = this.getAttribute('data-validation-summary').split(','); 
+               var summaryMsg = errorResponseExcept(status, fields);
+               if (summaryMsg)
+                   this.innerHTML = bsAlert(summaryMsg);
+            });
         } else {
-            this.find(".error-summary")
-                .html(filter(status.message || splitCase(status.errorCode), status.errorCode, "summary"))
-                .show();
+            var htmlSummary = filter(status.message || splitCase(status.errorCode), status.errorCode, "summary");
+            if (!bs4) {
+                this.find(".error-summary").html(htmlSummary).show();
+            } else {
+                this.find("[data-validation-summary]").html(htmlSummary[0] === "<" ? htmlSummary : bsAlert(htmlSummary));
+            }
         }
         return this;
     };
+    function bsAlert(msg) { return '<div class="alert alert-danger">' + msg + '</div>'; }
+    
     $.fn.clearErrors = function () {
@@ -284,9 +380,16 @@ this.removeClass("has-errors");
         });
-        return this.find(".has-error").each(function () {
+        this.find(".has-error").each(function () {
             $(this).removeClass("has-error");
         });
+        this.find("[data-validation-summary]").html("");
+        this.find('.form-check.is-invalid [data-invalid]').removeAttr('data-invalid');
+        this.find('.form-check.is-invalid').removeClass('form-control');
+        this.find('.is-invalid').removeClass('is-invalid').removeAttr('data-invalid');
+        this.find('.is-valid').removeClass('is-valid');
     };
-    $.fn.bindForm = function (orig) {
+    $.fn.bindForm = function (orig) { //bootstrap v3
         return this.each(function () {
             var f = $(this);
+            if (orig.model)
+                $.ss.populateForm(this,orig.model);
             f.submit(function (e) {
@@ -298,4 +401,17 @@ e.preventDefault();
     };
+    $.fn.bootstrapForm = function (orig) { //bootstrap v4
+        return this.each(function () {
+            var f = $(this);
+            if (orig.model) 
+                $.ss.populateForm(this,orig.model);
+            f.submit(function (e) {
+                e.preventDefault();
+                orig.type = "bootstrap-v4";
+                return $(f).ajaxSubmit(orig);
+            });
+        });
+    };
     $.fn.ajaxSubmit = function (orig) {
         orig = orig || {};
+        var bs4 = orig.type === "bootstrap-v4";
         if (orig.validation) {
@@ -323,3 +439,3 @@ $.extend($.ss.validation, orig.validation);
                 error: function (jq, jqStatus, statusText) {
-                    var err, errMsg = "The request failed with " + statusText;
+                    var err, errMsg = "The request failed with " + (statusText || jq.statusText);
                     try {
@@ -332,4 +448,8 @@ err = JSON.parse(jq.responseText);
                         f.find(".error-summary").html(errMsg);
+                        if (bs4) {
+                            var elSummary = f.find('[data-validation-summary]');
+                            elSummary.html('<div class="alert alert-danger">' + errMsg + '</div>');
+                        }
                     } else {
-                        f.applyErrors(err.ResponseStatus || err.responseStatus);
+                        f.applyErrors(err.ResponseStatus || err.responseStatus, {type:orig.type});
                     }
@@ -339,2 +459,5 @@ if (orig.error) {
                     }
+                    if (bs4) {
+                        f.find('[data-invalid]').each($.ss.showInvalidInputs);
+                    }
                 },
@@ -353,3 +476,3 @@ complete: function (jq) {
                     if (evt) {
-                        var pos = attr.indexOf(':');
+                        var pos = evt.indexOf(':');
                         var cmd = pos >= 0 ? evt.substring(0, pos) : evt;
@@ -360,3 +483,3 @@ var data = pos >= 0 ? evt.substring(pos + 1) : null;
                 },
-                dataType: "json",
+                dataType: "json"
             });
@@ -396,3 +519,3 @@ $.ajax(opt);
             var data = attr.substring(pos + 1);
-            if (cmd == 'trigger') {
+            if (cmd === 'trigger') {
                 $el.trigger(data, [e.target]);
@@ -408,3 +531,3 @@ } else {
             if (fn) {
-                fn.apply(e.target, [].splice(arguments));
+                fn.apply(e.target, [].slice.call(arguments));
             }
@@ -423,2 +546,47 @@ }
 
+    $.ss.populateForm = function(form, model) {
+        if (!model)
+            return;
+        var toggleCase = function (s) { return !s ? s :
+            s[0] === s[0].toUpperCase() ? exports.toCamelCase(s) : s[0] === s[0].toLowerCase() ? exports.toPascalCase(s) : s; };
+        for (var key in model) {
+            var val = model[key];
+            if (typeof val == 'undefined' || val === null)
+                val = '';
+            var el = form.elements.namedItem(key) || form.elements.namedItem(toggleCase(key));
+            var input = el;
+            if (!el)
+                continue;
+            var type = input.type || el[0].type;
+            switch (type) {
+                case 'radio':
+                case 'checkbox':
+                    var len = el.length;
+                    for (var i = 0; i < len; i++) {
+                        el[i].checked = (val.indexOf(el[i].value) > -1);
+                    }
+                    break;
+                case 'select-multiple':
+                    var values = $.isArray(val) ? val : [val];
+                    var select = el;
+                    for (var i = 0; i < select.options.length; i++) {
+                        select.options[i].selected = (values.indexOf(select.options[i].value) > -1);
+                    }
+                    break;
+                case 'select':
+                case 'select-one':
+                    input.value = val.toString() || val;
+                    break;
+                case 'date':
+                    var d = exports.toDate(val);
+                    if (d)
+                        input.value = d.toISOString().split('T')[0];
+                    break;
+                default:
+                    input.value = val;
+                    break;
+            }
+        }
+    };
+
     $.fn.setActiveLinks = function () {
@@ -428,3 +596,3 @@ var url = window.location.href;
             $(this).filter(function () {
-                return this.href == url;
+                return this.href === url;
             })
@@ -502,3 +670,3 @@ .addClass('active')
         var hold = $.ss.eventSource;
-        var es = new EventSource(opt.url || $.ss.eventSourceUrl || hold.url);
+        var es = new EventSource(opt.url || $.ss.eventSourceUrl || hold.url, { withCredentials:hold.withCredentials });
         es.onerror = opt.onerror || hold.onerror;
@@ -505,0 +673,0 @@ es.onmessage = opt.onmessage || hold.onmessage;

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38527

increased by26.11%

Lines of code

891

increased by22.56%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes