mouseenter base64

fixes a Safari bug

public/assets/js/app.js

@@ -385,6 +385,8 @@
 
 		$scope.activeStep = 'download';
 
+		$scope.base64 = '';
+
 		$scope.gzipTypes = 'text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml';
 
 		$scope.extensions = {
@@ -570,18 +572,19 @@
 			});
 		};
 
-
-		$scope.copyAsBase64 = function() {
+		$scope.prepareBase64 = function() {
 			generateZip(function (content) {
 				var reader = new FileReader();
 				reader.readAsDataURL(content);
 				reader.onloadend = function() {
 					var base64 = reader.result.replace(/^data:.+;base64,/, '');
-					$window.document.querySelector('#base64-zip-line').innerHTML = 'echo \'' + base64 + '\' | base64 --decode > /etc/nginx/nginxconfig.io-' + $scope.getDomains().join(',') + '.zip';
-					$window.document.querySelector('#btn-base64-zip-line').click();
+
+					$scope.base64 = 'echo \'' + base64 + '\' | base64 --decode > /etc/nginx/nginxconfig.io-' + $scope.getDomains().join(',') + '.zip';
 				}
 			});
+		};
 
+		$scope.copyAsBase64 = function() {
 			gtag('event', $scope.getDomains().join(','), {
 				event_category: 'download_base64',
 			});

public/index.html

@@ -1033,14 +1033,9 @@
 					<div class="grid-sizer col-xl-6"></div>
 					<div class="grid-item col-xl-12 mb-3 text-center" ng-cloak>
 						<button class="btn btn-primary btn-sm btn-download" ng-click="downloadZip()"><img src="assets/img/download.svg" alt="Download"> Generated config <small>(.zip)</small></button>
-						<button class="btn btn-success btn-sm btn-download btn-base64" ng-click="copyAsBase64()"><img src="assets/img/download.svg" alt="Download"> Copy Base64 <small>(inline)</small></button>
-					</div>
-					<div id="base64-zip-wrapper" class="custom-control-input">
-						<button class="btn btn-light btn-clipboard" id="btn-base64-zip-line" ngclipboard data-clipboard-target="#base64-zip-line" ngclipboard-success="clipboardSuccess('base64-zip-line')">
-							<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
-						</button>
-						<div id="base64-zip-line"></div>
+						<button class="btn btn-success btn-sm btn-download btn-base64" ng-mouseenter="prepareBase64()" ngclipboard data-clipboard-target="#base64-zip-line" ngclipboard-success="clipboardSuccess('base64-zip-line')"><img src="assets/img/download.svg" alt="Download"> Copy Base64 <small>(inline)</small></button>
 					</div>
+					<div id="base64-zip-line">{{ base64 }}</div>
 					<section class="file grid-item" ng-class="isModularized() || isWordPress() ? 'col-xl-6' : 'col-xl-12'" ng-cloak>
 						<strong>/etc/nginx/nginx.conf</strong>
 						<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-nginx" ngclipboard-success="clipboardSuccess('nginx.conf')">

public/templates/commands.html

@@ -5,7 +5,7 @@
 --><span class="hljs-comment"><span class="counter">.</span> <strong>Download</strong> generated config:</span> <strong><a href="#" ng-click="downloadZip()">nginxconfig.io-{{ getDomains().join(',') }}.zip</a></strong>
    <span class="hljs-comment"><strong>Upload</strong> to server's</span> <strong>/etc/nginx/</strong> <span class="hljs-comment">directory</span>
    <span class="hljs-comment">- OR -</span>
-   <span class="hljs-comment"><strong>Copy</strong> as Base64 string:</span> <strong><a href="#" ng-click="copyAsBase64()">Copy to clipboard</a></strong> <span class="hljs-comment small">(echo 'BASE64' | base64 --decode > /etc/nginx/nginxconfig.io-{{ getDomains().join(',') }}.zip)</span>
+   <span class="hljs-comment"><strong>Copy</strong> as Base64 string:</span> <strong><a href="#" ng-mouseenter="prepareBase64()" ng-click="copyAsBase64()" ngclipboard data-clipboard-target="#base64-zip-line" ngclipboard-success="clipboardSuccess('base64-zip-line')">Copy to clipboard</a></strong> <span class="hljs-comment small">(echo 'BASE64' | base64 --decode > /etc/nginx/nginxconfig.io-{{ getDomains().join(',') }}.zip)</span>
    <span class="hljs-comment"><strong>Paste</strong> from clipboard and run the command</span>
 <span class="hljs-comment"><span class="counter">.</span> Go to NGINX directory (over SSH):</span>
    <span class="hljs-section">cd</span> /etc/nginx

resources/scss/_main.scss

@@ -291,6 +291,12 @@ main {
 		}
 	}
 
+	#base64-zip-line {
+		position: absolute;
+		top: -9999px;
+		left: -9999px;
+	}
+
 	.commands,
 	.file .code {
 		overflow-x: auto;