Skip to content

Commit 69df1de

Browse files
jschroed91jschroed91
committed
Merge pull request #6 from caxy/fix-enhance-update_demo
Break out HTML content to individual HTML, CSS, JS files
2 parents 5073ef7 + 4787a01 commit 69df1de

File tree

4 files changed

+129
-133
lines changed

4 files changed

+129
-133
lines changed

‎demo/demo.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.row {
2+
width: 90%;
3+
clear: both;
4+
margin: 0 auto;
5+
}
6+
.html-edit {
7+
float: left;
8+
width: 45%;
9+
position: relative;
10+
}
11+
.html-preview {
12+
float: right;
13+
width: 45%;
14+
border: 1px solid #999;
15+
height: 200px;
16+
overflow: auto;
17+
padding: 5px;
18+
}
19+
textarea {
20+
width: 100%;
21+
height: 210px;
22+
}

‎demo/demo.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<html ng-app="demo">
2+
<head>
3+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
4+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.min.js"></script>
5+
<script type="text/javascript" src="demo.js"></script>
6+
<link type="text/css" href="demo.css" rel="stylesheet">
7+
</head>
8+
<body>
9+
<div ng-controller="diffCtrl">
10+
<div class="controls row">
11+
<button ng-click="reset()">RESET</button>
12+
<span ng-repeat="demo in demos">
13+
<button ng-click="diffDemo($index)">DEMO {{$index + 1}}</button>
14+
</span>
15+
</div>
16+
17+
<div class="row">
18+
<h2>Old HTML</h2>
19+
<div class="html-edit">
20+
<textarea ng-model="oldText" name="old_text" ng-change="update()"></textarea>
21+
</div>
22+
<div class="html-preview" ng-bind-html="trustHtml(oldText)"></div>
23+
</div>
24+
<div class="row">
25+
<h2>New HTML</h2>
26+
<div class="html-edit">
27+
<textarea ng-model="newText" name="new_text" ng-change="update()"></textarea>
28+
</div>
29+
<div class="html-preview" ng-bind-html="trustHtml(newText)"></div>
30+
</div>
31+
32+
<div class="row">
33+
<h2>Compared HTML <span ng-show="loading || waiting">- {{ loading ? 'Loading' : 'Waiting' }}...</span></h2>
34+
<div class="html-edit">
35+
<textarea ng-model="diff" name="diff" disabled ng-change="update()"></textarea>
36+
</div>
37+
<div class="html-preview" ng-bind-html="trustHtml(diff)"></div>
38+
</div>
39+
</div>
40+
</body>
41+
</html>

‎demo/demo.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
var demo = angular.module('demo', ['ngSanitize']);
2+
3+
demo.controller('diffCtrl', ['$scope', '$http', '$sce', '$timeout', function ($scope, $http, $sce, $timeout) {
4+
$scope.demos = [];
5+
$scope.updateDelay = 800;
6+
$scope.currentTimeout = null;
7+
$scope.loading = false;
8+
$scope.waiting = false;
9+
10+
$scope.trustHtml = function (text) {
11+
return typeof text !== 'undefined' ? $sce.trustAsHtml(text) : '';
12+
};
13+
14+
$scope.reset = function () {
15+
$scope.oldText = '';
16+
$scope.newText = '';
17+
$scope.diff = '';
18+
$scope.loading = false;
19+
$scope.waiting = false;
20+
if ($scope.currentTimeout) {
21+
$timeout.cancel($scope.currentTimeout);
22+
}
23+
}
24+
25+
$scope.update = function () {
26+
if ($scope.currentTimeout) {
27+
$timeout.cancel($scope.currentTimeout);
28+
}
29+
$scope.currentTimeout = $timeout(function () {
30+
$scope.getDiff();
31+
}, $scope.updateDelay);
32+
33+
$scope.waiting = true;
34+
};
35+
36+
$scope.getDiff = function () {
37+
$scope.waiting = false;
38+
$scope.loading = true;
39+
$http.post('index.php', { oldText: $scope.oldText, newText: $scope.newText })
40+
.success(function (data) {
41+
$scope.diff = data.diff;
42+
$scope.loading = false;
43+
});
44+
};
45+
46+
$scope.loadDemos = function () {
47+
$http.get('demo_text.php')
48+
.success(function (data) {
49+
$scope.demos = data;
50+
});
51+
};
52+
53+
$scope.diffDemo = function (index) {
54+
if (typeof index === 'undefined') {
55+
index = 0;
56+
}
57+
58+
$scope.oldText = $scope.demos[index]['old'];
59+
$scope.newText = $scope.demos[index]['new'];
60+
$scope.getDiff();
61+
};
62+
63+
$scope.loadDemos();
64+
}]);

