Reorganizing Javascript code and references

BTCPayServer/Views/Apps/ViewPayButton.cshtml

@@ -122,7 +122,7 @@
                 <span class="copyLabelPopup" style="display:none;">Copied</span>
             </div>
             <div class="col-lg-4">
-                <img id="previewButton" src="~/img/paywithbtcpay.png" />
+                <img id="previewButton" src="~/img/paybutton/pay.png" />
             </div>
         </div>
         <div class="row" v-show="errors.any()">
@@ -135,29 +135,22 @@
 </section>
 
 
-@section Scripts {
+@section HeadScripts {
     <link rel="stylesheet" href="~/vendor/highlightjs/default.min.css">
     <script src="~/vendor/highlightjs/highlight.min.js"></script>
 
     <script src="~/vendor/vuejs/vue.js"></script>
-    <!-- jsdelivr cdn -->
-    <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
+    <script src="~/vendor/vuejs-vee-validate/vee-validate.js"></script>
 
     <script src="~/vendor/clipboard.js/clipboard.js"></script>
 
+    <script src="~/paybutton/paybutton.js"></script>
+}
+
+@section Scripts {
     <script type="text/javascript">
         var srvModel = @Html.Raw(Json.Serialize(Model));
-        Vue.use(VeeValidate);
-        const dictionary = {
-            en: {
-                attributes: {
-                    price: 'Price', checkoutDesc: 'Checkout Description', orderId: 'Order Id',
-                    serverIpn: 'Server IPN', notifyEmail: 'Send Email Notifications', browserRedirect: 'Browser Redirect',
-                    payButtonImageUrl: "Pay Button Image Url"
-                }
-            }
-        };
-        VeeValidate.Validator.localize(dictionary);
+
         var payButtonCtrl = new Vue({
             el: '#payButtonCtrl',
             data: {
@@ -169,79 +162,5 @@
                 }
             }
         });
-
-        function inputChanges(event, buttonSize) {
-            if (buttonSize != null) {
-                srvModel.buttonSize = buttonSize;
-            }
-
-            var html = '&lt;form method="POST" action="' + srvModel.urlRoot + '/apps/3jVExUHqRkGi4eaJEFCTxw5zjk14VAFzoVZXZJ3fbwED/pay"&gt;';
-            html += addinput("price", srvModel.price);
-            if (srvModel.currency) {
-                html += addinput("currency", srvModel.currency);
-            }
-            if (srvModel.checkoutDesc) {
-                html += addinput("checkoutDesc", srvModel.checkoutDesc);
-            }
-            if (srvModel.orderId) {
-                html += addinput("orderId", srvModel.orderId);
-            }
-
-            if (srvModel.serverIpn) {
-                html += addinput("serverIpn", srvModel.serverIpn);
-            }
-            if (srvModel.browserRedirect) {
-                html += addinput("browserRedirect", srvModel.browserRedirect);
-            }
-            if (srvModel.notifyEmail) {
-                html += addinput("notifyEmail", srvModel.notifyEmail);
-            }
-
-            var width = "209px";
-            if (srvModel.buttonSize == 0) {
-                width = "146px";
-            } else if (srvModel.buttonSize == 1) {
-                width = "168px";
-            } else if (srvModel.buttonSize == 2) {
-                width = "209px";
-            }
-            html += '\n    &lt;input type="image" src="' + srvModel.payButtonImageUrl + '" name="submit" style="width:' + width +
-                '" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor"&gt;';
-
-            html += '\n&lt;/form&gt;';
-
-            $("#mainCode").html(html);
-
-            $('pre code').each(function (i, block) {
-                hljs.highlightBlock(block);
-            });
-
-            $("#previewButton").css("width", width);
-            $("#previewButton").attr("src", srvModel.payButtonImageUrl);
-
-            return html;
-        }
-
-        function addinput(name, value) {
-            var html = '\n    &lt;input type="hidden" name="' + name + '" value="' + value + '" /&gt;';
-            return html;
-        }
-
-        $(function () {
-            inputChanges();
-        });
-
-        String.prototype.replaceAll = function (search, replacement) {
-            var target = this;
-            return target.replace(new RegExp(search, 'g'), replacement);
-        };
-
-        // Clipboard Copy
-        new Clipboard('#copyCode', {
-            text: function (trigger) {
-                $(".copyLabelPopup").show().delay(1000).fadeOut(500);
-                return inputChanges().replaceAll("&lt;", "<").replaceAll("&gt;", ">");
-            }
-        });
     </script>
 }

