@doegis/core/widgets/Bookmarks.js

DOE GIS API

import{_ as t}from"../chunks/tslib.es6.js";import{eventKey as e}from"../core/events.js";import o from"../core/Handles.js";import{isSome as s,isNone as i}from"../core/maybe.js";import{watch as r,initial as a,on as n}from"../core/reactiveUtils.js";import{property as d}from"../core/accessorSupport/decorators/property.js";import{cast as l}from"../core/accessorSupport/decorators/cast.js";import"../core/arrayUtils.js";import{subclass as u}from"../core/accessorSupport/decorators/subclass.js";import{formatDate as m,convertDateFormatToIntlOptions as k}from"../intl/date.js";import{SlideThumbnail as h}from"../webdoc/support/SlideThumbnail.js";import c from"./Widget.js";import p from"./Bookmarks/BookmarksUserState.js";import b from"./Bookmarks/BookmarksViewModel.js";import{CSS as _}from"./Bookmarks/css.js";import g from"./FeatureTable/Grid/support/ButtonMenu.js";import B from"./FeatureTable/Grid/support/ButtonMenuItem.js";import{Heading as v}from"./support/Heading.js";import{isActivationKey as f}from"./support/widgetUtils.js";import{messageBundle as I}from"./support/decorators/messageBundle.js";import{vmEvent as E}from"./support/decorators/vmEvent.js";import{tsx as y}from"./support/jsxFactory.js";import S from"sortablejs";function w(t,e,o){t.splice(o,0,t.splice(e,1)[0])}const T="bookmarks",A="data-bookmark-uid",x={addBookmark:!0,thumbnail:!0,time:!0},U=/^https:\/\/.*/i,C="esri.widgets.Bookmarks";let M=class extends c{constructor(t,e){super(t,e),this._handles=new o,this._addInputNode=null,this._editInputNode=null,this._urlEditInputNode=null,this._addBookmarkButtonNode=null,this._focusAddBookmarkButton=!1,this._focusEditInputBox=!1,this._focusAddInputBox=!1,this._focusUrlEditInputBox=!1,this._sortable=null,this._sortableNode=null,this._focusSortUid=null,this._selectedSortUid=null,this._sortableSavedItems=null,this._editIncludeTimeExtent=null,this._userState=null,this.disabled=!1,this.editingEnabled=!1,this.headingLevel=2,this.iconClass=_.widgetIcon,this.messages=null,this.messagesCommon=null,this.messagesUnits=null,this.viewModel=new b,this.visibleElements={...x}}initialize(){this.addHandles([r((()=>this.viewModel?.bookmarks),(()=>this._bookmarksInitialized()),a),r((()=>this.editingEnabled),(()=>this._toggleSorting()),a)])}destroy(){this._destroySortable(),this._handles.destroy(),this._handles=null,this._editMenu.destroy()}loadDependencies(){return Promise.all([import("@esri/calcite-components/dist/components/calcite-label.js"),import("@esri/calcite-components/dist/components/calcite-switch.js")])}get _editMenuItems(){const{messages:t,_userState:e}=this,o=e?.editedBookmark?.thumbnail?.url;return[new B({label:t?.menu.refreshThumbnail,iconClass:_.iconRefresh,clickFunction:()=>this._refreshThumbnail()}),new B({label:U.test(o)?t?.menu.editImageUrl:t?.menu.useImageUrl,iconClass:_.iconLink,clickFunction:()=>this._startUseImageUrl()}),o?new B({label:t?.menu.removeThumbnail,iconClass:_.iconRemove,clickFunction:()=>this._removeThumbnail()}):null].filter(Boolean)}get _editMenu(){const{_editMenuItems:t,messages:e,disabled:o}=this,s=this._get("_editMenu");s&&s.destroy();const i=new g({disabled:o,iconClass:_.iconHandleHorizontal,label:e?.menu.label});return i.items=t,i}get defaultCreateOptions(){return this.viewModel.defaultCreateOptions}set defaultCreateOptions(t){this.viewModel.defaultCreateOptions=t}get defaultEditOptions(){return this.viewModel.defaultEditOptions}set defaultEditOptions(t){this.viewModel.defaultEditOptions=t}get bookmarks(){return this.viewModel.bookmarks}set bookmarks(t){this.viewModel.bookmarks=t}get goToOverride(){return this.viewModel.goToOverride}set goToOverride(t){this.viewModel.goToOverride=t}get label(){return this.messages?.widgetLabel??""}set label(t){this._overrideIfSome("label",t)}get view(){return this.viewModel.view}set view(t){this.viewModel.view=t}castVisibleElements(t){return{...x,...t}}endAddBookmark(){this._userState=null}goTo(t){return this.viewModel.goTo(t)}render(){const{state:t}=this.viewModel,e="loading"===t?this.renderLoading():this.renderBookmarks();return y("div",{class:this.classes(_.base,_.esriWidget,{[_.esriWidgetDisabled]:this.disabled})},e)}startAddBookmark(){this._userState=new p({state:"add"}),this._focusAddInputBox=!0,this.scheduleRender()}renderLoading(){return y("div",{class:_.loaderContainer,key:"loader",tabIndex:this.disabled?-1:null},y("div",{class:_.loader}))}renderNoBookmarksContainer(){const{messages:t,disabled:e}=this;return y("div",{class:_.noBookmarksContainer,key:"no-bookmarks",tabIndex:e?-1:null},y("span",{"aria-hidden":"true",class:this.classes(_.noBookmarksIcon,_.widgetIcon)}),y(v,{level:this.headingLevel,class:this.classes(_.header,_.noBookmarksHeader)},t?.noBookmarksHeading),y("p",{class:_.noBookmarksDescription},t?.noBookmarksDescription))}renderAddBookmarkLoading(){return y("div",{key:"adding-bookmark",class:_.addingBookmark},y("span",{"aria-hidden":"true",class:this.classes(_.loading,_.rotating)}),this.messages?.addingBookmark)}renderBookmarkItems(t){if(!t)return null;const{_userState:e,editingEnabled:o}=this;return t.map((t=>o&&t&&e&&("edit"===e.state||"edit-thumbnail"===e.state)&&e.bookmark===t?"edit-thumbnail"===e.state?this.renderEditingBookmarkUrl(e.editedBookmark):this.renderEditingBookmark(e.editedBookmark):this.renderBookmark(t))).toArray()}renderBookmarksContainer(t){const{_userState:e,editingEnabled:o,disabled:s}=this,i="add"===e?.state,r=o&&!i?this.renderAddBookmarkButton():null,a=o?i&&e.loading?this.renderAddBookmarkLoading():"add"===e?.state?this.renderAddingBookmark():null:null;return[y("ul",{key:"bookmark-list","aria-label":this.messages?.widgetLabel,class:this.classes(_.bookmarkList,{[_.bookmarkListSortable]:this.editingEnabled}),afterCreate:this._sortNodeCreated,afterRemoved:this._destroySortable,"data-node-ref":"_sortableNode",bind:this,tabIndex:s?-1:null},this.renderBookmarkItems(t)),r,a]}renderAddBookmarkButton(){return this.visibleElements.addBookmark?y("div",{key:"add-bookmark-item",class:_.addBookmark},y("button",{class:this.classes(_.esriButton,_.esriButtonTertiary,_.addBookmarkButton),disabled:this.disabled,onclick:this.startAddBookmark,afterCreate:this._storeAddBookmarkButton,afterUpdate:this._storeAddBookmarkButton,"data-node-ref":"_addBookmarkButtonNode",bind:this,type:"button"},y("span",{"aria-hidden":"true",class:this.classes(_.addBookmarkIcon,_.iconPlus)}),this.messages?.addBookmark)):null}renderBookmarks(){const{bookmarks:t}=this.viewModel,e=t&&t.filter(Boolean),o=e&&e.length,s=o||this.editingEnabled?this.renderBookmarksContainer(e):null;return[o?null:this.renderNoBookmarksContainer(),s]}renderEditContainer(t){const{messagesCommon:e,disabled:o}=this,s=this._getBookmarkTitle(t);return y("div",{class:_.bookmarkEditButtonContainer,key:"edit-container"},y("button",{disabled:o,title:`${e?.edit} ${s}`,"aria-label":`${e?.edit} ${s}`,"data-bookmark":t,onclick:this._showEditBookmarkForm,bind:this,class:_.bookmarkEditButton,type:"button"},y("span",{"aria-hidden":"true",class:_.iconEdit})))}renderDragHandle(t){const{messagesCommon:e,disabled:o}=this,s=this._getBookmarkTitle(t),i={[A]:t.uid};return y("div",{role:"button",tabIndex:o?-1:0,key:"drag-handle",bind:this,class:_.bookmarkDragHandle,onkeydown:this._dragHandleKeydown,afterCreate:this._focusDragHandle,afterUpdate:this._focusDragHandle,onblur:this._dragHandleBlur,"aria-pressed":this._selectedSortUid===t.uid?"true":"false","aria-label":`${e?.dragHandleTitle} ${s}`,title:`${e?.dragHandleTitle} ${s}`,...i},y("span",{"aria-hidden":"true",class:this.classes(_.bookmarkDragHandleIcon,_.iconHandle)}))}renderBookmarkImageIcon(){return y("span",{"aria-hidden":"true",class:this.classes(_.bookmarkIcon,_.widgetIcon)})}renderBookmarkImage(t){const{visibleElements:e}=this,{thumbnail:o}=t,s=o&&o.url||"";return e.thumbnail&&s?y("img",{src:s,alt:"",class:_.bookmarkImage}):null}renderBookmarkTimeSwitch(t){const{messages:e,disabled:o}=this,{timeExtent:s}=t,{view:i}=this.viewModel;return i.timeExtent||s?y("calcite-label",{layout:"inline-space-between"},e.includeTimeExtent,y("calcite-switch",{scale:"s",disabled:o,checked:!!s,onCalciteSwitchChange:t=>{const e=t.currentTarget;this._editIncludeTimeExtent=!!e.checked}})):null}renderBookmarkTimeExtent(t){const{visibleElements:e}=this,{timeExtent:o}=t;return o?y("span",{class:_.timeExtent},[s(o.start)&&y("span",{key:"start-date-group",class:_.timeExtentGroup},y("span",{key:"start-date",class:_.timeExtentDate},this._formatDate(o.start)),e.time&&y("span",{key:"start-time",class:_.timeExtentTime},this._formatTime(o.start))),s(o.end)&&(i(o.start)||o.start.getTime()!==o.end.getTime())&&y("span",{key:"end-date-group",class:_.timeExtentGroup},y("span",{key:"end-date",class:_.timeExtentDate},this._formatDate(o.end)),e.time&&y("span",{key:"end-time",class:_.timeExtentTime},this._formatTime(o.end)))]):null}renderBookmarkButton(t){const{disabled:e}=this,{timeExtent:o}=t,{abilities:s}=this.viewModel,i=this._getBookmarkTitle(t),{thumbnail:r}=t,a=y("div",{class:this.classes(_.bookmarkImageContainer,r&&r.url?_.bookmarkImageContainerHasImage:null)},this.renderBookmarkImage(t)||this.renderBookmarkImageIcon()),n=s.time&&o?y("span",{key:"time-extent",class:_.bookmarkTimeExtent},this.renderBookmarkTimeExtent(t)):null;return y("button",{disabled:e,key:"bookmark-button",class:_.bookmarkButton,bind:this,"data-bookmark":t,onclick:this._goToBookmark,type:"button"},a,y("div",{class:_.bookmarkLabel},y("span",{key:"bookmark-title",class:_.bookmarkName},i),n))}renderBookmark(t){const{activeBookmark:e}=this.viewModel,o={[_.bookmarkActive]:e===t},s=this.editingEnabled?this.renderEditContainer(t):null,i={[A]:t.uid},r=this.editingEnabled?this.renderDragHandle(t):null;return y("li",{key:t,class:this.classes(_.bookmark,o),...i},r,this.renderBookmarkButton(t),s)}renderEditingBookmarkName(t){const{messages:e,_userState:o,disabled:s}=this,i="name-required"===o.validationState;return y("label",{class:_.authoringLabel},e?.title,i?y("strong",null,e?.invalidTitle):null,y("input",{required:!0,disabled:s,bind:this,class:this.classes(_.esriInput,i?_.authoringInputInvalid:null),type:"text",value:t.name,afterCreate:this._storeEditInput,afterUpdate:this._focusEditInput,"data-bookmark":t,"data-node-ref":"_editInputNode",placeholder:e?.titlePlaceholder}))}renderEditingBookmarkUrlActions(){const{messagesCommon:t,disabled:e}=this;return y("div",{class:_.authoringActions},y("input",{type:"button",disabled:e,value:t?.back,class:this.classes(_.esriButton,_.esriButtonTertiary),onclick:this._closeUrlEditBookmarkForm,bind:this}),y("input",{class:_.esriButton,disabled:e,type:"submit",value:t?.add}))}renderEditingBookmarkActions(){const{messagesCommon:t,disabled:e}=this,{bookmark:o}=this._userState;return y("div",{class:_.authoringActions},y("input",{type:"button",disabled:e,value:t?.delete,class:this.classes(_.esriButton,_.esriButtonTertiary,_.authoringDeleteButton),"data-bookmark":o,onclick:this._deleteBookmark,bind:this}),y("input",{disabled:e,type:"button",value:t?.cancel,class:this.classes(_.esriButton,_.esriButtonTertiary),onclick:this._closeEditBookmarkForm,bind:this}),y("input",{class:_.esriButton,disabled:e,type:"submit",value:t?.save}))}renderEditingBookmarkUrlInput(t){const{messages:e,_userState:o,disabled:s}=this,i=t.thumbnail?.url,r=U.test(i)?i:null,a="absolute-url-required"===o.validationState;return y("label",{class:_.authoringLabel},a?y("strong",null,e?.invalidImageUrl):null,y("input",{required:!0,disabled:s,bind:this,class:this.classes(_.esriInput,a?_.authoringInputInvalid:null),type:"text",value:r,afterCreate:this._storeUrlEditInput,afterUpdate:this._focusUrlEditInput,"data-bookmark":t,"data-node-ref":"_urlEditInputNode",title:e?.imageUrlTooltip,placeholder:e&&`https://<${e.imageUrlPlaceholder}>`}))}renderEditingBookmarkUrl(t){const e={[A]:t.uid};return y("li",{key:"edit-bookmark-url-form",class:_.authoringCard,...e},y("form",{class:_.authoringForm,disabled:this.disabled,onsubmit:this._editBookmarkUrlSubmit,bind:this},this.renderEditingBookmarkUrlInput(t),this.renderEditingBookmarkUrlActions()))}renderEditingBookmark(t){const e={[A]:t.uid},{abilities:o}=this.viewModel,s=o.time?y("div",{key:"edit-bookmark-time-container",class:_.timeExtentContainer},this.renderBookmarkTimeSwitch(t),this._editIncludeTimeExtent&&this.renderBookmarkTimeExtent(t)):null;return y("li",{key:"edit-bookmark-form",class:_.authoringCard,...e},y("form",{class:_.authoringForm,disabled:this.disabled,onsubmit:this._editBookmarkSubmit,bind:this},y("div",{class:_.authoringContainer},y("div",{class:_.bookmarkImageContainer},this.renderBookmarkImage(t),this._editMenu.render()),this.renderEditingBookmarkName(t)),s,this.renderEditingBookmarkActions()))}renderAddingBookmarkName(){const{_userState:t,messages:e,disabled:o}=this,s="name-required"===t.validationState;return y("label",{class:_.authoringLabel},e?.title,s?y("strong",null,e?.invalidTitle):null,y("input",{required:!0,disabled:o,bind:this,class:this.classes(_.esriInput,s?_.authoringInputInvalid:null),type:"text",afterCreate:this._storeAddInput,afterUpdate:this._focusAddInput,"data-node-ref":"_addInputNode",value:"",placeholder:e?.titlePlaceholder}))}renderAddingBookmarkActions(){const{messagesCommon:t,disabled:e}=this;return y("div",{class:this.classes(_.authoringActions)},y("input",{type:"button",disabled:e,value:t?.cancel,class:this.classes(_.esriButton,_.esriButtonTertiary,_.authoringCancelButton),onclick:this._endAddBookmark.bind(this),bind:this}),y("input",{class:_.esriButton,disabled:e,type:"submit",value:t?.add}))}renderAddingBookmark(){return y("div",{key:"add-bookmark-form",class:_.authoringCard},y("form",{class:_.authoringForm,onsubmit:this._addBookmarkSubmit,bind:this},this.renderAddingBookmarkName(),this.renderAddingBookmarkActions()))}_getBookmarkTitle(t){return t.name||this.messagesCommon?.untitled}_formatDate(t){return t?m(t,k("short-date")):null}_formatTime(t){return t?m(t,k("long-time")):null}_dragHandleBlur(){this._selectedSortUid=null,this.scheduleRender()}_dragHandleKeydown(t){const{_sortableSavedItems:o}=this,s=["ArrowDown","ArrowUp","Escape","Tab"," ","Enter"],i=e(t);if(!s.includes(i))return;const{_sortable:r,_selectedSortUid:a}=this,n=r.toArray(),d=t.target.getAttribute(A),l=n.indexOf(d);if(f(i)){const t=a&&a===d;return this._selectedSortUid=t?null:d,this._sortableSavedItems=t?null:this._sortable.toArray(),void this.scheduleRender()}if("Tab"===i)return this._selectedSortUid=null,void this.scheduleRender();if("Escape"===i&&o)return t.stopPropagation(),this._selectedSortUid=null,this._updateSortItems(o,r,d),void this.scheduleRender();if(-1===l||!a)return;const u="ArrowUp"===i?l-1:l+1;u>=n.length||u<=-1||(w(n,l,u),this._updateSortItems(n,r,d))}_updateSortItems(t,e,o){e.sort(t),this._sortBookmarks(e),this._focusSortUid=o,this._selectedSortUid=o}_focusDragHandle(t){const{_focusSortUid:e}=this;if(!t||!e)return;t.getAttribute(A)===e&&(t.focus(),this._focusSortUid=null)}_toggleSorting(){const{_sortable:t,_sortableNode:e,editingEnabled:o,disabled:s}=this;if(e)if(t)t.option("disabled",s||!o);else{const t=S.create(e,{dataIdAttr:A,handle:`.${_.bookmarkDragHandle}`,group:T,disabled:s||!o,onSort:()=>this._sortBookmarks(t)});this._sortable=t}}_sortNodeCreated(t){this._sortableNode=t,this._toggleSorting()}_sortBookmarks(t){const{bookmarks:e}=this.viewModel;if(!e)return;const o=t.toArray();e.sort(((t,e)=>{const s=o.indexOf(t.uid),i=o.indexOf(e.uid);return s>i?1:s<i?-1:0}))}_destroySortable(){const{_sortable:t}=this;t&&t.destroy(),this._sortable=null}_endAddBookmark(){this._focusAddBookmarkButton=!0,this.endAddBookmark()}_bookmarksInitialized(){const t="bookmarks-init",{_handles:e}=this;e.remove(t),e.add(n((()=>this.viewModel?.bookmarks),"change",(()=>this._bookmarksChanged())),t)}_bookmarksChanged(){const t="bookmarks-change",{bookmarks:e}=this.viewModel,{_handles:o}=this;o.remove(t);const s=e.map((t=>r((()=>[t?.name,t?.thumbnail?.url]),(()=>this.scheduleRender()))));o.add(s,t),this.scheduleRender()}_showEditBookmarkForm(t){const e=t.currentTarget["data-bookmark"];this._editIncludeTimeExtent=!!e.timeExtent,this._focusEditInputBox=!0,this._userState=new p({bookmark:e,state:"edit"}),this.viewModel.goTo(e),this.scheduleRender()}_closeUrlEditBookmarkForm(){this._focusEditInputBox=!0,this._userState.state="edit"}_closeEditBookmarkForm(){this._userState=null}_addBookmarkSubmit(t){t.preventDefault();const{_addInputNode:e,_userState:o}=this,s=e&&e.value.trim();s?(o.loading=!0,this.viewModel.createBookmark().then((t=>{t.name=s,this.viewModel.bookmarks.add(t),this._endAddBookmark()}))):o.validationState="name-required"}async _editBookmarkAndClose(t,e){const{viewModel:o}=this;await o.editBookmark(t,{...o.defaultEditOptions,...e}),this._closeEditBookmarkForm()}_editBookmarkSubmit(t){t.preventDefault();const{_editInputNode:e,_userState:o,_editIncludeTimeExtent:s}=this,i=e&&e.value.trim();i?(o.bookmark.name=i,o.bookmark.thumbnail=o.editedBookmark.thumbnail,s||(o.bookmark.timeExtent=null),this._editBookmarkAndClose(o.bookmark,{takeScreenshot:!1,captureTimeExtent:s})):o.validationState="name-required"}_storeAddBookmarkButton(t){this._addBookmarkButtonNode=t,this._focusAddBookmark()}_storeEditInput(t){this._editInputNode=t,this._focusEditInput()}_storeAddInput(t){this._addInputNode=t,this._focusAddInput()}_storeUrlEditInput(t){this._urlEditInputNode=t,this._focusUrlEditInput()}_focusUrlEditInput(){this._urlEditInputNode&&this._focusUrlEditInputBox&&(this._focusUrlEditInputBox=!1,this._urlEditInputNode.focus())}_focusAddInput(){this._addInputNode&&this._focusAddInputBox&&(this._focusAddInputBox=!1,this._addInputNode.focus())}_focusAddBookmark(){this._addBookmarkButtonNode&&this._focusAddBookmarkButton&&(this._focusAddBookmarkButton=!1,this._addBookmarkButtonNode.focus())}_focusEditInput(){this._editInputNode&&this._focusEditInputBox&&(this._focusEditInputBox=!1,this._editInputNode.focus())}_deleteBookmark(t){const e=t.currentTarget["data-bookmark"];this.viewModel.bookmarks.remove(e)}_goToBookmark(t){const e=t.currentTarget["data-bookmark"];this.endAddBookmark(),this._closeEditBookmarkForm(),this.viewModel.goTo(e)}async _refreshThumbnail(){const{_userState:t,_editMenu:e,viewModel:o}=this;t.validationState=void 0,await o.editBookmark(this._userState.editedBookmark,{takeScreenshot:!0,captureViewpoint:!1,captureRotation:!1,captureScale:!1,captureTimeExtent:!1}),e.open=!1,this._focusEditInputBox=!0,this.scheduleRender()}_removeThumbnail(){const{_userState:t,_editMenu:e}=this;t.editedBookmark.thumbnail=null,t.validationState=void 0,e.open=!1,this._focusEditInputBox=!0,this.scheduleRender()}_startUseImageUrl(){this._userState.state="edit-thumbnail",this._editMenu.open=!1,this._focusUrlEditInputBox=!0,this.scheduleRender()}_editBookmarkUrlSubmit(t){t.preventDefault();const{_urlEditInputNode:e,_userState:o}=this,s=e.value;U.test(s)?(s&&(o.editedBookmark.thumbnail=new h({url:s})),this._closeUrlEditBookmarkForm()):o.validationState="absolute-url-required"}};t([d()],M.prototype,"_editIncludeTimeExtent",void 0),t([d({type:p})],M.prototype,"_userState",void 0),t([d({readOnly:!0})],M.prototype,"_editMenuItems",null),t([d({readOnly:!0})],M.prototype,"_editMenu",null),t([d()],M.prototype,"defaultCreateOptions",null),t([d()],M.prototype,"defaultEditOptions",null),t([d()],M.prototype,"bookmarks",null),t([d()],M.prototype,"disabled",void 0),t([d()],M.prototype,"editingEnabled",void 0),t([d()],M.prototype,"headingLevel",void 0),t([d()],M.prototype,"goToOverride",null),t([d()],M.prototype,"iconClass",void 0),t([d()],M.prototype,"label",null),t([d(),I("esri/widgets/Bookmarks/t9n/Bookmarks")],M.prototype,"messages",void 0),t([d(),I("esri/t9n/common")],M.prototype,"messagesCommon",void 0),t([d(),I("esri/core/t9n/Units")],M.prototype,"messagesUnits",void 0),t([d()],M.prototype,"uiStrings",void 0),t([d()],M.prototype,"view",null),t([d({type:b}),E(["select-bookmark","bookmark-edit","bookmark-select"])],M.prototype,"viewModel",void 0),t([d()],M.prototype,"visibleElements",void 0),t([l("visibleElements")],M.prototype,"castVisibleElements",null),t([d()],M.prototype,"endAddBookmark",null),t([d()],M.prototype,"startAddBookmark",null),M=t([u(C)],M);const N=M;export{N as default};