Skip to content

Commit e1d523a

Browse files
brandonkellybrandonkelly
committed
More LP improvements
- No longer dependent on a parent ElementEditor instance - No longer reloaded when reopened, if nothing changed in the main form - Faster initial load - Save button
1 parent c228be5 commit e1d523a

8 files changed

Lines changed: 321 additions & 273 deletions

File tree

‎src/controllers/ElementsController.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -844,7 +844,6 @@ private function _additionalButtons(
844844
],
845845
]) .
846846
Html::tag('span', Craft::t('app', 'Preview'), ['class' => 'label']) .
847-
Html::tag('span', options: ['class' => ['spinner', 'spinner-absolute']]) .
848847
Html::endTag('button')
849848
: '') .
850849
Html::endTag('div');

‎src/web/assets/cp/dist/cp.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/web/assets/cp/dist/cp.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/web/assets/cp/dist/css/cp.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/web/assets/cp/dist/css/cp.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/web/assets/cp/src/css/_preview.scss‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
z-index: 100;
1111

1212
& > header {
13-
padding: 5px 24px;
13+
padding: 5px var(--pane-padding, var(--xl));
1414
background-color: var(--gray-100);
1515
box-shadow: 0 1px 0 transparentize($grey700, 0.8);
1616
box-sizing: border-box;
@@ -28,7 +28,7 @@
2828
background-color: transparentize($grey100, 0.25);
2929
backdrop-filter: blur(10px);
3030

31-
& + .lp-editor {
31+
& + .lp-content {
3232
padding-top: #{44 + 24}px;
3333
}
3434
}
@@ -42,6 +42,7 @@
4242

4343
.btn[data-icon='xmark'] {
4444
margin-inline-start: calc(-12rem / 16);
45+
margin-inline-end: calc(var(--s) * -1);
4546
&:not(:hover):not(:active):not([aria-expanded='true']) {
4647
background-color: transparent;
4748
}
@@ -89,23 +90,13 @@
8990
display: flex;
9091
flex-direction: column;
9192

92-
.lp-editor {
93+
.lp-content {
9394
flex: 1;
94-
padding: 24px;
95+
padding: var(--pane-padding, var(--xl));
9596
overflow: auto;
9697
box-sizing: border-box;
9798
position: relative;
9899

99-
& > .field {
100-
&:last-child {
101-
margin-bottom: 24px !important;
102-
}
103-
104-
& > .status-badge {
105-
inset-inline-start: calc(-24rem / 16);
106-
}
107-
}
108-
109100
&:not(.loading) > .spinner {
110101
display: none;
111102
}
@@ -131,6 +122,14 @@
131122
height: 100%;
132123
cursor: col-resize;
133124
}
125+
126+
& > footer {
127+
padding: 5px var(--pane-padding, var(--xl));
128+
box-shadow: inset 0 1px 0 var(--hairline-color);
129+
background-color: var(--gray-100);
130+
justify-content: end;
131+
height: 44px;
132+
}
134133
}
135134

136135
.lp-preview-container {

‎src/web/assets/cp/src/js/ElementEditor.js‎

Lines changed: 49 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ Craft.ElementEditor = Garnish.Base.extend(
4646
httpStatus: null,
4747
httpError: null,
4848

49-
openingPreview: false,
5049
preview: null,
5150
activatedPreviewToken: false,
5251
previewTokenQueue: null,
@@ -197,7 +196,7 @@ Craft.ElementEditor = Garnish.Base.extend(
197196
);
198197
});
199198

200-
if (this.isFullPage) {
199+
if (!this.slideout) {
201200
this.addListener(this.$container, 'submit', 'handleSubmit');
202201
}
203202

@@ -1014,23 +1013,55 @@ Craft.ElementEditor = Garnish.Base.extend(
10141013
},
10151014

10161015
getPreview: function () {
1016+
// If we already have a preview instance, but the element has been edited
1017+
// since the last time it was open, discard it
1018+
if (
1019+
this.preview &&
1020+
!this.preview.isVisible &&
1021+
this.preview.elementEditor?.settings.updatedTimestamp !==
1022+
this.settings.updatedTimestamp
1023+
) {
1024+
this.preview.destroy();
1025+
delete this.preview;
1026+
}
1027+
10171028
if (!this.preview) {
1018-
this.preview = new Craft.Preview(this);
1029+
this.preview = new Craft.Preview({
1030+
elementType: this.settings.elementType,
1031+
elementId: this.settings.isProvisionalDraft
1032+
? this.settings.canonicalId
1033+
: this.settings.elementId,
1034+
draftId: !this.settings.isProvisionalDraft
1035+
? this.settings.draftId
1036+
: null,
1037+
revisionId: this.settings.revisionId,
1038+
siteId: this.settings.siteId,
1039+
onBeforeLoad: async () => {
1040+
// Autosave any last-minute changes before the preview loads its editor
1041+
await this.checkForm(false, true);
1042+
},
1043+
});
10191044
let updatedTimestamp;
10201045
this.preview.on('open', () => {
10211046
updatedTimestamp = this.settings.updatedTimestamp;
1047+
this.pause();
10221048
});
10231049
this.preview.on('close', async () => {
1050+
if (this.$previewBtn) {
1051+
this.$previewBtn.focus();
1052+
}
10241053
if (this.settings.updatedTimestamp !== updatedTimestamp) {
10251054
await this.refreshContent();
10261055
}
1027-
const editorTabManager = this.tabManager;
1028-
const previewTabManager = this.preview.tabManager;
1029-
if (editorTabManager && previewTabManager) {
1030-
editorTabManager.selectTab(previewTabManager.getSelectedTabIndex());
1056+
const tabIndex =
1057+
this.preview.tabManager?.getSelectedTabIndex() ?? null;
1058+
if (tabIndex !== null) {
1059+
this.tabManager?.selectTab(tabIndex);
10311060
}
1032-
this.preview.destroy();
1033-
delete this.preview;
1061+
this.resume();
1062+
});
1063+
this.preview.on('afterSaveDraft', ({response}) => {
1064+
this._handleSaveDraftResponse(response);
10341065
});
10351066
}
10361067
return this.preview;
@@ -1042,17 +1073,17 @@ Craft.ElementEditor = Garnish.Base.extend(
10421073
}
10431074

10441075
this.$previewBtn.attr('aria-disabled', true);
1045-
this.$previewBtn.addClass('loading');
10461076

10471077
try {
1048-
await this.checkForm();
1049-
this.openingPreview = true;
1050-
await this.ensureIsDraftOrRevision(true);
1051-
this.getPreview().open();
1078+
const preview = this.getPreview();
1079+
await preview.open();
1080+
1081+
const tabIndex = this.tabManager?.getSelectedTabIndex() ?? null;
1082+
if (tabIndex !== null) {
1083+
preview.tabManager?.selectTab(tabIndex);
1084+
}
10521085
} finally {
10531086
this.$previewBtn.removeAttr('aria-disabled');
1054-
this.$previewBtn.removeClass('loading');
1055-
this.openingPreview = false;
10561087
}
10571088
},
10581089

@@ -1311,7 +1342,7 @@ Craft.ElementEditor = Garnish.Base.extend(
13111342
.then((response) => {
13121343
this._afterSaveDraft();
13131344
this._afterUpdateFieldLayout(data, selectedTabId, response);
1314-
this.handleSaveDraftResponse(response);
1345+
this._handleSaveDraftResponse(response);
13151346

13161347
// Add missing field modified indicators
13171348
const selector = response.data.modifiedAttributes
@@ -1380,7 +1411,7 @@ Craft.ElementEditor = Garnish.Base.extend(
13801411
});
13811412
},
13821413

1383-
handleSaveDraftResponse(response) {
1414+
_handleSaveDraftResponse(response) {
13841415
const createdProvisionalDraft = !this.settings.draftId;
13851416

13861417
if (createdProvisionalDraft) {

0 commit comments

Comments
 (0)