BTCPayServer/Views/Shared/_Layout.cshtml

@@ -26,6 +26,8 @@
 
     @* JS *@
     <bundle name="wwwroot/bundles/main-bundle.min.js" />
+
+    @RenderSection("HeadScripts", required: false)
 </head>
 
 <body id="page-top">

BTCPayServer/Views/Shared/_NavLayout.cshtml

@@ -3,7 +3,6 @@
     ViewBag.ShowMenu = ViewBag.ShowMenu ?? true;
 }
 
-
 <section>
     <div class="container">
         <div class="row">
@@ -16,7 +15,7 @@
         <div>
             <div class="row">
                 <div class="col-md-3">
-                    @if(ViewBag.ShowMenu)
+                    @if (ViewBag.ShowMenu)
                     {
                         @await Html.PartialAsync("_Nav")
                     }
@@ -28,6 +27,10 @@
         </div>
     </div>
 </section>
+@section HeadScripts {
+    @RenderSection("HeadScripts", required: false)
+}
+
 @section Scripts {
     @RenderSection("Scripts", required: false)
 }

BTCPayServer/wwwroot/paybutton/paybutton.js

@@ -0,0 +1,85 @@
+$(function () {
+    inputChanges();
+
+    // Clipboard Copy
+    new Clipboard('#copyCode', {
+        text: function (trigger) {
+            $(".copyLabelPopup").show().delay(1000).fadeOut(500);
+            return inputChanges().replaceAll("&lt;", "<").replaceAll("&gt;", ">");
+        }
+    });
+});
+
+Vue.use(VeeValidate);
+const dictionary = {
+    en: {
+        attributes: {
+            price: 'Price', checkoutDesc: 'Checkout Description', orderId: 'Order Id',
+            serverIpn: 'Server IPN', notifyEmail: 'Send Email Notifications', browserRedirect: 'Browser Redirect',
+            payButtonImageUrl: "Pay Button Image Url"
+        }
+    }
+};
+VeeValidate.Validator.localize(dictionary);
+
+function inputChanges(event, buttonSize) {
+    if (buttonSize != null) {
+        srvModel.buttonSize = buttonSize;
+    }
+
+    var html = '&lt;form method="POST" action="' + srvModel.urlRoot + '/apps/3jVExUHqRkGi4eaJEFCTxw5zjk14VAFzoVZXZJ3fbwED/pay"&gt;';
+    html += addinput("price", srvModel.price);
+    if (srvModel.currency) {
+        html += addinput("currency", srvModel.currency);
+    }
+    if (srvModel.checkoutDesc) {
+        html += addinput("checkoutDesc", srvModel.checkoutDesc);
+    }
+    if (srvModel.orderId) {
+        html += addinput("orderId", srvModel.orderId);
+    }
+
+    if (srvModel.serverIpn) {
+        html += addinput("serverIpn", srvModel.serverIpn);
+    }
+    if (srvModel.browserRedirect) {
+        html += addinput("browserRedirect", srvModel.browserRedirect);
+    }
+    if (srvModel.notifyEmail) {
+        html += addinput("notifyEmail", srvModel.notifyEmail);
+    }
+
+    var width = "209px";
+    if (srvModel.buttonSize == 0) {
+        width = "146px";
+    } else if (srvModel.buttonSize == 1) {
+        width = "168px";
+    } else if (srvModel.buttonSize == 2) {
+        width = "209px";
+    }
+    html += '\n    &lt;input type="image" src="' + srvModel.payButtonImageUrl + '" name="submit" style="width:' + width +
+        '" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor"&gt;';
+
+    html += '\n&lt;/form&gt;';
+
+    $("#mainCode").html(html);
+
+    $('pre code').each(function (i, block) {
+        hljs.highlightBlock(block);
+    });
+
+    $("#previewButton").css("width", width);
+    $("#previewButton").attr("src", srvModel.payButtonImageUrl);
+
+    return html;
+}
+
+function addinput(name, value) {
+    var html = '\n    &lt;input type="hidden" name="' + name + '" value="' + value + '" /&gt;';
+    return html;
+}
+
+String.prototype.replaceAll = function (search, replacement) {
+    var target = this;
+    return target.replace(new RegExp(search, 'g'), replacement);
+};