major refactor

public/assets/css/app.css

@@ -19,6 +19,12 @@ body {
 	display: none;
 }
 
+.clipboard-success {
+	font-size: 0.8rem;
+	color: #28a745;
+	font-weight: 700;
+}
+
 
 
 /*
@@ -96,16 +102,45 @@ main .options .card + .card {
 	margin-top: 1rem;
 }
 
-main .options .card .card-body .form-label {
+main .options .card .form-label {
 	margin-bottom: 0.15rem;
 	margin-left: 0.15rem;
 }
 
-main .options .card .card-body .form-group {
+main .options .card .form-group {
 	margin-bottom: 0.5rem;
 }
 
-main .options .card .card-body .form-group:last-child {
+main .options .card .form-subgroup {
+	margin-left: 5px;
+	border-left: 2px solid #ced4da;
+	padding-left: 11px;
+}
+
+main .options .card .form-control[type="text"]:placeholder-shown,
+main .options .card .form-control[type="email"]:placeholder-shown {
+	background-color: #f8f8f8;
+}
+
+main .options .card .form-control.domain:placeholder-shown {
+	/*background-color: #f8d7da;*/
+	/*background-color: #dedeff;*/
+	border-color: #3131ff;
+}
+
+main .options .card .form-control.domain::placeholder {
+	color: #000;
+}
+
+main .options .card .form-check-label {
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+main .options .card .form-group:last-child {
 	margin-bottom: 0;
 }
 
@@ -119,15 +154,8 @@ main .file .btn-clipboard {
 	vertical-align: text-bottom;
 }
 
-main .file .clipboard-success {
-	font-size: 0.8rem;
-	color: #28a745;
-	font-weight: 700;
-}
-
 main .file .code,
 main .commands {
-	padding: 0.5rem;
 	overflow-x: auto;
 	font-size: 0.75rem;
 	line-height: 1.25;
@@ -136,11 +164,9 @@ main .commands {
 
 main .commands {
 	margin-bottom: 1rem;
-	padding-top: 0.25rem;
-	padding-bottom: 0.25rem;
 }
 
-main .file .code.source {
+main .file .code.source.hidden {
 	display: none;
 }
 
@@ -152,6 +178,8 @@ main .commands pre {
 
 main .file .code pre code,
 main .commands pre code {
+	display: block;
+	padding: 0.6rem;
 	-moz-tab-size: 4;
 	tab-size: 4;
 	overflow: visible;

public/assets/js/app.js

@@ -10,6 +10,19 @@
 		return repeatedString;
 	};
 
+
+
+	var masonry = new Masonry('main .files .grid', {
+		itemSelector: '.grid-item',
+		columnWidth: '.grid-sizer',
+		percentPosition: true,
+		initLayout: false,
+		stagger: 0,
+		transitionDuration: '0.6s'
+	});
+
+
+
 	angular
 	.module('NginxConfigIoApp', ['ngclipboard', '720kb.tooltips'])
 	.config(function NginxCongigIoConfig($locationProvider) {
@@ -22,17 +35,25 @@
 		// PRIVATE VARIABLES //
 		///////////////////////
 		var data = {
-			domain:				'example.com',
-			path:				'/var/www/example.com',
+			domain:				'',
+			path:				'',
 			document_root:		'/public',
+
 			https:				false,
 			http2:				true,
-			email:				'hello@example.com',
-			cdn:				false,
+
+			cert_type:			'letsencrypt',
+			email:				'',
+			ssl_certificate:	'',
+			ssl_certificate_key:'',
+
 			non_www:			true,
+			cdn:				false,
+
+			index_html:			false,
+
 			php:				'7.2',
 			index_php:			true,
-			index_html:			false,
 			wordpress:			false,
 
 			file_structure:		'unified',
@@ -64,6 +85,9 @@
 		$scope.dataInit = false;
 		$scope.isDirty = false;
 
+		$scope.sslCertificateChanged = false;
+		$scope.sslCertificateKeyChanged = false;
+
 		$scope.extensions = {
 			assets:	'css(\\.map)?|js(\\.map)?',
 			fonts:	'ttf|ttc|otf|eot|woff|woff2',
@@ -79,9 +103,38 @@
 		$scope.clipboardCopy = undefined;
 
 
+
 		/////////////////////
 		// SCOPE FUNCTIONS //
 		/////////////////////
+		$scope.domain = function() {
+			return $scope.data.domain ? $scope.data.domain : 'example.com';
+		};
+
+		$scope.sslCertificate = function() {
+			if ($scope.isLetsEncrypt()) {
+				return '/etc/letsencrypt/live/' + $scope.domain() + '/fullchain.pem'
+			}
+
+			if ($scope.data.ssl_certificate) {
+				return $scope.data.ssl_certificate;
+			}
+
+			return '/etc/nginx/ssl/' + $scope.domain() + '.crt';
+		};
+
+		$scope.sslCertificateKey = function() {
+			if ($scope.isLetsEncrypt()) {
+				return '/etc/letsencrypt/live/' + $scope.domain() + '/privkey.pem'
+			}
+
+			if ($scope.data.ssl_certificate_key) {
+				return $scope.data.ssl_certificate_key;
+			}
+
+			return '/etc/nginx/ssl/' + $scope.domain() + '.key';
+		};
+
 		$scope.refreshHighlighting = function() {
 			var sourceCodes = document.querySelectorAll('main .file .code.source');
 
@@ -93,6 +146,10 @@
 					if (_sourceCode.nextSibling.children.length && _sourceCode.nextSibling.children[0].children.length) {
 						hljs.highlightBlock(_sourceCode.nextSibling.children[0].children[0]);
 					}
+					_sourceCode.classList.add('hidden');
+
+					masonry.reloadItems();
+					masonry.layout();
 				}, 0, true, sourceCode);
 			}
 		};
@@ -101,6 +158,10 @@
 			var hashData = $location.search();
 
 			for (var key in hashData) {
+				if (hashData[key] === 'false') {
+					hashData[key] = false;
+				}
+
 				if ($scope.data[key] !== undefined && typeof $scope.data[key] === typeof hashData[key]) {
 					$scope.isDirty = true;
 					$scope.data[key] = hashData[key];
@@ -154,6 +215,85 @@
 
 
 
+		///////////////////////////
+		// SCOPE QUERY FUNCTIONS //
+		///////////////////////////
+		$scope.isUnified = function() {
+			return $scope.data.file_structure === 'unified';
+		};
+
+		$scope.isModularized = function() {
+			return !$scope.isUnified();
+		};
+
+		$scope.isHTTPS = function() {
+			return $scope.data.https;
+		};
+
+		$scope.isHTTP2 = function() {
+			return $scope.isHTTPS() && $scope.data.http2;
+		};
+
+		$scope.isLetsEncrypt = function() {
+			return $scope.isHTTPS() && $scope.data.cert_type === 'letsencrypt';
+		};
+
+		$scope.isCustomCert = function() {
+			return $scope.isHTTPS() && $scope.data.cert_type === 'custom';
+		};
+
+		$scope.isNonWWW = function() {
+			return $scope.data.non_www;
+		};
+
+		$scope.isWWW = function() {
+			return !$scope.isNonWWW();
+		};
+
+		$scope.isCDN = function() {
+			return $scope.isWWW() && $scope.data.cdn;
+		};
+
+		$scope.isIndexHtml = function() {
+			return $scope.data.index_html;
+		};
+
+		$scope.isPHP = function() {
+			return $scope.data.php !== 'off';
+		};
+
+		$scope.isIndexPhp = function() {
+			return $scope.isPHP() && $scope.data.index_php;
+		};
+
+		$scope.isWordPress = function() {
+			return $scope.isPHP() && $scope.data.wordpress;
+		};
+
+		$scope.isAccessLog = function() {
+			return $scope.data.access_log;
+		};
+
+		$scope.isGzip = function() {
+			return $scope.data.gzip;
+		};
+
+		$scope.isServerTokens = function() {
+			return $scope.data.server_tokens;
+		};
+
+		$scope.isLogNotFound = function() {
+			return $scope.data.log_not_found;
+		};
+
+		$scope.isLimitReq = function() {
+			return $scope.data.limit_req;
+		};
+
+
+
+
+
 		//////////////////
 		// SCOPE EVENTS //
 		//////////////////