specific menu with specific data for each object

Question

I'm trying to make a page where you can create "documents" that are divs with specific properties. For now I thought about name & color.

First, when you click in the body, you can create a document that is called "something+i" (i is its ID) then, when you click a specific document you can access a menu to edit its color and its name. finally when you close the menu by clicking OK the specific document is updated.

Do you have any idea on how to do that? Thanks a lot for the help.

var i = 1;
$(function(){
    $(document.body).click(function(e){
        var div =  $("", { "class":"document", id:"document"+i })
            .css({
                "left": e.pageX + 'px',
                "top": e.pageY + 'px'
            })
             .append($( "document")+i )
            .appendTo(document.body);
                
  $('.document').click(function(event){
    event.stopPropagation();
});
      $('.menu').click(function(event){
    event.stopPropagation();
});
      document.querySelector(".document").addEventListener("click", function(){
    document.querySelector(".menu").style.display = "block";
});
     document.querySelector(".validate").addEventListener("click", function(){
    document.querySelector(".menu").style.display = "none";
}); 
      
      i++;
    });
});

body{
  width: 100vw;
  height: 100vh;
  background: grey;
}
.document {
    position: absolute;
    transform: translate(-50%, -50%);
  opacity: 1;
  background-color: red;
  resize:both;
  overflow: auto;
  filter: drop-shadow(0 0 0.2rem black);
}

.menu{display: none;}

user_10606400 · Answer

When you click on document first check if there is any menu exist with the id which is clicked if there is show that menu else create new menu .You can use clone to create new menu and then add data-id to it and append them under some divs .

Then , when ok button is clicked simply use $(this).closest(".menu_copy").hide(); to hide the menu .

Demo Code :

var i = 1;
$(function() {
  $(document.body).click(function(e) {
    var subject = $(".menu_copy")
    //check if target click doesn't have class document && not inside menu_copy
    if ((!$(event.target).hasClass('document')) && (!subject.has(e.target).length)) {

      var div = $("", {
          "class": "document",
          id: "document" + i
        })
        .css({
          "left": e.pageX + 'px',
          "top": e.pageY + 'px'
        })
        .append($("document") + i)
        .appendTo(document.body);
      i++;
    }
  });

  //onclick of document
  $(document).on('click', '.document', function(event) {
    event.stopPropagation();
    var id = $(this).attr("id"); //get id
    //check if there is any div with data-id
    if ($("[data-id =" + id + " ]").length > 0) {
      $("[data-id =" + id + " ]").show() //show it
    } else {
      //create new menu 
      var clone_menu = $(".menu_copy:first").clone();
      $(clone_menu).attr("data-id", $(this).attr("id"))
      $(clone_menu).css("display", "block")
      $(clone_menu).appendTo(".docs"); //append inside docs
    }
  });
  //if ok is clicked
  $(document).on('click', '.validate', function(event) {
  //get color and name
    var name = $(this).closest(".menu_copy").find("input[name='name']").val();
    var color = $(this).closest(".menu_copy").find("input[name='color']").val();
    var data_id = $(this).closest(".menu_copy").attr("data-id")
    $("#" + data_id).text(name);//add name
    $("#" + data_id).css("color", color);//apply color
    $(this).closest(".menu_copy").hide(); //hide the menu
  })
});

body {
  width: 100vw;
  height: 100vh;
  background: grey;
}

.document {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 1;
  background-color: red;
  resize: both;
  overflow: auto;
  filter: drop-shadow(0 0 0.2rem black);
}

.menu {
  display: none;
}

specific menu with specific data for each object

1 Answers