allow user to edit div label and delete the div

Question

Hi ,

Is there a way that while creating the div , the user can provide name to the div as well as delete.

Similar to Edit bookmarks | ArcGIS API for JavaScript 3.22 .

Thanks

Aditya

RobertScheitlin__GISP · Accepted Answer

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('

+ theExtent.xmin + ',' + theExtent.ymin + ',' + theExtent.xmax + ',' + theExtent.ymax + ',' + theExtent.spatialReference.wkid + '">

' + bmName + '

'); 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('+ (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('

+ view.extent.xmin + ',' + view.extent.ymin + ',' + view.extent.xmax + ',' + view.extent.ymax + ',' + view.extent.spatialReference.wkid + '">

New Bookmark

'); domConstruct.place(item, bmTable, "last"); var output = domGeom.position(item, true); var editItem = domConstruct.toDom('+ (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('

+ theExtent.xmin + ',' + theExtent.ymin + ',' + theExtent.xmax + ',' + theExtent.ymax + ',' + theExtent.spatialReference.wkid + '">

' + bmName + '

'); 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> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