rewrite compileless field and the compiler

dzdevteam · Aug 25, 2013 · 31b18fe · 31b18fe
1 parent 3a1deb2
commit 31b18fe
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 76 deletions.
diff --git a/compiler.php b/compiler.php
@@ -1,23 +1,16 @@
 <?php 
-include_once("core/includes/lessc.inc.php");
-?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head>
-    <title>DZ LESS Compiler</title>
-</head>
-<body>
-<?php
+    header('Content-Type: application/json');
+    include_once("core/includes/lessc.inc.php");
+
     // DEBUG
-    echo '<pre>';
     if (isset($_GET['compile']))
         $method = $_GET['compile'];
     else if (isset($_POST['compile']))
         $method = $_POST['compile'];
 
     if (empty($method) || ( count($method['variables']) != 8 && count($method['imports']) != 3))
     {
-        echo "Invalid Request!";
+        echo json_encode(array('status' => 'nok', 'message' => 'Invalid Request!'));
         return;
     }
 
@@ -51,11 +44,8 @@
         $less->compileFile(dirname(__FILE__)."/less/bootstrap.less", $bootstrap);
         $less->compileFile(dirname(__FILE__)."/less/responsive.less", $responsive);
 
-        echo "Compile Successful!";
+        echo json_encode(array('status' => 'ok', 'message' => 'Compile Successful!'));
     } catch (exception $e) {
-        echo "Fatal Error: ".$e->getMessage();
+        echo json_encode(array('status' => 'nok', 'message' => $e->getMessage()));
     }
-    echo '</pre>';
 ?>
-</body>
-</html>
diff --git a/core/fields/assets/compileless.js b/core/fields/assets/compileless.js
@@ -1,45 +1,43 @@
-function sendCompileRequest(compileUrl)
-{
-        // Update the request form;
-    var compilerForm = new Element('form'); 
-    var fields = ['baseFontSize', 'sansFontFamily', 'serifFontFamily', 'baseFontFamily', 'baseLineHeight', 'textColor', 'linkColor', 'linkColorHover'];
-
-    for (var i = 0; i < fields.length; i++ )
-    {
-        $('compile_'+fields[i]).set('value', $('jform_params_'+fields[i]).get('value'));
-        $('compile_'+fields[i]).clone().inject(compilerForm);
-    }
-
-    var imports = ['responsive-767px-max', 'responsive-768px-979px', 'responsive-1200px-min'];
-    for (var i = 0; i < imports.length; i++)
-    {
-        $('compile_' + imports[i]).set('value', isYes(imports[i]));
-        $('compile_' + imports[i]).clone().inject(compilerForm);
-    }
-
-    var request = new Request({
-        url: compileUrl,
-        onRequest: function() {
-            $('compile_result').set('text', 'compiling....');
+jQuery(document).ready(function() {
+    jQuery('.btn-compile').on('click', function() {
+        // Data skeleton
+        var data = {
+            compile: {
+                variables: {},
+                imports: {}
+            }
         },
-        onSuccess: function(responseText) {
-            $('compile_result').set('html', responseText);
-        },
-        onFailure: function(){
-           $('compile_result').set('text', 'Sorry, your request failed :(');
+            variables = ['baseFontSize', 'sansFontFamily', 'serifFontFamily', 'baseFontFamily', 'baseLineHeight', 'textColor', 'linkColor', 'linkColorHover'],
+            imports = ['responsive-767px-max', 'responsive-768px-979px', 'responsive-1200px-min'],
+            alert_tpl = '<div class="alert fade in"><a class="close" data-dismiss="alert" href="#">&times;</a></div>';
+
+        // Prepare variables
+        for (var i = 0; i < variables.length; i++) {
+            data.compile.variables[variables[i]] = jQuery('#jform_params_' + variables[i]).val();
+        }
+
+        // Prepare imports
+        for (var i = 0; i < imports.length; i++) {
+            data.compile.imports[imports[i] + '.less'] = jQuery('input[name="jform[params][' + imports[i]+']"]:checked').val();
         }
+
+        // Loading animation
+        jQuery('#compile-result').html('<img src="../media/system/images/modal/spinner.gif" />');
+
+        // Send the data
+        jQuery.ajax({
+            url: jQuery(this).data('compiler-href'),
+            method: 'POST',
+            data: data
+        }).done(function(response) {
+            var $alert = jQuery(alert_tpl).addClass('alert-success').append(response.message);
+            jQuery('#compile-result').html($alert);
+        }).error(function(jqXHR, textStatus, errorThrown) {
+            var $alert = jQuery(alert_tpl).addClass('alert-danger').append(errorThrown);
+            jQuery('#compile-result').html($alert);
+        });
+
+        // Prevent form submission
+        return false;
     });
-
-    request.post(compilerForm);
-}
-
-function isYes(field)
-{
-    field = field.replace(/-/g, '_');
-    field = field.replace(/\./g, '_');
-
-    if ($('jform_params_' + field + '0').get('checked') == true)
-        return 0;
-    else
-        return 1;
-}
+});
diff --git a/core/fields/compileless.php b/core/fields/compileless.php
@@ -10,25 +10,12 @@ class JFormFieldCompileLess extends JFormField
     protected $type = "compileless";
 
     protected function getInput()
-    {
-        $template = $this->form->getValue('template');
-        $tpl_path = str_replace('/administrator/', '/', JURI::base()).'templates/'.$template;
-
+    {        
         $doc = JFactory::getDocument();
-        $doc->addScript($tpl_path.'/core/fields/assets/compileless.js');
-        $html = '<input type="hidden" name="compile[variables][baseFontSize]" id="compile_baseFontSize" />';
-        $html .= '<input type="hidden" name="compile[variables][sansFontFamily]" id="compile_sansFontFamily" />';
-        $html .= '<input type="hidden" name="compile[variables][serifFontFamily]" id="compile_serifFontFamily" />';
-        $html .= '<input type="hidden" name="compile[variables][baseFontFamily]" id="compile_baseFontFamily" />';
-        $html .= '<input type="hidden" name="compile[variables][baseLineHeight]" id="compile_baseLineHeight" />';
-        $html .= '<input type="hidden" name="compile[variables][textColor]" id="compile_textColor" />';
-        $html .= '<input type="hidden" name="compile[variables][linkColor]" id="compile_linkColor" />';
-        $html .= '<input type="hidden" name="compile[variables][linkColorHover]" id="compile_linkColorHover" />';
-        $html .= '<input type="hidden" name="compile[imports][responsive-767px-max.less]" id="compile_responsive-767px-max" />';
-        $html .= '<input type="hidden" name="compile[imports][responsive-768px-979px.less]" id="compile_responsive-768px-979px" />';
-        $html .= '<input type="hidden" name="compile[imports][responsive-1200px-min.less]" id="compile_responsive-1200px-min" />';
-        $html .= '<button type="button" onclick="sendCompileRequest(\''.$tpl_path.'/compiler.php\')">'.JText::_('DZ_BUTTON_COMPILE_LESS').'</button>';
-        $html .= '<div class="fltlft" id="compile_result"></div>';
+        $doc->addScript(JUri::root().'/templates/dz/core/fields/assets/compileless.js');
+
+        $html = '<button type="button" class="btn btn-primary btn-compile" data-compiler-href="'.JUri::root().'/templates/dz/compiler.php">'.JText::_('DZ_BUTTON_COMPILE_LESS').'</button>';
+        $html .= '<br /><br /><div id="compile-result"></div>';
 
         return $html;
     }