allow user to edit div label and delete the div

ADITYAKUMAR1 — Mon, 04 Dec 2017 13:19:53 GMT
Hi ,
Is there a way that while creating the div , the user can provide name to the div as well as delete.
Thanks
Aditya
Re: allow user to edit div label and delete the div

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:02:41 GMT
Aditya,
If you keep this up you are going to have me recreate the whole widget in 4.x...
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Bookmarks - 4.5</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
  <script src="https://js.arcgis.com/4.5/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .bookmark-container {
      position: absolute;
      top: 100px;
      left: 15px;
      padding: 1rem;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #eeeeee;
      box-sizing: border-box;
    }

    .esriBookmarks {
      width: 100%;
      position: relative;
    }

    .esriBookmarkTable {
      border-spacing: 0;
      border-collapse: collapse;
    }

    .esriBookmarkItem {
      padding: 5px 10px;
      width: 100%;
      border: 1px solid transparent;
      height: 36px;
      cursor: pointer;
    }

    .esriBookmarkItem>* {
      /*pointer-events: none;*/
    }

    .esriBookmarkLabel {
      pointer-events: none;
      position: relative;
      float: left;
      overflow: hidden;
      line-height: 26px;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: left;
      vertical-align: middle;
      margin-left: 0;
      user-select: none;
    }

    .esriBookmarkHighlight {
      background-color: #e2f1fb;
    }

    *,
    *:before,
    *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    .esriAddBookmark {
      color: #6e6e6e;
    }

    .esriBookmarkEditBox {
      position: fixed;
      font-size: 14px;
      height: 34px;
      width: 200px;
      z-index: 999;
      padding: 0;
      margin: 0 10px;
      border: 0;
      border-bottom: 1px solid #007ac2;
      background: #fff
    }

    .esriBookmarkEditBox:focus {
      outline: none
    }

    .esriBookmarkRemoveImage,
    .esriBookmarkEditImage {
      float: right;
      width: 30px;
      cursor: pointer;
      font-family: "CalciteWebCoreIcons";
      speak: none;
      font-size: 16px;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      text-indent: 0;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 26px;
      text-align: center;
    }

    .esriBookmarkItem:before {
      float: left;
      font-family: "CalciteWebCoreIcons";
      speak: none;
      font-size: 16px;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      text-indent: 0;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: "";
      color: inherit;
      line-height: 26px;
      margin-right: 5px;
    }

    .esriBookmarkRemoveImage:before {
      content: "\e600";
    }

    .esriBookmarkEditImage:before {
      content: "\e61b";
    }

    .esriAddBookmark:before {
      content: "\e620";
    }

    .esriBookmarkItem:after {
      content: "";
      display: table;
      clear: both;
    }
  </style>

  <script>
    var extents = [];
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/dom",
      "dojo/dom-class",
      "dojo/query",
      "dojo/on",
      "esri/geometry/Extent",
      "dojo/dom-construct",
      "dojo/dom-geometry",
      "dojo/keys",
      "dojo/json",
      "dojo/_base/lang",
      "dojo/domReady!"
    ], function(
      Map, MapView, dom, domClass, dojoQuery, on, Extent, domConstruct, domGeom, keys, JSON, lang
    ) {

      var map = new Map({
        basemap: "gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-119.4179, 36.7783],
        zoom: 6
      });

      // Bookmark data objects
      var bookmarkJSON = {
        first: {
          "extent": {
            "xmin": -12975151.579395358,
            "ymin": 3993919.9969406975,
            "xmax": -12964144.647322308,
            "ymax": 4019507.292159126,
            "spatialReference": {
              "wkid": 102100,
              "latestWkid": 3857
            }
          },
          "name": "Palm Springs, CA"
        },
        second: {
          "extent": {
            "xmin": -13052123.666878553,
            "ymin": 4024962.9850527253,
            "xmax": -13041116.734805504,
            "ymax": 4050550.280271154,
            "spatialReference": {
              "wkid": 102100,
              "latestWkid": 3857
            }
          },
          "name": "Redlands, California"
        },
        third: {
          "extent": {
            "xmin": -13048836.874662295,
            "ymin": 3844839.127898948,
            "xmax": -13037829.942589246,
            "ymax": 3870426.4231173764,
            "spatialReference": {
              "wkid": 102100,
              "latestWkid": 3857
            }
          },
          "name": "San Diego, CA"
        },
      };


      function initBookmarksWidget() {
        var bmDiv = dom.byId("bookmarksDiv");
        domClass.add(bmDiv, "bookmark-container");
        var bookmarksdiv = domConstruct.create("div", {
          class: "esriBookmarks"
        }, bmDiv);
        var bmlistdiv = domConstruct.create("div", {
          class: "esriBookmarkList",
          style: {
            width: '250px'
          }
        }, bookmarksdiv);
        var bmTable = domConstruct.create("div", {
          class: "esriBookmarkTable"
        }, bmlistdiv);
        var bmadditemdiv = domConstruct.create("div", {
          class: "esriBookmarkItem esriAddBookmark"
        }, bookmarksdiv);
        var addbmlabeldiv = domConstruct.create("div", {
          class: "esriBookmarkLabel",
          innerHTML: "Add Bookmark"
        },bmadditemdiv);
        on(bmadditemdiv, "click", bookmarkEvent);
        on(bmadditemdiv, "mouseover", addMouseOverClass);
        on(bmadditemdiv, "mouseout", removeMouseOverClass);

        //process the bookmarkJSON
        Object.keys(bookmarkJSON).forEach(function (bookmark){
          var bmName = bookmarkJSON[bookmark].name || "Bookmark " + (index + 1).toString();
          var theExtent = Extent.fromJSON(bookmarkJSON[bookmark].extent);
          var bmTable = dojoQuery(".esriBookmarkTable")[0];
          var item = domConstruct.toDom('<div class="esriBookmarkItem" data-fromuser="false" data-extent="' + theExtent.xmin + ',' + theExtent.ymin + ',' + theExtent.xmax + ',' + theExtent.ymax + ',' + theExtent.spatialReference.wkid +
            '"><div class="esriBookmarkLabel">' + bmName + '</div><div title="Remove" class="esriBookmarkRemoveImage"></div><div title="Edit" class="esriBookmarkEditImage"></div></div>');
          domConstruct.place(item, bmTable, "last");
          on(dojoQuery(".esriBookmarkRemoveImage", item)[0], "click", removeBookmark);
          on(dojoQuery(".esriBookmarkEditImage", item)[0], "click", editBookmark);
          on(item, "click", bookmarkEvent);
          on(item, "mouseover", addMouseOverClass);
          on(item, "mouseout", removeMouseOverClass);
          bookmarkJSON[bookmark];
        });

        //process the local storage bookmarks
        readBookmarks();
      }

      initBookmarksWidget();

      function addMouseOverClass(evt) {
        evt.stopPropagation();
        domClass.add(evt.currentTarget, "esriBookmarkHighlight");
      }

      function removeMouseOverClass(evt) {
        evt.stopPropagation();
        domClass.remove(evt.currentTarget, "esriBookmarkHighlight");
      }

      function removeBookmark(evt) {
        evt.stopPropagation();
        var bmItem = evt.target.parentNode;

        var bmEditItem = dojoQuery(".esriBookmarkEditBox")[0];
        if (bmEditItem) {
          domConstruct.destroy(bmEditItem);
        }
        domConstruct.destroy(bmItem);

        setTimeout(writeCurrentBookmarks, 200);
      }

      function writeCurrentBookmarks() {
        extents = [];
        var bmTable = dojoQuery(".esriBookmarkTable")[0];
        var bookMarkItems = dojoQuery(".esriBookmarkItem", bmTable);
        bookMarkItems.forEach(function(item) {
          if(item.dataset.fromuser){
            var extArr = item.dataset.extent.split(",");
            var theExt = new Extent({
              xmin: extArr[0],
              ymin: extArr[1],
              xmax: extArr[2],
              ymax: extArr[3],
              spatialReference: {
                wkid: parseInt(extArr[4])
              }
            });
            var sExt = {
              extent: theExt,
              name: dojoQuery(".esriBookmarkLabel", item)[0].innerHTML
            }
            extents.push(sExt);
          }
        });
        var stringifedExtents = JSON.stringify(extents);
        localStorage.setItem("myBookmarks", stringifedExtents);
      }

      function editBookmark(evt) {
        evt.stopPropagation();
        var bmItem = evt.target.parentNode;
        var bmItemName = dojoQuery(".esriBookmarkLabel", bmItem)[0].innerHTML;
        var output = domGeom.position(bmItem, true);
        var editItem = domConstruct.toDom('<input class="esriBookmarkEditBox" style="top: ' + (output.y + 1) + 'px; left: ' + output.x + 'px;">');
        editItem.value = bmItemName;
        var bmTable = dojoQuery(".esriBookmarkTable")[0];
        domConstruct.place(editItem, bmTable);
        on(editItem, "keypress", function(evt) {
          var charOrCode = evt.charCode || evt.keyCode
          if (charOrCode === keys.ENTER) {
            dojoQuery(".esriBookmarkLabel", bmItem)[0].innerHTML = editItem.value;
            domConstruct.destroy(editItem);
            writeCurrentBookmarks();
          }
        });
        editItem.focus();
      }

      function bookmarkEvent(evt) {
        if (domClass.contains(evt.target, "esriAddBookmark")) {
          var bmTable = dojoQuery(".esriBookmarkTable")[0];
          var item = domConstruct.toDom('<div class="esriBookmarkItem" data-fromuser="true" data-extent="' + view.extent.xmin + ',' + view.extent.ymin + ',' + view.extent.xmax + ',' + view.extent.ymax + ',' + view.extent.spatialReference.wkid +
            '"><div class="esriBookmarkLabel">New Bookmark</div><div title="Remove" class="esriBookmarkRemoveImage"></div><div title="Edit" class="esriBookmarkEditImage"></div></div>');

          domConstruct.place(item, bmTable, "last");
          var output = domGeom.position(item, true);
          var editItem = domConstruct.toDom('<input class="esriBookmarkEditBox" style="top: ' + (output.y + 1) + 'px; left: ' + output.x + 'px;">');
          domConstruct.place(editItem, bmTable);
          on(editItem, "keypress", function(evt) {
            var charOrCode = evt.charCode || evt.keyCode
            if (charOrCode === keys.ENTER) {
              dojoQuery(".esriBookmarkLabel", item)[0].innerHTML = editItem.value;
              domConstruct.destroy(editItem);
              sExt = {
                name: editItem.value,
                extent: view.extent
              }
              extents.push(sExt);
              var stringifedExtents = JSON.stringify(extents);
              localStorage.setItem("myBookmarks", stringifedExtents);
            }
          });
          on(dojoQuery(".esriBookmarkRemoveImage", item)[0], "click", removeBookmark);
          on(dojoQuery(".esriBookmarkEditImage", item)[0], "click", editBookmark);
          on(item, "click", bookmarkEvent);
          on(item, "mouseover", addMouseOverClass);
          on(item, "mouseout", removeMouseOverClass);
          editItem.focus();
          return;
        }

        var extArr = evt.target.dataset.extent.split(",");
        view.goTo(new Extent({
          xmin: extArr[0],
          ymin: extArr[1],
          xmax: extArr[2],
          ymax: extArr[3],
          spatialReference: {
            wkid: parseInt(extArr[4])
          }
        }), {
          duration: 2000
        });
      }

      function readBookmarks() {
        try {
          if (!localStorage.getItem("myBookmarks")) {
            return;
          }
          var extentArray = JSON.parse(localStorage.getItem("myBookmarks"));
          if (!extentArray) {
            return;
          }
          extentArray.map(function(extentJSON, index) {
            var bmName = extentJSON.name || "Bookmark " + (index + 1).toString();
            var theExtent = Extent.fromJSON(extentJSON.extent);
            extents.push(extentJSON);
            var bmTable = dojoQuery(".esriBookmarkTable")[0];
            var item = domConstruct.toDom('<div class="esriBookmarkItem" data-fromuser="true" data-extent="' + theExtent.xmin + ',' + theExtent.ymin + ',' + theExtent.xmax + ',' + theExtent.ymax + ',' + theExtent.spatialReference.wkid +
              '"><div class="esriBookmarkLabel">' + bmName + '</div><div title="Remove" class="esriBookmarkRemoveImage"></div><div title="Edit" class="esriBookmarkEditImage"></div></div>');
            domConstruct.place(item, bmTable, "last");
            on(dojoQuery(".esriBookmarkRemoveImage", item)[0], "click", removeBookmark);
            on(dojoQuery(".esriBookmarkEditImage", item)[0], "click", editBookmark);
            on(item, "click", bookmarkEvent);
            on(item, "mouseover", addMouseOverClass);
            on(item, "mouseout", removeMouseOverClass);
          })
        } catch (e) {
          console.warn("Could not parse bookmark JSON", e.message);
        }
      }

    });
  </script>
</head>

<body class="calcite">
  <div id="viewDiv">
    <div id="bookmarksDiv">
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
topic allow user to edit div label and delete the div in ArcGIS JavaScript Maps SDK Questions

allow user to edit div label and delete the div

Re: allow user to edit div label and delete the div
