-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
277 lines (266 loc) · 10.8 KB
/
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<?php
require_once 'css-parser.php';
$css = file_get_contents('css.css');
$CP = cssParser::getInstance($css);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Compatability API By Sam Bennett</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Sam Bennett">
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.sup-0 {background-color: #faa !important;}
.sup-1 {background-color: #c9e3b4 !important;}
.sup-2 {background-color: #fffacf !important;}
.sup-3 {background-color: #fffacf !important;}
#dropzone {
width: 100%;
height: 150px;
background-color: #DDD;
}
#dropzone h3 {
text-align: center;
padding-top: 60px;
font-size: 42px;
color: #888;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- <link href="css/prettify.css" rel="stylesheet" /> -->
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="#">CSS Compatability API</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit">
<h1>CSS Compatability API for Internet Explorer!</h1>
<p>Want a quick easy way to find out if your CSS is supported in all IE Browsers? Well you can here. I am creating an app that will allow you to find out if the selectors, properties, values and units you have used are able to work.</p>
</div>
<div class="row-fluid">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#lA" data-toggle="tab">Current State</a></li>
<li><a href="#lB" data-toggle="tab">The CSS</a></li>
<li><a href="#lC" data-toggle="tab">New CSS</a></li>
<li><a href="#at" data-toggle="tab">@types</a></li>
<li><a href="#lD" data-toggle="tab">What we get!</a></li>
<li><a href="#results" data-toggle="tab">The Results</a></li>
<li><a href="#haveago" data-toggle="tab">Have a Go</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="lA">
<h2>Current State</h2>
<p>I have created a class that is dealing with the CSS. It currently cleans up the CSS and in seperate functions it does what it needs to get the 4 different parts that it needs to work out the selectors, properties etc.<br />So far it can get pretty much all the selectors bar one or two due to me not having done the regex yet, it then searches through the CSS building an array of what it finds. I have also started it getting the properties however, there is a lot of regex as there is a lot of properties. I will then get the values and units sorted afterwards.</p>
<p>Once I have it working out which features are used I will be able to work out if the browsers support them and be able to build a report on it. I will also make it so that you can easily add your CSS to the page by three ways file upload, URL and Direct Input.</p>
<p>I am hoping that I will be able to create an API so that users can just send an URL and get the data with JavaScript.</p>
<p>Don't forget to check the code out on my <a href="https://github.com/sambenne/CSS-API">GitHub Page</a>.</p>
</div>
<div class="tab-pane" id="lB">
<h2>The CSS</h2>
<p>This is the CSS that I am using to test that the parser is working. I will be adding more to this as I go along to fit in with the tests. This CSS is what is currently being used and that is why it is different to the actual file because it has had the Comments removed.</p>
<pre class="prettyprint linenums"><?php $CSS = $CP->rawCSS(); echo $CSS; ?></pre>
</div>
<div class="tab-pane" id="lC">
<h2>The New CSS</h2>
<p>To make things easier I do a clean up of the CSS. I remove unwanted whitespace, add in missing <code>;</code>(Only on the last line of each selector.). I then compress the CSS as well this is so that I can get what I need easier later on.</p>
<?php
$CP->preSelcCSS();
$SEL = $CP->selCSS();
$CP->getProperties();
$properties = $CP->properties();
$values = $CP->values();
$CP->addUsed();
$temp = $CP->cleanCSS();
?>
<pre><?php echo $temp; ?></pre>
</div>
<div class="tab-pane" id="at">
<h2>The @Types</h2>
<p>This is where I get all the CSS blocks that start with the @ symbol as these need some special care.</p>
<?php
$CP->getAtRules();
$CSS = $CP->atCSS();
$atTypes = $CP->used();
echo "<pre>" . print_r($atTypes['at-rules'], true) . "</pre>";
?>
<!-- <pre><?php echo $CSS; ?></pre> -->
</div>
<div class="tab-pane" id="lD">
<h2>What we end up with in the end</h2>
<p>This is what we have so far.</p>
<?php
echo "<h3>Selectors</h3><p>These are all the selectors that are in the CSS, however, not all will be needed as some will end up giving us duplicates. So they will get ignored.</p><pre>$SEL</pre><br />";
echo "<h3>Properties</h3><p>These are all the properties that we found. currently this has gotten rid of all the duplicates. Some of you might notice that I have a property in there that isn't an actual property. What I am hoping to do is a bit of validation later on.</p>";
echo "<pre>" . print_r($properties, true) . "</pre>";
echo "<h3>Values</h3><p>These are all the unique values that we have found. I will be using these to determine the values and units.</p>";
echo "<pre>" . print_r($values, true) . "</pre>";
$CSS = "<pre>" . print_r($CP->used(), true) . "</pre>";
echo "<h3>What we found</h3><p>So this is what I will be using to the comparison later on. I have put a little more information for testing in it but that will be removed.</p>$CSS";
?>
</div>
<div class="tab-pane" id="results">
<h2>The Results So Far</h2>
<p>This is showing what is found when parsing the CSS. Currently it only does selectors and properties.</p>
<div class="row-fluid">
<table id="table" class="table table-striped table-bordered table-condensed span6">
<thead>
<tr>
<th>Type</th>
<th>IE 5</th>
<th>IE 5.5</th>
<th>IE 6</th>
<th>IE 7</th>
<th>IE 8</th>
<th>IE 9</th>
</tr>
</thead>
<tbody>
<?php
$CP->getSupported();
$CP->report();
?>
</tbody>
</table>
<div class="span6">
<h3>Min supported version: <?php echo $CP->minSupport(); ?></h3>
</div>
</div>
<?php
$CSS = $CP->rawCSS();
echo "<h3>Raw CSS</h3><p>This is what it is checking.</p><pre>$CSS</pre>";
?>
</div>
<div class="tab-pane" id="haveago">
<h2>Have a Go with your CSS!</h2>
<p>Just simply drag and drop.</p>
<div id="dropzone">
<h3>Drag and Drop</h3>
</div>
<table id="table" class="table table-striped table-bordered table-condensed span6 hide">
<thead>
<tr>
<th>Type</th>
<th>IE 5</th>
<th>IE 5.5</th>
<th>IE 6</th>
<th>IE 7</th>
<th>IE 8</th>
<th>IE 9</th>
</tr>
</thead>
<tbody id="data"></tbody>
</table>
</div>
</div>
</div>
</div><!--/row-->
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© Sam Bennett 2012</p>
</footer>
</div><!--/.fluid-container-->
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<!--<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>-->
<script>
$(document).ready(function() {
function noopHandler(evt) {
evt.stopPropagation();
evt.preventDefault();
if(evt.type == "dragenter") {
$(this).addClass("dragenter");
} else if (evt.type == "dragleave" || evt.type == "drop") {
$(this).removeClass("dragenter");
}
}
dropbox();
var css = [];
function dropbox() {
var dropbox = document.getElementById('dropzone');
dropbox.addEventListener("dragenter", noopHandler, false);
dropbox.addEventListener("dragleave", noopHandler, false);
dropbox.addEventListener("dragover", noopHandler, false);
dropbox.addEventListener("drop", function (evt) {
var files = evt.dataTransfer.files;
$.each(files, function(k, f) {
var fR = new FileReader();
fR.readAsDataURL(f);
fR.onload = function(theFile) {
var tmpName = f.fileName;
css.push({
file: f,
name: tmpName.split('.')[0],
type: tmpName.split('.')[(tmpName.split('.').length - 1)],
fileName: f.fileName
});
if(css[0].type == "css") {
uploadFile(css[0]);
// $('#dropzone h3').text("Click me to do it.").css('cursor', 'pointer');
}
}
});
noopHandler(evt);
}, false);
}
$('#dropzone h3').click(function() {
uploadFile(css[0]);
});
function uploadFile (f) {
var upload = new FormData();
upload.append('file', f.file);
upload.append('l_name', f.name);
upload.append('l_type', f.type);
upload.append('l_fileName', f.fileName);
$.ajax({
url: 'ajax.php',
data: upload,
cache: false,
contentType: false,
processData: false,
type: 'POST',
async: false,
beforeSend: function() {
},
success: function(ret){
$('#data').html(ret);
$('table').removeClass('hide');
},
error: function(ret) {
console.error(ret);
}
});
// css = [];
}
});
</script>
</body>
</html>