fix word cloud

modules/video_pro/_video_pro_widget_jqcloud1.html.erb

@@ -1,20 +1,39 @@
 <div class="w-video_data video_data-widget-2">
-  <%= javascript_include_tag 'video_pro/jqcloud.min' %>
+  <%= javascript_include_tag 'video_pro/wordcloud2.js' %>
-  <%= stylesheet_link_tag 'video_pro/jqcloud.min' %>
+  <div style="width: 100%; height: 60vw" class="my_favorite_latin_words jqcloud"><div>
-  <div class="my_favorite_latin_words jqcloud" style="height: 100px;"></div>
   <script>
     $(document).ready(function(){
-      $('[data-subpart-id="{{subpart-id}}"] .my_favorite_latin_words').jQCloud({{jqcloud_words}}, {
+      var container = $('[data-subpart-id="{{subpart-id}}"] .my_favorite_latin_words');
-          autoResize: true,
+      var width = container.width();
-          afterCloudRender: function(){
+      container.attr('width', width)
-            var is_chinese = (window.I18n && I18n.locale == "zh_tw" || I18n.locale == "zh_cn");
+      var jqcloud_words = {{jqcloud_words}};
-            $(this).find('a').each(function(i,v){
+      var text_map = {};
-              var $v = $(v);
+      var max_value = 1;
-              $v.attr('title', is_chinese ? ('另開新視窗前往' + $v.text()) : ('Open ' + $v.text() + ' in new tab'));
+      $.each(jqcloud_words, function(i, v){
-              $v.attr('target', '_blank');
+        if (max_value < v.weight){
-            })
+          max_value = v.weight;
         }
       });
+      var list = $.map(jqcloud_words, function(v){
+        text_map[v.text] = v.link;
+        return [[v.text, Math.ceil(v.weight/max_value*3), v.link]];
+      });
+      container.on('wordcloudstop', function (e) {
+        $(this).children('span').each(function (i, v) {
+          var text = $(this).html();
+          $(this).html('<a title="'+ list[i][0] + '" style="color: inherit" href="' + list[i][2]  +'">' + text + '</a>');
+        });
+      });
+      WordCloud(container[0], {
+        list: list,
+        gridSize: 3,
+        weightFactor: jqcloud_words.length * width / 550,
+        rotateRatio: 0,
+        shuffle: false,
+        drawOutOfBound: false,
+        shrinkToFit: true,
+        shape: 'square'
+      });
     })
   </script>
 </div>