Loading ...
Sorry, an error occurred while loading the content.

Context Menu newbie here - a few questions plz

Expand Messages
  • tropeanojohn
    Ok, I am attempting to write a script heavily based on the Dolly the ewe example. In my example, I used DIV s rather than a list element. Below is what I have
    Message 1 of 2 , Jan 12, 2007
    • 0 Attachment
      Ok, I am attempting to write a script heavily based on the Dolly the
      ewe example.

      In my example, I used DIV's rather than a list element.

      Below is what I have so far. I am stuck on duplicating the element
      that is clicked.

      Somehow I need to get the element that triggered the context menu, and
      insert the duplicated DIV after that don't I?

      I don't know how. This example serves absolutely no purpose, other
      than me learning my way around YUI.

      AM I EVEN CLOSE?? lol

      Thank you.



      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <title>Yahoo UI Library Animation Example - Colors</title>

      <!-- Include Page Specific Style Information -->
      <style>
      #doc #main-container {
      background-color: #FFFFCC;
      height: 200px;
      width: 350px;
      border-top-style: double;
      border-right-style: double;
      border-bottom-style: double;
      border-left-style: double;
      padding: 5px;
      float: left;
      border-top-width: 4px;
      border-right-width: 4px;
      border-bottom-width: 4px;
      border-left-width: 4px;
      }
      #doc #main-container #pic-thumb {
      float: left;
      background-image:
      url(http://l.yimg.com/img.avatars.yahoo.com/users/1P0ZZGSFcAAECXIE_oAnqsVtmEmoC.medium.jpg);
      height: 38px;
      width: 38px;
      padding: 3px;
      border: 1px solid #000000;
      margin-right: 5px;
      margin-left: 5px;
      }
      #doc #target-container {
      background-color: #CCCCCC;
      height: 200px;
      width: 150px;
      float: left;
      margin-left: 10px;
      border: 4px solid #0000FF;
      padding: 5px;
      }
      #doc #main-container #menu-bar {
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 1.25em;
      background-color: #FF0000;
      color: #FFFFFF;
      font-weight: bold;
      margin-bottom: 8px;
      margin-left: 5px;
      margin-right: 5px;
      padding-top: 3px;
      padding-right: 3px;
      padding-bottom: 3px;
      padding-left: 8px;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #000000;
      border-top-width: 1px;
      border-top-style: solid;
      border-top-color: #000000;
      }

      #doc #target-container #selected-header {
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 1.25em;
      background-color: #FF0000;
      color: #FFFFFF;
      font-weight: bold;
      margin-bottom: 8px;
      margin-left: 5px;
      margin-right: 5px;
      padding-top: 3px;
      padding-right: 3px;
      padding-bottom: 3px;
      padding-left: 8px;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #000000;
      border-top-width: 1px;
      border-top-style: solid;
      border-top-color: #000000;
      }
      #doc #target-container #selected-thumbs {
      height: 38px;
      width: 38px;
      border: 1px solid #333333;
      float: left;
      margin: 5px;
      }
      </style>

      <!-- CSS Dependencies -->
      <link rel="stylesheet" type="text/css" href="lib/YahooUI/fonts/fonts.css">
      <link rel="stylesheet" type="text/css"
      href="lib/YahooUI/menu/assets/menu.css">

      <!-- JS Dependencies -->
      <script type="text/javascript" src="lib/YahooUI/yahoo/yahoo.js"></script>
      <script type="text/javascript" src="lib/YahooUI/dom/dom.js"></script>
      <script type="text/javascript" src="lib/YahooUI/event/event.js"></script>
      <script type="text/javascript"
      src="lib/YahooUI/container/container_core.js"></script>

      <!-- Source File -->
      <script type="text/javascript" src="lib/YahooUI/menu/menu.js"></script>


      <script type="text/javascript">
      YAHOO.example.init = function() {

      /* Duplicate the original DIV here
      Beter do this now, in case they delete
      it.
      */

      var oDiv = document.getElementById("pic-thumb");
      var oDuplicate = oDiv.cloneNode(true);


      function duplicateDiv(){

      /* Duplicate the DIV */


      }

      function deleteItem(oToDelete) {

      /* How do I delete the HTML DIV here? */

      }

      function GetListItemFromEventTarget(p_oNode) {

      var oLI;

      if(p_oNode.tagName == "LI") {

      oLI = p_oNode;

      }
      else {

      /*
      If the target of the event was a child of an LI,
      get the parent LI element
      */

      do {

      if(p_oNode.tagName == "LI") {

      oLI = p_oNode;

      break;

      }

      }
      while((p_oNode = p_oNode.parentNode));

      }

      return oLI;

      }

      function onContextMenuItemClick(p_sType, p_aArguments, p_oItem) {



      var oLI = GetListItemFromEventTarget(this.parent.contextEventTarget);

      switch(this.index) {

      case 0: // Send to panel

      alert("0");

      break;


      case 1: // Duplicate

      duplicateDiv();

      break;


      case 2: // Delete

      alert("2");

      break;

      case 3: // Create

      alert("3");

      break;

      }

      }


      /*
      Create Context Menu
      */
      var oContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu", {
      trigger: "pic-thumb" } );

      var aMainMenuItems = [
      { text: "Send to panel", helptext: "Shift + S" },
      { text: "Duplicate", helptext: "Shift + D" },
      { text: "Delete", helptext: "ALT + D" },
      { text: "Create", helptext: "ALT + C" }
      ];

      /*
      Get Number of Items
      */
      var nMainMenuItems = aMainMenuItems.length;

      /*
      Add Menu Items
      */
      for(var i=0; i<nMainMenuItems; i++) {

      oMenuItem =
      new YAHOO.widget.ContextMenuItem(
      aMainMenuItems[i].text,
      { helptext: aMainMenuItems[i].helptext }
      );

      oContextMenu.addItem(oMenuItem);

      /*
      Add a "click" event handler to each
      ContextMenuItem instance
      */

      oMenuItem.clickEvent.subscribe(
      onContextMenuItemClick,
      oMenuItem,
      true
      );

      }

      /*
      Render the Context Menu
      */

      oContextMenu.render(document.body);

      };


      // Fire
      YAHOO.util.Event.onAvailable('doc', YAHOO.example.init);

      </script>
      </head>
      <body id="doc">

      <div id="main-container">

      <div id="menu-bar">
      <div align="left">Right click on image for more options</div>
      </div>

      <div id="pic-thumb"></div>

      </div>

      <div id="target-container">

      <div id="selected-header">
      <div align="center">Panel</div>
      </div>

      </div>

      </body>
      </html>
    • tropeanojohn
      I am studying YUI. I decided to try to impliment a solution close to the YUI Context menu example ( Dolly the Ewe ). Instead of using LI elements, I decided to
      Message 2 of 2 , Jan 12, 2007
      • 0 Attachment
        I am studying YUI. I decided to try to impliment a solution close to
        the YUI Context menu example ( Dolly the Ewe ).

        Instead of using LI elements, I decided to try to use DIV's. And I
        have it working, almost.

        When the new item is cloned, it appears the menu's trigger is not
        attaching it.

        The new element does not let you right click.

        Also, you can only add ONE for some reason.

        Here is my code. Can anyone help point me in the right direction?

        Thank you.





        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
        <html>
        <head>
        <title>Yahoo UI Library Animation Example - Colors</title>

        <!-- Include Page Specific Style Information -->
        <style>
        #doc #main-container {
        background-color: #FFFFCC;
        height: 200px;
        width: 350px;
        border-top-style: double;
        border-right-style: double;
        border-bottom-style: double;
        border-left-style: double;
        padding: 5px;
        float: left;
        border-top-width: 4px;
        border-right-width: 4px;
        border-bottom-width: 4px;
        border-left-width: 4px;
        }
        #doc #main-container #pic-thumb {
        float: left;
        background-image:
        url(http://l.yimg.com/img.avatars.yahoo.com/users/1P0ZZGSFcAAECXIE_oAnqsVtmEmoC.medium.jpg);
        height: 38px;
        width: 38px;
        padding: 3px;
        border: 1px solid #000000;
        margin-right: 5px;
        margin-left: 5px;
        cursor: pointer;
        }
        #doc #target-container {
        background-color: #CCCCCC;
        height: 200px;
        width: 150px;
        float: left;
        margin-left: 10px;
        border: 4px solid #0000FF;
        padding: 5px;
        }
        #doc #main-container #menu-bar {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 1.25em;
        background-color: #FF0000;
        color: #FFFFFF;
        font-weight: bold;
        margin-bottom: 8px;
        margin-left: 5px;
        margin-right: 5px;
        padding-top: 3px;
        padding-right: 3px;
        padding-bottom: 3px;
        padding-left: 8px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #000000;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #000000;
        }

        #doc #target-container #selected-header {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 1.25em;
        background-color: #FF0000;
        color: #FFFFFF;
        font-weight: bold;
        margin-bottom: 8px;
        margin-left: 5px;
        margin-right: 5px;
        padding-top: 3px;
        padding-right: 3px;
        padding-bottom: 3px;
        padding-left: 8px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #000000;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #000000;
        }
        #doc #target-container #selected-thumbs {
        height: 38px;
        width: 38px;
        border: 1px solid #333333;
        float: left;
        margin: 5px;
        }
        </style>

        <!-- CSS Dependencies -->
        <link rel="stylesheet" type="text/css" href="lib/YahooUI/fonts/fonts.css">
        <link rel="stylesheet" type="text/css"
        href="lib/YahooUI/menu/assets/menu.css">

        <!-- JS Dependencies -->
        <script type="text/javascript" src="lib/YahooUI/yahoo/yahoo.js"></script>
        <script type="text/javascript" src="lib/YahooUI/dom/dom.js"></script>
        <script type="text/javascript" src="lib/YahooUI/event/event.js"></script>
        <script type="text/javascript"
        src="lib/YahooUI/container/container_core.js"></script>

        <!-- Source File -->
        <script type="text/javascript" src="lib/YahooUI/menu/menu.js"></script>


        <script type="text/javascript">
        YAHOO.example.init = function() {

        /* Duplicate the original DIV here
        Beter do this now, in case they delete
        it.
        */

        var oDiv = document.getElementById("pic-thumb");
        var oDuplicate = oDiv.cloneNode(true);


        function duplicateDiv(p_Elem, p_oMenu){

        /* Duplicate the DIV */
        p_Elem.parentNode.appendChild(oDuplicate);


        }

        function deleteItem(oToDelete) {

        /* How do I delete the HTML DIV here? */

        }


        function onContextMenuItemClick(p_sType, p_aArguments, p_oItem) {

        /* Not used. This is from the original example on Yahoo
        which uses list elements. In my example, I am using DIV's.
        */

        /* var oLI =
        GetListItemFromEventTarget(this.parent.contextEventTarget);
        */

        /* Since the DIV has no child nodes, we should be
        able to just use this.parent.contextEventTarget
        which appears to return the DIV we clicked on.
        */

        var oTheDiv = this.parent.contextEventTarget;

        switch(this.index) {

        case 0: // Send to panel

        alert("0");

        break;


        case 1: // Duplicate

        duplicateDiv(oTheDiv, this);

        break;


        case 2: // Delete

        alert("2");

        break;

        case 3: // Create

        alert("3");

        break;

        }

        }


        /*
        Create Context Menu
        */
        var oContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu", {
        trigger: "pic-thumb" } );

        var aMainMenuItems = [
        { text: "Send to panel", helptext: "Shift + S" },
        { text: "Duplicate", helptext: "Shift + D" },
        { text: "Delete", helptext: "ALT + D" },
        { text: "Create", helptext: "ALT + C" }
        ];

        /*
        Get Number of Items
        */
        var nMainMenuItems = aMainMenuItems.length;

        /*
        Add Menu Items
        */
        for(var i=0; i<nMainMenuItems; i++) {

        oMenuItem =
        new YAHOO.widget.ContextMenuItem(
        aMainMenuItems[i].text,
        { helptext: aMainMenuItems[i].helptext }
        );

        oContextMenu.addItem(oMenuItem);

        /*
        Add a "click" event handler to each
        ContextMenuItem instance
        */

        oMenuItem.clickEvent.subscribe(
        onContextMenuItemClick,
        oMenuItem,
        true
        );

        }

        /*
        Render the Context Menu
        */

        oContextMenu.render(document.body);

        };


        // Fire
        YAHOO.util.Event.onAvailable('doc', YAHOO.example.init);

        </script>
        </head>
        <body id="doc">

        <div id="main-container">

        <div id="menu-bar">
        <div align="left">Right click on image for more options</div>
        </div>

        <div id="pic-thumb"></div>
        </div>
        <div id="target-container">

        <div id="selected-header">
        <div align="center">Panel</div>
        </div>

        </div>

        </body>
        </html>
      Your message has been successfully submitted and would be delivered to recipients shortly.