[Java] Implementation of category pull-down function

1 minute read

In the final task of a certain programming school, I implemented a category pull-down function (a function that displays a category by pulling it down when you touch the word “category” in the header of the top page), so I also explained it for my own output. I think  Screenshot 2020-06-10 10.55.11.png

Although it is prompt, the flow of implementing the pull-down function is as follows.

① Touch the category letters

④ After that, all you have to do is reassemble the acquired data into HTML and add it under the category characters.

⑤ The child element is also displayed in the same flow as above, so that it will not be displayed when it reaches the grandchild element.

The source code that achieves this is as follows. (Only relevant parts are extracted)

   .contents__bottom
      .header-bottom-left
        .header-bottom-left-category
          = link_to "category", api_category_path(0) ,class: "category_name", id: "catroy_top_title"
          .header-bottom-left-category-field


$(function(){
  
  // Generate pulldown HTML
  function buildHTML(data){

    var html = $("<div>").addClass("header-bottom-left-category-field-nav")
    var link

    data.forEach(function(value){
      link = $("<a>", {
        href: "/api/categories/" + value.id,
        "class":"category_name"
      }).text(value.name)
      link = $("<p>").append(link)

      html.append(link)
    })

    return html
  }

  // Touch the category title and start over
  $("#catroy_top_title").mouseenter(function(){
    $(".header-bottom-left-category-field-nav").remove()
  })

   // start when the mouse leaves
   $(".header-bottom-left-category").mouseleave(function(){
    $(".header-bottom-left-category-field-nav").remove()
  })

  $(document).on((

    // start when the cursor is over
    'mouseenter': function() {

      // Get the category path
      var path = $(this).attr("href");

      // Get the child element of the touched category
      $.ajax({
        url: path,
        type: "GET",
        dataType: "json",
        context:this,
        cache: false,
      })
      .done(function(result){
  
        // do not display the choice if there are no child elements
        if( result.length != 0 ){
  
          // Add a new form below the selected form
          var html = buildHTML(result)

          // Delete any previously added list
          $(this).parent().parent().nextAll(".header-bottom-left-category-field-nav").remove()
          $(".header-bottom-left-category-field").append(html)

        }

      })

      // start when the mouse leaves
      $(".header-bottom-left-category-field-nav").mouseenter(function(eo){
        $(this).find("a").css("color","")
      })

    },'mouseleave': function(){

       // start when the mouse leaves
      $(".header-bottom-left-category-field-nav").mouseleave(function(eo){
        $(eo.fromElement).css("color","orange")
      })
     
    }
  }, ".category_name")

})

namespace :api do
  resources :categories, only: [:show]
end

class Api::CategoriesController <ApplicationController
 
  def show

    if params[:id] == "0"
      @categories = Category.where(ancestry:nil)
    else
      @categories = Category.find(params[:id]).children
    end

    respond_to do |format|
      format.html{
        if params[:id] == "0"
          redirect_to category_all_items_path
        else
          redirect_to category_all_items_path(category_id: params[:id])
        end
      }
      format.json{
        render json: @categories
      }
    end

  end

end

(*) Please use it after adjusting it to your environment.