Merge pull request #853 from webcompat/cssfixme-scripts

Add cssfixme scripts, fixes #850.

.gitignore

@@ -1,5 +1,6 @@
 env/
 node_modules/
+git_modules/
 .DS_Store
 config.py
 fabfile.py
@@ -17,6 +18,7 @@ webcompat/static/js/diagnose.js
 webcompat/static/js/issues.js
 webcompat/static/js/issue-list.js
 webcompat/static/js/user-activity.js
+webcompat/static/js/cssfixme/cssfixme.js
 webcompat/**/*.min.js
 webcompat/**/*.min.css
 webcompat/**/*.dev.css

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "git_modules/css-fixme"]
+	path = git_modules/css-fixme
+	url = https://github.com/webcompat/css-fixme/

CONTRIBUTING.md

@@ -206,6 +206,9 @@ We use [Grunt](http://gruntjs.com/) as a task runner to perform certain things (
 git clone https://github.com/<username>/webcompat.com.git #replace your github username
 # change to directory
 cd webcompat.com
+# check out submodules
+git submodule init
+git submodule update
 # initializing project
 [sudo] make install
 ```
@@ -248,6 +251,9 @@ Windows users should simply download the most recent Python 2.7 installer and ru
 git clone [email protected]:username/webcompat.com.git
 # change to directory
 cd webcompat.com
+# check out submodules
+git submodule init
+git submodule update
 # set up virtual environment
 [sudo] virtualenv env
 source env/bin/activate

grunt-tasks/concat.js

@@ -66,6 +66,14 @@ module.exports = function(grunt) {
           '<%= jsPath %>/lib/user-activity.js'
         ],
         dest: '<%= jsPath %>/user-activity.js'
+      },
+      cssFixmeLibs: {
+        src: [
+          'git_modules/css-fixme/js/css-browserside.js',
+          'git_modules/css-fixme/js/css-fixme.js',
+          '<%= jsPath %>/lib/css-fixme-ui.js'
+        ],
+        dest: '<%= jsPath %>/cssfixme/cssfixme.js'
       }
    });
 };

grunt-tasks/uglify.js

@@ -27,6 +27,10 @@ module.exports = function(grunt) {
       diagnose: {
         src: '<%= concat.diagnose.dest %>',
         dest: '<%= jsPath %>/diagnose.min.js'
+      },
+      cssFixmeLibs: {
+        src: '<%= concat.cssFixmeLibs.dest %>',
+        dest: '<%= jsPath %>/cssfixme.min.js'
       }
    });
 };

webcompat/static/js/lib/css-fixme-ui.js

@@ -0,0 +1,26 @@
+/* global doTheBigStyleFixing */
+addEventListener('load', function() {
+
+  function do_fixup() {
+    var csscode = document.getElementsByTagName('textarea')[0].value;
+    var pre = document.getElementById('fixedcss');
+    var compact = document.getElementsByName('compact')[0].checked;
+    doTheBigStyleFixing(csscode, pre, compact);
+  }
+
+  document.getElementById('btn_do_fixup').addEventListener('click', do_fixup, false);
+
+  if (document.getElementsByTagName('textarea')[0].value) {
+    do_fixup();
+  }
+
+  document.getElementById('fixedcss').addEventListener('dblclick', function(e) {
+    window.getSelection().removeAllRanges();
+    var rng = document.createRange();
+    rng.selectNodeContents(document.getElementById('fixedcss'));
+    window.getSelection().addRange(rng);
+    e.preventDefault();
+  }, false);
+
+}, false);
+

webcompat/templates/cssfixme.html

@@ -9,10 +9,17 @@
       <p>Paste CSS in this box to see what needs fixing:</p>
 
       <textarea style="width:100%;height:20rem;"></textarea><br/>
-      <button type="button" onclick="doTheBigStyleFixing(document.getElementsByTagName('textarea')[0].value)">Add standard equivalents for prefixed CSS</button>
+      <button type="button" id="btn_do_fixup">Add standard equivalents for prefixed CSS</button>
       <label>
         <input type="checkbox" name="compact">Compact output (whitespace only after closing brace)</label>
       <pre id="fixedcss"></pre>
+      {%- block extrascripts -%}
+      {%- if config.PRODUCTION or config.DEVELOPMENT -%}
+      <script src="{{ url_for('static', filename='js/cssfixme.min.js')|bust_cache }}"></script>
+      {%- else -%}
+      <script src="{{ url_for('static', filename='js/lib/css-fixme.js') }}"></script>
+      {%- endif -%}
+      {%- endblock %}
     </main>
   </div>
 {% endblock %}