Merge pull request #320 from symfony-cmf/rawdata

Improve rawdata design

Author: lsmith77

app/Resources/translations/messages.de.yml

@@ -3,8 +3,7 @@ cmf:
         title: Demo Aktions-Block
         body: Dieser Inhalt wurde durch eine Symfony2 Controller Action gerendert. Er kann nicht inline editiert werden.
     raw_data: |
-      <p>Dieses Fenster zeigt, wie Inhalt mit einem Accept Header im xml bzw json Format abgefragt werden kann.
+       Dieses Fenster zeigt, wie Inhalt mit einem Accept Header im xml bzw json Format abgefragt werden kann.
        Damit dies geht, muss das Format erlabut sein in fos_rest.format_listener.rules und braucht es Konfiguration
-       für den jms serializer für das Dokument in config.yml.</p>
-       <p><em>Escape Taste drücken um das Fenster wieder zu schliessen</em>.</p>
+       für den jms serializer für das Dokument in config.yml.
     raw_data_hint: Rohdaten dieser Seite anzeigen.

app/Resources/translations/messages.en.yml

@@ -3,8 +3,7 @@ cmf:
         title: Demo Action Block
         body: This block content is rendered by a custom Symfony2 action. It has no inline-editing.
     raw_data: |
-      <p>This window shows the output when requesting content with an accept-header asking for xml / json.
+       This window shows the output when requesting content with an accept-header asking for xml / json.
        This is enabled by configuring a rule in fos_rest.format_listener.rules and a jms serializer mapping
-       for the content document in config.yml.</p>
-       <p><em>Press the escape key to close</em>.</p>
+       for the content document in config.yml.
     raw_data_hint: Show raw data of this page.

app/Resources/translations/messages.fr.yml

@@ -3,8 +3,7 @@ cmf:
         title: Demo block d'action
         body: Ce contenu est rendu par une action d'un controlleur Symfony2. Il n'a pas le inline editing.
     raw_data: |
-      <p>Cette fenêtre montre le résultat obtenu quand on envoye un header Accept demandant du xml / json.
+       Cette fenêtre montre le résultat obtenu quand on envoye un header Accept demandant du xml / json.
        Pour controler les formats permit, on utilise les règles dans fos_rest.format_listener.rules et
-       on a besoin d'un mapping pour le document en question avec le jms serializer dans config.yml.</p>
-       <p><em>Tapper la touche escape pour férmer cette fenêtre</em>.</p>
+       on a besoin d'un mapping pour le document en question avec le jms serializer dans config.yml.
     raw_data_hint: Data brut de ce page.

app/Resources/views/base.html.twig

@@ -61,8 +61,8 @@
                     <div class="dropdown  navbar-dropdown">
                         <a href="#" class="btn  btn-default  btn-xs  navbar-btn  dropdown-toggle" data-toggle="dropdown">View raw page <span class="caret"></span></a>
                         <ul class="dropdown-menu">
-                            <li><a id="raw_xml" title="{{ "cmf.raw_data_hint"|trans }}">XML</a></li>
-                            <li><a id="raw_json" title="{{ "cmf.raw_data_hint"|trans }}">JSON</a></li>
+                            <li><a class="raw-data-link" data-format="xml" title="{{ "cmf.raw_data_hint"|trans }}">XML</a></li>
+                            <li><a class="raw-data-link" data-format="json" title="{{ "cmf.raw_data_hint"|trans }}">JSON</a></li>
                         </ul>
                     </div>
                     {% endblock %}
@@ -114,15 +114,21 @@
             </div>
         </div>
 
-        <div id="raw_data_overlay" class="boxed">
-            <div id="overlay_description">{{ "cmf.raw_data"|trans|raw }}</div>
-            <div id="overlay_content"></div>
+        <div class="modal fade" id="raw-data-modal">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-body">
+                        <p>{{ "cmf.raw_data"|trans }}</p>
+                        <pre id="raw-data"></pre>
+                    </div>
+                </div>
+            </div>
         </div>
 
         {% block bottom_scripts %}
             <script src="{{ asset("assets/vendor/jquery.min.js") }}"></script>
-            <script src="{{ asset("assets/js/rawdata.js") }}"></script>
             <script src="{{ asset("assets/vendor/bootstrap.min.js") }}"></script>
+            <script src="{{ asset("assets/js/rawdata.js") }}"></script>
         {% endblock %}
     </body>
 </html>

web/assets/css/style.css

@@ -160,27 +160,8 @@ body { padding-top:50px; }
 /*******************************\
     $OVERLAY
 \*******************************/
-#raw_data_overlay {
-    width:80%;
-    display:none;
-    padding:16px;
-    background-color:#ddd;
-    border:1px black solid;
-    position:absolute;
-    top:100px;
-    left:100px;
-}
-
-#overlay_description {
-    margin-bottom:16px;
-    padding:8px;
-    background-color:#eee;
-}
-
-#overlay_content {
-    padding:8px;
-    font-family:courier, monospace;
-    white-space:pre-wrap;
+.raw-data-link{
+    cursor:pointer;
 }
 
 

web/assets/js/rawdata.js

@@ -1,25 +1,32 @@
-$(document).ready(function () {
-    $("#raw_xml").on("click", function () {
-        $.ajax({
-           "dataType": "xml",
-            "success": function(xml) {
-                $("#overlay_content").text((new XMLSerializer()).serializeToString(xml));
-                $("#raw_data_overlay").show();
-            }
-        });
-    });
+jQuery(function ($) {
+
+    var $rawData = $('#raw-data');
+    var $modal = $('#raw-data-modal');
+
+    $('.raw-data-link').click(function (e) {
+        var format = $(this).data('format');
+
+        $modal.modal('show');
+        var i = 0;
+        var loaderIcon =setInterval(function () {
+            $rawData.append('.');
+            if (i++ == 10) $rawData.text('.');
+        }, 250);
 
-    $("#raw_json").on("click", function () {
         $.ajax({
-            "dataType": "json",
-            "success": function(json) {
-                $("#overlay_content").text(JSON.stringify(json, undefined, 4));
-                $("#raw_data_overlay").show();
+            dataType: format,
+            success: function (data) {
+                var str = '';
+                if ('xml' === format) {
+                    str = (new XMLSerializer()).serializeToString(data);
+                } else if ('json' === format) {
+                    str = JSON.stringify(data, undefined, 4);
+                }
+
+                $rawData.text(str);
+                clearInterval(loaderIcon);
             }
         });
     });
-});
 
-$(document).keyup(function(e) {
-    if (e.keyCode == 27) { $("#raw_data_overlay").hide(); }   // esc
 });