Website - JS refactoring

phpstan · Mar 30, 2020 · 43928b6 · 43928b6
1 parent f0ebf30
commit 43928b6
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 79 deletions.
diff --git a/website/_menu.html b/website/_menu.html
@@ -1,59 +1,61 @@
-<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-	<div class="flex justify-between h-16">
-		<div class="flex">
-			<div class="flex-shrink-0 flex items-center">
-				<a href="/"><img class="block h-12 w-auto rounded-lg" src="/images/logo.png" alt="PHPStan" /></a>
-				<h2 class="text-2xl font-semibold leading-tight text-gray-800 ml-4">
-					<a href="/">PHPStan</a>
-				</h2>
-			</div>
-			<div class="hidden sm:-my-px sm:ml-6 sm:flex">
-				<each loop="item, index in mainMenuItems">
-					<if condition="activeMenuItemLink === item.link">
-						<a href="{{ item.link }}" class="ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-blue-500 text-md font-medium leading-5 text-gray-900 focus:outline-none focus:border-blue-700 transition duration-150 ease-in-out">
-							{{ item.title }}
-						</a>
-					</if>
-					<else>
-						<a href="{{ item.link }}" class="ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-md font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
-							{{ item.title }}
-						</a>
-					</else>
-				</each>
+<!-- ko with: mainMenu -->
+	<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="flex justify-between h-16">
+			<div class="flex">
+				<div class="flex-shrink-0 flex items-center">
+					<a href="/"><img class="block h-12 w-auto rounded-lg" src="/images/logo.png" alt="PHPStan" /></a>
+					<h2 class="text-2xl font-semibold leading-tight text-gray-800 ml-4">
+						<a href="/">PHPStan</a>
+					</h2>
+				</div>
+				<div class="hidden sm:-my-px sm:ml-6 sm:flex">
+					<each loop="item, index in mainMenuItems">
+						<if condition="activeMenuItemLink === item.link">
+							<a href="{{ item.link }}" class="ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-blue-500 text-md font-medium leading-5 text-gray-900 focus:outline-none focus:border-blue-700 transition duration-150 ease-in-out">
+								{{ item.title }}
+							</a>
+						</if>
+						<else>
+							<a href="{{ item.link }}" class="ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-md font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
+								{{ item.title }}
+							</a>
+						</else>
+					</each>
 
-				<a target="_blank" href="https://github.com/phpstan/phpstan" class="ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-md font-medium leading-5 text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700 transition duration-150 ease-in-out">
-					GitHub
-					<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="ml-1  w-4 h-4"><path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
-				</a>
+					<a target="_blank" href="https://github.com/phpstan/phpstan" class="ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-md font-medium leading-5 text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700 transition duration-150 ease-in-out">
+						GitHub
+						<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="ml-1  w-4 h-4"><path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+					</a>
+				</div>
+			</div>
+			<div class="-mr-2 flex items-center sm:hidden">
+				<button data-bind="click: toggleMainMenu" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
+					<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+						<path data-bind="css: {hidden: mainMenuOpen, 'inline-flex': !mainMenuOpen()}" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+						<path data-bind="css: {hidden: !mainMenuOpen(), 'inline-flex': mainMenuOpen}" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+					</svg>
+				</button>
 			</div>
-		</div>
-		<div class="-mr-2 flex items-center sm:hidden">
-			<button data-bind="click: toggleMainMenu" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
-				<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-					<path data-bind="css: {hidden: mainMenuOpen, 'inline-flex': !mainMenuOpen()}" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-					<path data-bind="css: {hidden: !mainMenuOpen(), 'inline-flex': mainMenuOpen}" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-				</svg>
-			</button>
 		</div>
 	</div>
