<commit_before>- content_for :javascripts do
  :javascript
    var OctoberSubmitPage = (function($) {
      var $form = $("#new_post");
      var $urlField = $form.find("#post_url");
      var $imagesArea = $form.find("#form-image-group");
      var $keywordsArea = $form.find("#form-keywords-group");
      var $loadingGif = $form.find(".loading-gif");
      var fetchUrl = "#{fetch_posts_path}"

      var init = function() {
        $imagesArea.hide();
        $keywordsArea.hide();
        $loadingGif.hide();
        $urlField.on('change', urlChangeHandler);
      };

      var urlChangeHandler = function(e) {
        $loadingGif.show();
        $.post(fetchUrl, { url: this.value }, postFetchedHandler, 'json');
      };

      var postFetchedHandler = function(data) {
        // Done loading, hide the loading animation
        $loadingGif.hide();

        // Populate the images
        $imageControlsArea = $imagesArea.find(".controls");
        $.each(data.images, function(index, url) {
          $imageControlsArea.append("<div style=\"background: url('" + url + "'); background-size: cover; width: 100px; height: 100px; float: left;\">&nbsp;</div>");
        });
        $imagesArea.show();

        // Populate the title
        $form.find('#post_title')[0].value = data.title

        // Populate the keywords
        $keywordListArea = $keywordsArea.find(".controls ul");
        $.each(data.keywords, function(index, keyword) {
          if (index >= 5) { return false; }
          $keywordListArea.append("<li>" + keyword[0] + "</li>");
        });
        $keywordsArea.show();
      };

      return { init : init };
    }($));

    $(function() {
      OctoberSubmitPage.init();
    });
:css
  #form-keywords-group .controls ul {
    list-style: none;
    margin: 0;
    padding-top: 5px;
  }
  #form-keywords-group .controls li {
    float: left;
    font-size: 1.6em;
    margin-right: 15px;
  }
  .loading-gif {
    position: relative;
    right: 27px;
    width: 16px;
  }

.span12
  %h2 Post A New Article
  = form_for(Post.new, :method => :post, :html => { :class => 'form-horizontal' }) do |f|
    .control-group
      .control-label
        =f.label :url
      .controls
        =f.text_field :url, :class => 'span6'
    .control-group#form-image-group
      .control-label
        =f.label :image
      .controls
    .control-group#form-keywords-group
      .control-label
        =f.label :keywords
      .controls
        %ul
    .control-group
      .control-label
        =f.label :title
      .controls
        =f.text_field :title, :class => 'span6'
        =image_tag 'loading.gif', :class => 'loading-gif'
    .form-actions
      =f.submit 'Post Article!', :class => 'btn btn-primary'
<commit_msg>Improve post UI when user changes the URL in the input field<commit_after>- content_for :javascripts do
  :javascript
    var OctoberSubmitPage = (function($) {
      var $form = $("#new_post");
      var $urlField = $form.find("#post_url");
      var $titleField = $form.find("#post_title");
      var $imagesArea = $form.find("#form-image-group");
      var $keywordsArea = $form.find("#form-keywords-group");
      var $loadingGif = $form.find(".loading-gif");
      var fetchUrl = "#{fetch_posts_path}"

      var init = function() {
        $urlField.on('change', urlChangeHandler);
        hideSections();
        resetSections();
      };

      var hideSections = function() {
        $imagesArea.hide();
        $keywordsArea.hide();
        $loadingGif.hide();
      };

      var resetSections = function() {
        $titleField.val("");
        $imagesArea.find(".controls").html('');
        $keywordsArea.find(".controls").html('<ul></ul>');
      };

      var urlChangeHandler = function(e) {
        if (this.value === "") {
          resetSections();
        }
        $loadingGif.show();
        $.post(fetchUrl, { url: this.value }, postFetchedHandler, 'json');
      };

      var postFetchedHandler = function(data) {
        if (data.error) {
          resetSections();
          hideSections();
        }

        // Done loading, hide the loading animation
        $loadingGif.hide();

        // Populate the images
        $imageControlsArea = $imagesArea.find(".controls");
        $.each(data.images, function(index, url) {
          $imageControlsArea.append("<div style=\"background: url('" + url + "'); background-size: cover; width: 100px; height: 100px; float: left;\">&nbsp;</div>");
        });
        $imagesArea.show();

        // Populate the title
        $form.find('#post_title')[0].value = data.title

        // Populate the keywords
        $keywordListArea = $keywordsArea.find(".controls ul");
        $.each(data.keywords, function(index, keyword) {
          if (index >= 5) { return false; }
          $keywordListArea.append("<li>" + keyword[0] + "</li>");
        });
        $keywordsArea.show();
      };

      return { init : init };
    }($));

    $(function() {
      OctoberSubmitPage.init();
    });
:css
  #form-keywords-group .controls ul {
    list-style: none;
    margin: 0;
    padding-top: 5px;
  }
  #form-keywords-group .controls li {
    float: left;
    font-size: 1.6em;
    margin-right: 15px;
  }
  .loading-gif {
    position: relative;
    right: 27px;
    width: 16px;
  }

.span12
  %h2 Post A New Article
  = form_for(Post.new, :method => :post, :html => { :class => 'form-horizontal' }) do |f|
    .control-group
      .control-label
        =f.label :url
      .controls
        =f.text_field :url, :class => 'span6'
    .control-group#form-image-group
      .control-label
        =f.label :image
      .controls
    .control-group#form-keywords-group
      .control-label
        =f.label :keywords
      .controls
    .control-group
      .control-label
        =f.label :title
      .controls
        =f.text_field :title, :class => 'span6'
        =image_tag 'loading.gif', :class => 'loading-gif'
    .form-actions
      =f.submit 'Post Article!', :class => 'btn btn-primary'

{'fraction_non_alphanumeric': 0.16272485009993337, 'fraction_numerical': 0.007994670219853431, 'mean_word_length': 2.2477014602487833, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7460316', 'n_tokens_mistral': 1923, 'n_tokens_neox': 1844, 'n_words': 395}