video_pro/modules/video_pro/_video_pro_widget_jqcloud1.html.erb

<div class="w-video_data video_data-widget-2">
  <%= javascript_include_tag 'video_pro/wordcloud2.js' %>
  <div style="width: 100%; height: 40vw; max-height: 17em;" class="my_favorite_latin_words jqcloud wordcloud2"><div>
  <script>
    var container_{{subpart-id}} = $('[data-subpart-id="{{subpart-id}}"] .my_favorite_latin_words');
    var jqcloud_words_{{subpart-id}} = {{jqcloud_words}};
    var text_map_{{subpart-id}} = {};
    var max_value_{{subpart-id}} = 1;
    $.each(jqcloud_words_{{subpart-id}}, function(i, v){
      if (max_value_{{subpart-id}} < v.weight){
        max_value_{{subpart-id}} = v.weight;
      }
    });
    var list_{{subpart-id}} = $.map(jqcloud_words_{{subpart-id}}, function(v){
      text_map_{{subpart-id}}[v.text] = v.link;


      return [[v.text, Math.ceil(v.weight/max_value_{{subpart-id}}*3), v.link]];
    });
    container_{{subpart-id}}.on('wordcloudstop', function (e) {
      $(this).children('span').each(function (i, v) {
        var text = $(this).html();
        $(this).html('<a title="'+ list_{{subpart-id}}[i][0] + '" style="color: inherit" href="' + list_{{subpart-id}}[i][2]  +'">' + text + '</a>');
      });
    });
    function wordCloud_{{subpart-id}}(){
      var width = container_{{subpart-id}}.width();
      var height = container_{{subpart-id}}.height();
      container_{{subpart-id}}.attr('width', width);
      WordCloud(container_{{subpart-id}}[0], {
        list: list_{{subpart-id}},
        gridSize: 3,
        weightFactor: jqcloud_words_{{subpart-id}}.length * Math.min(width, 1200) / 770,
        rotateRatio: 0,
        shuffle: false,
        drawOutOfBound: false,
        shrinkToFit: true,
        shape: 'square',
        color: 'random-dark',
        ellipticity: height/(width-40)
      });
    }
    $(window).resize(function(){
      wordCloud_{{subpart-id}}();
    })
    $(document).ready(function(){
     wordCloud_{{subpart-id}}();
    });
  </script>
</div>