‎demo/index.php‎

Lines changed: 2 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -16,137 +16,6 @@
1616
header('Content-Type: application/json');
1717
echo json_encode(array('diff' => $diff->getDifference()));
1818
} else {
19-
?>
20-
<html ng-app="demo">
21-
<head>
22-
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
23-
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.min.js"></script>
24-
<style>
25-
.row {
26-
width: 90%;
27-
clear: both;
28-
margin: 0 auto;
29-
}
30-
.html-edit {
31-
float: left;
32-
width: 45%;
33-
position: relative;
34-
}
35-
.html-preview {
36-
float: right;
37-
width: 45%;
38-
border: 1px solid #999;
39-
height: 200px;
40-
overflow: auto;
41-
padding: 5px;
42-
}
43-
textarea {
44-
width: 100%;
45-
height: 210px;
46-
}
47-
</style>
48-
</head>
49-
<body>
50-
<div ng-controller="diffCtrl">
51-
<div class="controls row">
52-
<button ng-click="reset()">RESET</button>
53-
<span ng-repeat="demo in demos">
54-
<button ng-click="diffDemo($index)">DEMO {{$index + 1}}</button>
55-
</span>
56-
</div>
57-
58-
<div class="row">
59-
<h2>Old HTML</h2>
60-
<div class="html-edit">
61-
<textarea ng-model="oldText" name="old_text" ng-change="update()"></textarea>
62-
</div>
63-
<div class="html-preview" ng-bind-html="trustHtml(oldText)"></div>
64-
</div>
65-
<div class="row">
66-
<h2>New HTML</h2>
67-
<div class="html-edit">
68-
<textarea ng-model="newText" name="new_text" ng-change="update()"></textarea>
69-
</div>
70-
<div class="html-preview" ng-bind-html="trustHtml(newText)"></div>
71-
</div>
72-
73-
<div class="row">
74-
<h2>Compared HTML <span ng-show="loading || waiting">- {{ loading ? 'Loading' : 'Waiting' }}...</span></h2>
75-
<div class="html-edit">
76-
<textarea ng-model="diff" name="diff" disabled ng-change="update()"></textarea>
77-
</div>
78-
<div class="html-preview" ng-bind-html="trustHtml(diff)"></div>
79-
</div>
80-
</div>
81-
82-
<script type="text/javascript">
83-
var demo = angular.module('demo', ['ngSanitize']);
84-
85-
demo.controller('diffCtrl', ['$scope', '$http', '$sce', '$timeout', function ($scope, $http, $sce, $timeout) {
86-
$scope.demos = [];
87-
$scope.updateDelay = 800;
88-
$scope.currentTimeout = null;
89-
$scope.loading = false;
90-
$scope.waiting = false;
91-
92-
$scope.trustHtml = function (text) {
93-
return typeof text !== 'undefined' ? $sce.trustAsHtml(text) : '';
94-
};
95-
96-
$scope.reset = function () {
97-
$scope.oldText = '';
98-
$scope.newText = '';
99-
$scope.diff = '';
100-
$scope.loading = false;
101-
$scope.waiting = false;
102-
if ($scope.currentTimeout) {
103-
$timeout.cancel($scope.currentTimeout);
104-
}
105-
}
106-
107-
$scope.update = function () {
108-
if ($scope.currentTimeout) {
109-
$timeout.cancel($scope.currentTimeout);
110-
}
111-
$scope.currentTimeout = $timeout(function () {
112-
$scope.getDiff();
113-
}, $scope.updateDelay);
114-
115-
$scope.waiting = true;
116-
};
117-
118-
$scope.getDiff = function () {
119-
$scope.waiting = false;
120-
$scope.loading = true;
121-
$http.post('index.php', { oldText: $scope.oldText, newText: $scope.newText })
122-
.success(function (data) {
123-
$scope.diff = data.diff;
124-
$scope.loading = false;
125-
});
126-
};
127-
128-
$scope.loadDemos = function () {
129-
$http.get('demo_text.php')
130-
.success(function (data) {
131-
$scope.demos = data;
132-
});
133-
};
134-
135-
$scope.diffDemo = function (index) {
136-
if (typeof index === 'undefined') {
137-
index = 0;
138-
}
139-
140-
$scope.oldText = $scope.demos[index]['old'];
141-
$scope.newText = $scope.demos[index]['new'];
142-
$scope.getDiff();
143-
};
144-
145-
$scope.loadDemos();
146-
}]);
147-
</script>
148-
</body>
149-
</html>
150-
151-
<?php
19+
header('Content-Type: text/html');
20+
echo file_get_contents('demo.html');
15221
}

0 commit comments

Comments
 (0)