-</div>
-<div data-bind="css: {block: mainMenuOpen, hidden: !mainMenuOpen()}" class="hidden sm:hidden">
-	<div class="pt-2 pb-3">
-		<each loop="item, index in mainMenuItems">
-			<if condition="activeMenuItemLink === item.link">
-				<a href="{{ item.link }}" class="mt-1 block pl-3 pr-4 py-2 border-l-4 border-blue-500 text-base font-medium text-blue-700 bg-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100 focus:border-blue-700 transition duration-150 ease-in-out">
-					{{ item.title }}
-				</a>
-			</if>
-			<else>
-				<a href="{{ item.link }}" class="mt-1 block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out">
-					{{ item.title }}
-				</a>
-			</else>
-		</each>
-		<a target="_blank" href="https://github.com/phpstan/phpstan" class="flex items-center mt-1 block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out">
-			<span>GitHub</span>
-			<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4 ml-1"><path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
-		</a>
+	<div data-bind="css: {block: mainMenuOpen, hidden: !mainMenuOpen()}" class="hidden sm:hidden">
+		<div class="pt-2 pb-3">
+			<each loop="item, index in mainMenuItems">
+				<if condition="activeMenuItemLink === item.link">
+					<a href="{{ item.link }}" class="mt-1 block pl-3 pr-4 py-2 border-l-4 border-blue-500 text-base font-medium text-blue-700 bg-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100 focus:border-blue-700 transition duration-150 ease-in-out">
+						{{ item.title }}
+					</a>
+				</if>
+				<else>
+					<a href="{{ item.link }}" class="mt-1 block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out">
+						{{ item.title }}
+					</a>
+				</else>
+			</each>
+			<a target="_blank" href="https://github.com/phpstan/phpstan" class="flex items-center mt-1 block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out">
+				<span>GitHub</span>
+				<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4 ml-1"><path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+			</a>
+		</div>
 	</div>
-</div>
+<!-- /ko -->
diff --git a/website/index.html b/website/index.html
@@ -1,6 +1,6 @@
 <extends src="_layout.html">
 	<block name="scripts">
-		<script src="./playground.ts"></script>
+		<script src="./js/playground.ts"></script>
 	</block>
 	<block name="menu">
 		<scope with="mainMenuItems.playground">

diff --git a/website/js/MainMenuViewModel.ts b/website/js/MainMenuViewModel.ts
@@ -0,0 +1,15 @@
+import * as ko from 'knockout';
+
+export class MainMenuViewModel {
+
+	mainMenuOpen: KnockoutObservable<boolean>;
+
+	constructor() {
+		this.mainMenuOpen = ko.observable(false);
+	}
+
+	toggleMainMenu(): void {
+		this.mainMenuOpen(!this.mainMenuOpen());
+	}
+
+}
diff --git a/website/js/PlaygroundViewModel.ts b/website/js/PlaygroundViewModel.ts
@@ -1,10 +1,11 @@
 import * as ko from 'knockout';
 import {PHPStanError} from './PHPStanError';
 import $ from 'jquery';
+import {MainMenuViewModel} from './MainMenuViewModel';
 
 export class PlaygroundViewModel {
 
-	mainMenuOpen: KnockoutObservable<boolean>;
+	mainMenu: MainMenuViewModel;
 	code: KnockoutObservable<string>;
 	codeDelayed: KnockoutComputed<string>;
 	errors: KnockoutObservableArray<PHPStanError>;
@@ -27,7 +28,7 @@ export class PlaygroundViewModel {
 	apiBaseUrl: string = 'https://api.phpstan.org';
 
 	constructor() {
-		this.mainMenuOpen = ko.observable(false);
+		this.mainMenu = new MainMenuViewModel();
 		this.code = ko.observable('');
 		this.codeDelayed = ko.pureComputed(this.code).extend({
 			notify: 'always',
@@ -146,10 +147,6 @@ export class PlaygroundViewModel {
 		}
 	}
 
-	toggleMainMenu(): void {
-		this.mainMenuOpen(!this.mainMenuOpen());
-	}
-
 	startAcceptingChanges(): void {
 		this.code.subscribe(() => {
 			this.preanalyse();

diff --git a/website/js/playground.ts b/website/js/playground.ts
@@ -0,0 +1,17 @@
+import $ from 'jquery';
+import * as ko from 'knockout';
+import {PlaygroundViewModel} from './PlaygroundViewModel';
+import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/mode/xml/xml';
+import 'codemirror/mode/clike/clike';
+import 'codemirror/mode/php/php';
+import './handlers';
+
+$(() => {
+
+	const playgroundViewModel = new PlaygroundViewModel();
+	playgroundViewModel.init(window.location.pathname, () => {
+		ko.applyBindings(playgroundViewModel);
+	});
+
+});
diff --git a/website/playground.ts b/website/playground.ts
diff --git a/website/tsconfig.json b/website/tsconfig.json
@@ -10,5 +10,8 @@
 		"strictNullChecks": true,
 		"noImplicitReturns": true,
 		"allowSyntheticDefaultImports": true
-	}
+	},
+	"include": [
+		"js/**/*"
+	]
 }