Allow changing order of media refs (fixes #55)

gramps-project · Nov 23, 2021 · 81374cd · 81374cd
1 parent ac1a86f
commit 81374cd
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/src/components/GrampsjsGallery.js b/src/components/GrampsjsGallery.js
@@ -60,7 +60,7 @@ export class GrampsjsGallery extends GrampsjsTranslateMixin(LitElement) {
 
  render () {
  return html`
- ${this.media.map((mediaObj, index) => this._renderThumbnail(index))}
+ ${this.media.map((mediaObj, i, arr) => this._renderThumbnail(i, arr.length))}
 
  <div class="clear"></div>
 
@@ -120,7 +120,7 @@ export class GrampsjsGallery extends GrampsjsTranslateMixin(LitElement) {
  }
  }
 
- _renderThumbnail (i) {
+ _renderThumbnail (i, length) {
  const mediaObj = this.media[i]
  const {handle, mime} = mediaObj
  const {rect} = this.mediaRef[i]
@@ -136,12 +136,30 @@ export class GrampsjsGallery extends GrampsjsTranslateMixin(LitElement) {
  ${this.edit
  ? html`
  <div class="delbtn">
+ ${i === 0
+ ? ''
+ : html`
+ <mwc-icon-button
+ class="edit"
+ icon="arrow_back"
+ @click="${() => this._handleMediaRefLeft(this.mediaRef[i].ref)}"
+ ></mwc-icon-button>
+ `}
+ ${i === length - 1
+ ? ''
+ : html`
+ <mwc-icon-button
+ class="edit"
+ icon="arrow_forward"
+ @click="${() => this._handleMediaRefRight(this.mediaRef[i].ref)}"
+ ></mwc-icon-button>`
+}
  <mwc-icon-button
  class="edit"
  icon="delete"
  @click="${() => this._handleMediaRefDel(this.mediaRef[i].ref)}"
-  ></mwc-icon-button>
-  </div>
+ ></mwc-icon-button>
+ </div>
  `
  : ''}
  </div>`
@@ -151,6 +169,14 @@ export class GrampsjsGallery extends GrampsjsTranslateMixin(LitElement) {
  fireEvent(this, 'edit:action', {action: 'delMediaRef', handle: handle})
  }
 
+ _handleMediaRefLeft (handle) {
+ fireEvent(this, 'edit:action', {action: 'upMediaRef', handle: handle})
+ }
+
+ _handleMediaRefRight (handle) {
+ fireEvent(this, 'edit:action', {action: 'downMediaRef', handle: handle})
+ }
+
  _handleAddClick () {
  this.dialogContent = html`
  <grampsjs-form-mediaref

diff --git a/src/views/GrampsjsViewObject.js b/src/views/GrampsjsViewObject.js
@@ -166,6 +166,10 @@ export class GrampsjsViewObject extends GrampsjsView {
  this.delHandle(e.detail.handle, this._data, this._className, 'note_list')
  } else if (e.detail.action === 'delMediaRef') {
  this.delObject(e.detail.handle, this._data, this._className, 'media_list')
+ } else if (e.detail.action === 'upMediaRef') {
+ this.moveObject(e.detail.handle, this._data, this._className, 'media_list', 'up')
+ } else if (e.detail.action === 'downMediaRef') {
+ this.moveObject(e.detail.handle, this._data, this._className, 'media_list', 'down')
  } else if (e.detail.action === 'delChildRef') {
  this.delObject(e.detail.handle, this._data, this._className, 'child_ref_list')
  } else if (e.detail.action === 'delCitation') {