Creates document_options object and settings to display url document inside iframe

This commit is contained in:
mateuswetah 2021-09-02 17:08:43 -03:00
parent d288e0e1fc
commit f5bd99aa0d
6 changed files with 148 additions and 17 deletions

View File

@ -242,7 +242,7 @@ class REST_Items_Controller extends REST_Controller {
$img_size = 'large'; $img_size = 'large';
if($request['doc_img_size']){ if ( $request['doc_img_size'] ) {
$img_size = $request['doc_img_size']; $img_size = $request['doc_img_size'];
} }

View File

@ -25,6 +25,7 @@ class Item extends Entity {
$decription, $decription,
$document_type, $document_type,
$document, $document,
$document_options,
$collection_id; $collection_id;
/** /**
@ -252,6 +253,15 @@ class Item extends Entity {
return $this->get_mapped_property( 'document_type' ); return $this->get_mapped_property( 'document_type' );
} }
/**
* Return the item document options
*
* @return string
*/
function get_document_options() {
return $this->get_mapped_property( 'document_options' );
}
/** /**
* Return the document mimetype * Return the document mimetype
* *
@ -355,6 +365,17 @@ class Item extends Entity {
$this->set_mapped_property( 'document_type', $value ); $this->set_mapped_property( 'document_type', $value );
} }
/**
* Define the document options
*
* @param [object] $value
*
* @return void
*/
function set_document_options( $value ) {
$this->set_mapped_property( 'document_options', $value );
}
/** /**
* Define the document * Define the document
* *
@ -685,14 +706,25 @@ class Item extends Entity {
public function get_document_as_html($img_size = 'large') { public function get_document_as_html($img_size = 'large') {
$type = $this->get_document_type(); $type = $this->get_document_type();
$document_options = $this->get_document_options();
$output = ''; $output = '';
if ( $type == 'url' ) { if ( $type == 'url' ) {
global $wp_embed; global $wp_embed;
$_embed = $wp_embed->autoembed($this->get_document()); $_embed = $wp_embed->autoembed($this->get_document());
if ( $_embed == $this->get_document() ) { if ( $_embed == $this->get_document() ) {
$_embed = sprintf('<a href="%s" target="blank">%s</a>', $this->get_document(), $this->get_document());
if ( $document_options && isset($document_options['forced_iframe']) && $document_options['forced_iframe'] === true ) {
$tainacan_embed = \Tainacan\Embed::get_instance();
$iframe_width = isset($document_options['forced_iframe_width']) ? $document_options['forced_iframe_width'] : '600';
$iframe_height = isset($document_options['forced_iframe_height']) ? $document_options['forced_iframe_height'] : '450';
$_embed = $tainacan_embed->add_responsive_wrapper( sprintf('<iframe src="%s" style="border: 0" width="%s" height="%s"></iframe>', $this->get_document(), $iframe_width, $iframe_height) );
} else {
$_embed = sprintf('<a href="%s" target="blank">%s</a>', $this->get_document(), $this->get_document());
}
} }
$output .= $_embed; $output .= $_embed;
} elseif ( $type == 'text' ) { } elseif ( $type == 'text' ) {

View File

@ -104,6 +104,33 @@ class Items extends Repository {
'on_error' => __( 'Invalid document', 'tainacan' ), 'on_error' => __( 'Invalid document', 'tainacan' ),
'default' => '' 'default' => ''
], ],
'document_options'=> [
'map' => 'meta',
'title' => __( 'Document options', 'tainacan' ),
'type' => 'object',
'description' => __( 'Object of options related to the document display.', 'tainacan' ),
'on_error' => __( 'Invalid document options', 'tainacan' ),
'properties' => array(
'forced_iframe' => array(
'description' => __( 'Render content in iframe', 'tainacan' ),
'type' => 'boolean',
'context' => array( 'view', 'edit', 'embed' ),
'default' => false
),
'forced_iframe_height' => array(
'description' => __( 'Iframe height (px)', 'tainacan' ),
'type' => 'number',
'context' => array( 'view', 'edit', 'embed' ),
'default' => 450
),
'forced_iframe_width' => array(
'description' => __( 'Iframe width (px)' , 'tainacan'),
'type' => 'number',
'context' => array( 'view', 'edit', 'embed' ),
'default' => 600
),
)
],
'_thumbnail_id' => [ '_thumbnail_id' => [
'map' => 'meta', 'map' => 'meta',
'title' => __( 'Thumbnail', 'tainacan' ), 'title' => __( 'Thumbnail', 'tainacan' ),

View File

@ -623,7 +623,7 @@
<b-modal <b-modal
:can-cancel="false" :can-cancel="false"
:active.sync="isURLModalActive" :active.sync="isURLModalActive"
:width="640" :width="860"
scroll="keep" scroll="keep"
trap-focus trap-focus
role="dialog" role="dialog"
@ -636,7 +636,46 @@
<h2>{{ $i18n.get('instruction_insert_url') }}</h2> <h2>{{ $i18n.get('instruction_insert_url') }}</h2>
<hr> <hr>
</div> </div>
<b-input v-model="urlLink"/> <b-input
type="url"
v-model="urlLink" />
<br>
<b-field
:addons="false"
:label="$i18n.get('label_document_option_forced_iframe')">
&nbsp;
<b-switch
size="is-small"
v-model="urlForcedIframe" />
<help-button
:title="$i18n.get('label_document_option_forced_iframe')"
:message="$i18n.get('info_document_option_forced_iframe')" />
</b-field>
<b-field
v-if="urlForcedIframe"
grouped>
<b-field :label="$i18n.get('label_document_option_iframe_width')">
<b-numberinput
:aria-minus-label="$i18n.get('label_decrease')"
:aria-plus-label="$i18n.get('label_increase')"
min="1"
v-model="urlIframeWidth"
step="1" />
</b-field>
<b-field :label="$i18n.get('label_document_option_iframe_height')">
<b-numberinput
:aria-minus-label="$i18n.get('label_decrease')"
:aria-plus-label="$i18n.get('label_increase')"
min="1"
v-model="urlIframeHeight"
step="1" />
</b-field>
</b-field>
<p
v-if="urlForcedIframe"
class="help">
{{ $i18n.get('info_iframe_dimensions') }}
</p>
<div class="field is-grouped form-submit"> <div class="field is-grouped form-submit">
<div class="control"> <div class="control">
@ -961,7 +1000,10 @@ export default {
activeTab: 0, activeTab: 0,
isLoadingAttachments: false, isLoadingAttachments: false,
metadataNameFilterString: '', metadataNameFilterString: '',
isThumbnailAltTextModalActive: false isThumbnailAltTextModalActive: false,
urlForcedIframe: false,
urlIframeWidth: 600,
urlIframeHeight: 450
} }
}, },
computed: { computed: {
@ -1380,7 +1422,17 @@ export default {
this.isURLModalActive = false; this.isURLModalActive = false;
this.form.document_type = 'url'; this.form.document_type = 'url';
this.form.document = this.urlLink; this.form.document = this.urlLink;
this.updateItemDocument({ item_id: this.itemId, document: this.form.document, document_type: this.form.document_type }) this.form.document_options = {
forced_iframe: this.urlForcedIframe,
forced_iframe_width: this.urlIframeWidth,
forced_iframe_height: this.urlIframeHeight
}
this.updateItemDocument({
item_id: this.itemId,
document: this.form.document,
document_type: this.form.document_type,
document_options: this.form.document_options
})
.then(item => { .then(item => {
this.item.document_as_html = item.document_as_html; this.item.document_as_html = item.document_as_html;
this.item.document_mimetype = item.document_mimetype; this.item.document_mimetype = item.document_mimetype;
@ -1407,6 +1459,9 @@ export default {
cancelURLSelection() { cancelURLSelection() {
this.isURLModalActive = false; this.isURLModalActive = false;
this.urlLink = ''; this.urlLink = '';
this.urlForcedIframe = this.form.document_options && this.form.document_options['forced_iframe'] !== undefined ? this.form.document_options['forced_iframe'] : false;
this.urlIframeWidth = this.form.document_options && this.form.document_options['forced_iframe_width'] !== undefined ? this.form.document_options['forced_iframe_width'] : 600;
this.urlIframeHeight = this.form.document_options && this.form.document_options['forced_iframe_height'] !== undefined ? this.form.document_options['forced_iframe_height'] : 450;
}, },
removeDocument() { removeDocument() {
this.textContent = ''; this.textContent = '';
@ -1617,7 +1672,7 @@ export default {
this.fetchItem({ this.fetchItem({
itemId: this.itemId, itemId: this.itemId,
contextEdit: true, contextEdit: true,
fetchOnly: 'title,thumbnail,status,modification_date,document_type,document,comment_status,document_as_html,related_items' fetchOnly: 'title,thumbnail,status,modification_date,document_type,document,comment_status,document_as_html,document_options,related_items'
}) })
.then((resp) => { .then((resp) => {
resp.request.then((res) => { resp.request.then((res) => {
@ -1653,6 +1708,7 @@ export default {
this.form.status = this.item.status; this.form.status = this.item.status;
this.form.document = this.item.document; this.form.document = this.item.document;
this.form.document_type = this.item.document_type; this.form.document_type = this.item.document_type;
this.form.document_options = this.item.document_options;
this.form.comment_status = this.item.comment_status; this.form.comment_status = this.item.comment_status;
this.form.thumbnail_id = this.item.thumbnail_id; this.form.thumbnail_id = this.item.thumbnail_id;
this.form.thumbnail_alt = this.item.thumbnail_alt; this.form.thumbnail_alt = this.item.thumbnail_alt;
@ -1662,6 +1718,13 @@ export default {
if (this.form.document_type != undefined && this.form.document_type == 'text') if (this.form.document_type != undefined && this.form.document_type == 'text')
this.textContent = this.form.document; this.textContent = this.form.document;
if (this.form.document_options !== undefined && this.form.document_options['forced_iframe'] !== undefined)
this.urlForcedIframe = this.form.document_options['forced_iframe'];
if (this.form.document_options !== undefined && this.form.document_options['forced_iframe_width'] !== undefined)
this.urlIframeWidth = this.form.document_options['forced_iframe_width'];
if (this.form.document_options !== undefined && this.form.document_options['forced_iframe_height'] !== undefined)
this.urlIframeHeight = this.form.document_options['forced_iframe_height'];
if (this.item.status == 'publish' || this.item.status == 'private') if (this.item.status == 'publish' || this.item.status == 'private')
this.visibility = this.item.status; this.visibility = this.item.status;

View File

@ -182,12 +182,16 @@ export const duplicateItem = ({ commit }, { collectionId, itemId, copies }) => {
}); });
}; };
export const updateItemDocument = ({ commit }, { item_id, document, document_type }) => { export const updateItemDocument = ({ commit }, { item_id, document, document_type, document_options }) => {
let params = {
document: document,
document_type: document_type,
}
if (document_options)
params['document_options'] = document_options;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.tainacan.patch('/items/' + item_id, { axios.tainacan.patch('/items/' + item_id, params).then( res => {
document: document,
document_type: document_type
}).then( res => {
let item = res.data; let item = res.data;
commit('setItem', item); commit('setItem', item);

View File

@ -594,6 +594,10 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_options_of_the_%s_metadata_type' => __( 'Options of the %s metadata type', 'tainacan'), 'label_options_of_the_%s_metadata_type' => __( 'Options of the %s metadata type', 'tainacan'),
'label_advanced_metadata_options' => __( 'Advanced metadata options', 'tainacan'), 'label_advanced_metadata_options' => __( 'Advanced metadata options', 'tainacan'),
'label_maximum_of_%s_values' => __( 'maximum of %s values', 'tainacan'), 'label_maximum_of_%s_values' => __( 'maximum of %s values', 'tainacan'),
'label_document_option_forced_iframe' => __( 'Render content in iframe', 'tainacan'),
'label_amount_of_metadata_of_type' => __( 'Amount of metadata of this type', 'tainacan'),
'label_document_option_iframe_height' => __( 'Iframe height (px)', 'tainacan'),
'label_document_option_iframe_width' => __( 'Iframe width (px)', 'tainacan'),
// Instructions. More complex sentences to guide user and placeholders // Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ), 'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
@ -877,10 +881,15 @@ return apply_filters( 'tainacan-admin-i18n', [
'info_form_not_loaded' => __( 'There are probably not enought permissions to display it here.', 'tainacan'), 'info_form_not_loaded' => __( 'There are probably not enought permissions to display it here.', 'tainacan'),
'info_validating_slug' => __( 'Validating slug...', 'tainacan'), 'info_validating_slug' => __( 'Validating slug...', 'tainacan'),
'info_no_taxonomy_metadata_created' => __( 'No taxonomy metadata created yet', 'tainacan'), 'info_no_taxonomy_metadata_created' => __( 'No taxonomy metadata created yet', 'tainacan'),
'label_amount_of_metadata_of_type' => __( 'Amount of metadata of this type', 'tainacan'),
'info_child_terms_chart' => __( 'Click on the term bar on the chart aside to see its child terms (if any) in this panel', 'tainacan' ), 'info_child_terms_chart' => __( 'Click on the term bar on the chart aside to see its child terms (if any) in this panel', 'tainacan' ),
'info_metadata_autocomplete_suggestions' => __( 'Some values already used on this metadatum:', 'tainacan' ), 'info_metadata_autocomplete_suggestions' => __( 'Some values already used on this metadatum:', 'tainacan' ),
'info_related_items' => __( 'These are items that are related to this item via their own relationship type metadata. You can edit such relation on their pages.', 'tainacan'), 'info_related_items' => __( 'These are items that are related to this item via their own relationship type metadata. You can edit such relation on their pages.', 'tainacan'),
'info_document_option_forced_iframe' => __( 'Attempt to use an iframe to embed url content on the item page. You may use this option if the autoembed do not work.', 'tainacan'),
'info_applied_filters' => __( 'filters applied', 'tainacan'),
'info_items_found' => __( 'items found', 'tainacan'),
'info_applied_filter' => __( 'filter applied', 'tainacan'),
'info_item_found' => __( 'item found', 'tainacan'),
'info_iframe_dimensions' => __( 'The dimension values will be passed to the iframe, but it\'s rendering may change according to the theme display settings. It is still important to keep an aproximate aspect ratio to the inner content.', 'tainacan'),
/* Activity actions */ /* Activity actions */
'action_update-metadata-value' => __( 'Item Metadata Value Updates', 'tainacan'), 'action_update-metadata-value' => __( 'Item Metadata Value Updates', 'tainacan'),
@ -895,10 +904,6 @@ return apply_filters( 'tainacan-admin-i18n', [
'action_delete-attachment' => __( 'Deletion of Attachments', 'tainacan'), 'action_delete-attachment' => __( 'Deletion of Attachments', 'tainacan'),
'action_update-thumbnail' => __( 'Thumbnail Updates', 'tainacan'), 'action_update-thumbnail' => __( 'Thumbnail Updates', 'tainacan'),
'action_others' => __( 'Other Actions', 'tainacan'), 'action_others' => __( 'Other Actions', 'tainacan'),
'info_applied_filters' => __( 'filters applied', 'tainacan'),
'info_items_found' => __( 'items found', 'tainacan'),
'info_applied_filter' => __( 'filter applied', 'tainacan'),
'info_item_found' => __( 'item found', 'tainacan'),
// Datepicker months // Datepicker months
'datepicker_month_january' => __( 'January', 'tainacan' ), 'datepicker_month_january' => __( 'January', 'tainacan' ),