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';
if($request['doc_img_size']){
if ( $request['doc_img_size'] ) {
$img_size = $request['doc_img_size'];
}

View File

@ -25,6 +25,7 @@ class Item extends Entity {
$decription,
$document_type,
$document,
$document_options,
$collection_id;
/**
@ -252,6 +253,15 @@ class Item extends Entity {
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
*
@ -355,6 +365,17 @@ class Item extends Entity {
$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
*
@ -685,14 +706,25 @@ class Item extends Entity {
public function get_document_as_html($img_size = 'large') {
$type = $this->get_document_type();
$document_options = $this->get_document_options();
$output = '';
if ( $type == 'url' ) {
global $wp_embed;
$_embed = $wp_embed->autoembed($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;
} elseif ( $type == 'text' ) {

View File

@ -104,6 +104,33 @@ class Items extends Repository {
'on_error' => __( 'Invalid document', 'tainacan' ),
'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' => [
'map' => 'meta',
'title' => __( 'Thumbnail', 'tainacan' ),

View File

@ -623,7 +623,7 @@
<b-modal
:can-cancel="false"
:active.sync="isURLModalActive"
:width="640"
:width="860"
scroll="keep"
trap-focus
role="dialog"
@ -636,7 +636,46 @@
<h2>{{ $i18n.get('instruction_insert_url') }}</h2>
<hr>
</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="control">
@ -961,7 +1000,10 @@ export default {
activeTab: 0,
isLoadingAttachments: false,
metadataNameFilterString: '',
isThumbnailAltTextModalActive: false
isThumbnailAltTextModalActive: false,
urlForcedIframe: false,
urlIframeWidth: 600,
urlIframeHeight: 450
}
},
computed: {
@ -1380,7 +1422,17 @@ export default {
this.isURLModalActive = false;
this.form.document_type = 'url';
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 => {
this.item.document_as_html = item.document_as_html;
this.item.document_mimetype = item.document_mimetype;
@ -1407,6 +1459,9 @@ export default {
cancelURLSelection() {
this.isURLModalActive = false;
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() {
this.textContent = '';
@ -1617,7 +1672,7 @@ export default {
this.fetchItem({
itemId: this.itemId,
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) => {
resp.request.then((res) => {
@ -1653,6 +1708,7 @@ export default {
this.form.status = this.item.status;
this.form.document = this.item.document;
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.thumbnail_id = this.item.thumbnail_id;
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')
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')
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) => {
axios.tainacan.patch('/items/' + item_id, {
document: document,
document_type: document_type
}).then( res => {
axios.tainacan.patch('/items/' + item_id, params).then( res => {
let item = res.data;
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_advanced_metadata_options' => __( 'Advanced metadata options', '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
'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_validating_slug' => __( 'Validating slug...', '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_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_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 */
'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_update-thumbnail' => __( 'Thumbnail Updates', '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_month_january' => __( 'January', 'tainacan' ),