Fixed text-to-tag-analyse-spinner effect.

src/Jity/HomepageBundle/Resources/public/js/50_spin.js

@@ -3,6 +3,30 @@
 
 $.fn.spin = function(opts) {
 
+    var defaultOpts = {
+        lines     : 17,        // The number of lines to draw
+        length    : 2,         // The length of each line
+        width     : 2,         // The line thickness
+        radius    : 11,        // The radius of the inner circle
+        corners   : 1,         // Corner roundness (0..1)
+        rotate    : 0,         // The rotation offset
+        color     : '#fff',    // #rgb or #rrggbb
+        speed     : 1.2,       // Rounds per second
+        trail     : 30,        // Afterglow percentage
+        shadow    : true,      // Whether to render a shadow
+        hwaccel   : true,      // Whether to use hardware acceleration
+        className : 'spinner', // The CSS class to assign to the spinner
+        zIndex    : 2e9,       // The z-index (defaults to 2000000000)
+        top       : 'auto',    // Top position relative to parent in px
+        left      : 'auto'     // Left position relative to parent in px
+    };
+
+    if (opts) {
+        $.extend(defaultOpts, opts);
+    }
+
+    var opts = defaultOpts;
+
     this.each(function() {
 
         var $this = $(this),
@@ -13,29 +37,9 @@ $.fn.spin = function(opts) {
             delete data.spinner;
         }
 
-        if (opts !== false) {
-
-            var opts = {
-                lines: 17, // The number of lines to draw
-                length: 2, // The length of each line
-                width: 2, // The line thickness
-                radius: 11, // The radius of the inner circle
-                corners: 1, // Corner roundness (0..1)
-                rotate: 0, // The rotation offset
-                color: '#fff', // #rgb or #rrggbb
-                speed: 1.2, // Rounds per second
-                trail: 30, // Afterglow percentage
-                shadow: true, // Whether to render a shadow
-                hwaccel: true, // Whether to use hardware acceleration
-                className: 'spinner', // The CSS class to assign to the spinner
-                zIndex: 2e9, // The z-index (defaults to 2000000000)
-                top: 'auto', // Top position relative to parent in px
-                left: 'auto' // Left position relative to parent in px
-            };
-
-            data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
-        }
+        data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
     });
 
     return this;
 };
+

src/Jity/HomepageBundle/Resources/views/Article/usability.html.twig

@@ -154,13 +154,16 @@ $(document).ready(function() {
 
         analyseText: function() {
 
-            $('#tags_spinner').spin();
+            $('#tags_spinner').next('div').fadeTo('fast',.1);
+            $('#tags_spinner').show().spin({radius: 21, length: 7});
 
             $.post(
                 '{{ path('editor_tags') }}',
                 {text: $('textarea[id="jity_homepagebundle_articletype_content"]').val()},
                 function(data) {
 
+                    $('#tags_spinner').next('div').fadeTo('fast',1);
+
                     data              = jQuery.parseJSON(data);
                     tags.analysedTags = data;
 
@@ -203,11 +206,11 @@ $(document).ready(function() {
                 + '        </a>'
                 + '    </div><br>'
 
-                + '    <div>'
+                + '    <div style="position: relative;"><div id="tags_spinner" style="position: relative; top: 85px;"></div><div>'
                 + '        <legend class="h2">Tag aus Text ermitteln</legend>'
-                + ' Mit Hilfe dieser Funktionalität wird Ihr Text analysiert und passende Tags zur Auswahl zur Verfügung gestellt.<br><br>'
+                + ' Mit Hilfe dieser Funktionalität, wird Ihr Text analysiert und verschlagwortet. Gefundene Tags werden in der Auswahl zur Verfügung gestellt.<br><br>'
                 + '        <select id="parsed_tags_new_select" style="display: none; margin-bottom: 0px;">'
-                    + '        </select><div id="tags_spinner"></div>'
+                    + '        </select>'
                 + '        <a class="btn btn-primary" href="#" onclick="tags.analyseText(); return false;">'
                 + '            <i class="icon-white icon-refresh"></i>'
                 + '            Text Analysieren'
@@ -216,7 +219,7 @@ $(document).ready(function() {
                 + '            <i class="icon-white icon-ok"></i>'
                 + '            Hinzufügen'
                 + '        </a>'
-                + '    </div><br>'
+                + '    </div></div><br>'
 
                 + '    <div>'
                 + '        <legend class="h2">Neuer Tag</legend>'
@@ -262,6 +265,7 @@ $(document).ready(function() {
                     $('<option></option>').html(tags.analysedTags[property].name)
                 );
 
+                $('#tags_spinner').spin().hide();
                 $('#parsed_tags_new_select').show();
                 $('#add-parsed-btn').show();
             };