Commit c25b1880 authored by Gordon Böhme's avatar Gordon Böhme

Merge remote-tracking branch 'origin/develop' into develop

parents 0938964f 5200c7e0
This diff is collapsed.
import './tinymce/helper';
import faq from './tinymce/faq';
import job from './tinymce/job';
import multiFaq from './tinymce/multiFaq';
......@@ -5,67 +6,25 @@ import event from './tinymce/event';
import person from './tinymce/person';
import course from './tinymce/course';
( function () {
if ( typeof tinymce !== 'undefined' ) {
tinymce.PluginManager.add( 'structured_content_dropdown', function (
(function () {
if (typeof tinymce !== 'undefined') {
tinymce.PluginManager.add('structured_content_dropdown', function (
editor,
url
) {
editor.addButton( 'structured_content_dropdown', {
editor.addButton('structured_content_dropdown', {
icon: 'structured-content',
type: 'menubutton',
menu: [
faq( editor ),
multiFaq( editor ),
job( editor ),
event( editor ),
person( editor ),
course( editor )
faq(editor),
multiFaq(editor),
job(editor),
event(editor),
person(editor),
course(editor)
],
} );
} );
});
});
}
})();
} )();
jQuery( document ).ready( function ( $ ) {
$( document ).on( 'click', '.mce-select_image', upload_image_tinymce );
function upload_image_tinymce( e ) {
e.preventDefault();
let idTarget;
let val = true;
if ( typeof e.target.dataset.target === 'undefined' ) {
idTarget = $( '.mce-image' );
} else {
idTarget = $( `#${ e.target.dataset.target }` );
val = !val;
}
const customUploader = (
wp.media.frames.file_frame = wp.media(
{
title : 'Add Image',
button : {
text: 'Add Image',
},
multiple: false,
}
)
);
customUploader.on( 'select', () => {
const attachment = customUploader
.state()
.get( 'selection' )
.first()
.toJSON();
val ? idTarget.val( attachment.id ) : idTarget.html( attachment.id );
} );
customUploader.open();
}
} );
window.datetimeLocalSupported = function () {
let input = document.createElement( 'input' );
input.setAttribute( 'type', 'datetime-local' );
return input.type === 'datetime-local';
};
export default function ( editor ) {
let postfixDateLabel;
let minWidth = 500;
if ( !datetimeLocalSupported() ) {
postfixDateLabel = '(Format: 2019-08-22T10:25)';
minWidth = 800;
}
export default function (editor) {
return {
text : 'Course',
tooltip: 'Adds a Course block to the page.',
onclick: () => {
editor.windowManager.open( {
editor.windowManager.open({
title : 'Featured Snippet Course',
minWidth : minWidth,
minWidth : 500,
height : 500,
autoScroll: true,
classes : 'sc-panel',
......@@ -27,12 +21,12 @@ export default function ( editor ) {
name : 'titleTag',
label : 'Headline-Tag',
values: [
{ text: 'h2', value: 'h2' },
{ text: 'h3', value: 'h3' },
{ text: 'h4', value: 'h4' },
{ text: 'h5', value: 'h5' },
{ text: 'h6', value: 'h6' },
{ text: 'p', value: 'p' },
{text: 'h2', value: 'h2'},
{text: 'h3', value: 'h3'},
{text: 'h4', value: 'h4'},
{text: 'h5', value: 'h5'},
{text: 'h6', value: 'h6'},
{text: 'p', value: 'p'},
],
value : 'h2', // Sets the default
},
......@@ -91,19 +85,19 @@ export default function ( editor ) {
onsubmit : e => {
editor.insertContent(
`[sc_fs_course
html="${ e.data.giveHTML }"
title="${ e.data.title }"
title_tag="${ e.data.titleTag }"
provider_name="${ e.data.providerName }"
provider_same_as="${ e.data.providerSameAs }"
css_class="${ e.data.cssClass }"
html="${e.data.giveHTML}"
title="${e.data.title}"
title_tag="${e.data.titleTag}"
provider_name="${e.data.providerName}"
provider_same_as="${e.data.providerSameAs}"
css_class="${e.data.cssClass}"
]
${ e.data.description }
${e.data.description}
[/sc_fs_course]`
);
}
,
} );
});
},
}
};
export default function (editor) {
let postfixDateLabel;
let minWidth = 500;
let postfixDateLabel = '',
minWidth = 500;
if (!datetimeLocalSupported()) {
postfixDateLabel = '(Format: 2019-08-22T10:25)';
minWidth = 800;
......@@ -197,7 +197,7 @@ export default function (editor) {
{
type : 'textbox',
name : 'offerValidFrom',
label : 'Valid From (Format: 2019-08-22T10:25)',
label : `Valid From ${postfixDateLabel}`,
classes: 'sc_valid_from',
},
{
......@@ -244,10 +244,11 @@ export default function (editor) {
,
});
if (datetimeLocalSupported()) {
$('.mce-sc_start_date').prop('type', 'datetime-local');
$('.mce-sc_end_date').prop('type', 'datetime-local');
$('.mce-sc_valid_from').prop('type', 'datetime-local');
document.querySelector('.mce-sc_start_date').type = 'datetime-local';
document.querySelector('.mce-sc_end_date').type = 'datetime-local';
document.querySelector('.mce-sc_valid_from').type = 'datetime-local';
}
bindImageButtons();
},
}
};
export default function ( editor ) {
export default function (editor) {
return {
text : 'Single FAQ',
tooltip: 'Adds a FAQ block to the page.',
onclick: () => {
editor.windowManager.open( {
editor.windowManager.open({
title : 'Featured Snippet FAQ',
minWidth : 500,
height : 500,
......@@ -21,12 +21,12 @@ export default function ( editor ) {
name : 'sc_headline',
label : 'Headline-Tag',
values: [
{ text: 'h2', value: 'h2' },
{ text: 'h3', value: 'h3' },
{ text: 'h4', value: 'h4' },
{ text: 'h5', value: 'h5' },
{ text: 'h6', value: 'h6' },
{ text: 'p', value: 'p' },
{text: 'h2', value: 'h2'},
{text: 'h3', value: 'h3'},
{text: 'h4', value: 'h4'},
{text: 'h5', value: 'h5'},
{text: 'h6', value: 'h6'},
{text: 'p', value: 'p'},
],
value : 'h2', // Sets the default
},
......@@ -78,18 +78,18 @@ export default function ( editor ) {
onsubmit : e => {
editor.insertContent(
`[sc_fs_faq
sc_id="${ 'fs_faq' + Math.random().toString( 36 ).substr( 2, 9 ) }"
html="${ e.data.giveHTML }"
headline="${ e.data.sc_headline }"
img="${ e.data.sc_img }"
question="${ e.data.sc_question }"
img_alt="${ e.data.sc_img_description }"
css_class="${ e.data.sc_css_classes }"
]${ e.data.sc_answer }[/sc_fs_faq]`
sc_id="${'fs_faq' + Math.random().toString(36).substr(2, 9)}"
html="${e.data.giveHTML}"
headline="${e.data.sc_headline}"
img="${e.data.sc_img}"
question="${e.data.sc_question}"
img_alt="${e.data.sc_img_description}"
css_class="${e.data.sc_css_classes}"
]${e.data.sc_answer}[/sc_fs_faq]`
);
}
,
} );
});
bindImageButtons();
},
}
};
window.bindImageButtons = function () {
const imageButtons = document.querySelectorAll('.mce-select_image');
for (let i = 0; i < imageButtons.length; i++) {
imageButtons[i].addEventListener('click', wpsc_upload_image);
}
}
window.wpsc_upload_image = function (e) {
e.preventDefault();
let idTarget;
let val = true;
if (typeof e.target.dataset.target === 'undefined') {
idTarget = document.querySelector('.mce-image');
} else {
idTarget = document.getElementById(`${e.target.dataset.target}`);
val = !val;
}
const customUploader = (
wp.media.frames.file_frame = wp.media(
{
title : 'Add Image',
button : {
text: 'Add Image',
},
multiple: false,
}
)
);
customUploader.on('select', () => {
const attachment = customUploader
.state()
.get('selection')
.first()
.toJSON();
val ? idTarget.value = attachment.id : idTarget.innerHTML = attachment.id;
});
customUploader.open();
}
window.datetimeLocalSupported = function () {
let input = document.createElement('input');
input.setAttribute('type', 'datetime-local');
return input.type === 'datetime-local';
};
window.dateSupported = function () {
let input = document.createElement('input');
input.setAttribute('type', 'date');
return input.type === 'date';
};
window.setHeight = function (el, val) {
if (typeof val === 'function') val = val();
if (typeof val === 'string') el.style.height = val;
else el.style.height = val + 'px';
};
window.insertAfter = function (el, referenceNode) {
referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
};
window.createElementFromHTML = function (htmlString) {
let div = document.createElement('div');
div.innerHTML = htmlString.trim();
// Change this to div.childNodes to support multiple top-level nodes
return div.firstChild;
}
\ No newline at end of file
export default function (editor) {
let postfixDateLabel = '',
minWidth = 500;
if (!dateSupported()) {
postfixDateLabel = '(Format: 2019-08-22)';
minWidth = 800;
}
return {
text : 'Job',
tooltip: 'Adds a JobPosting block to the page.',
onclick: () => {
editor.windowManager.open({
title : 'Featured Snippet Job',
minWidth : 500,
minWidth : minWidth,
height : 500,
autoScroll: true,
classes : 'sc-panel',
......@@ -181,7 +186,7 @@ export default function (editor) {
{
type : 'textbox',
name : 'validThrough',
label : 'Valid Through',
label : `Valid Through ${postfixDateLabel}`,
classes: 'sc_valid_through',
},
{
......@@ -215,9 +220,10 @@ export default function (editor) {
);
},
});
if (datetimeLocalSupported()) {
$('.mce-sc_valid_through').prop('type', 'date');
if (dateSupported()) {
document.querySelector('.mce-sc_valid_through').type = 'date';
}
bindImageButtons();
},
}
};
......@@ -69,65 +69,76 @@ export default function (editor) {
editor.insertContent(createShortcode(e));
},
});
$('<div id="sc-faq-start"></div>').insertAfter('.mce-sc_elements');
$('#addOne').click(() => {
const id = $('#fields fieldset').length;
let height = $(`#fields #fieldset-${id - 1}`).outerHeight();
height = id === 1 ? height + 30 : height - 30;
document.getElementById('addOne').addEventListener('click', () => {
let id = document.querySelectorAll('#fields fieldset').length,
baseHeight = document.querySelector(`#fields #fieldset-${id - 1}`).offsetHeight,
height = id === 1 ? baseHeight + 30 : baseHeight - 30,
layoutWrapper = document.querySelector('.mce-container > .mce-container-body.mce-abs-layout'),
nextField = document.querySelector(`#fields #fieldset-${id - 1}`);
const template = `
<fieldset id="fieldset-${id}" data-key="${id}">
<hr class="sc-hr">
<div>
<label>Headline-Tag</label>
<select name="headlineTag" id="headlineTag-${id}">
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
<option value="p">p</option>
</select>
</div>
<div>
<label>Frage</label>
<input type="text" id="question-${id}" name="question">
</div>
<div>
<label>Antwort</label>
<textarea id="answer-${id}" rows="5" name="answer"></textarea>
</div>
<div>
<div type="text" id="imageID-${id}" name="imageID"></div>
<div class="mce-btn">
<button type="button" class="mce-select_image" data-target="imageID-${id}">Select Image</button>
<fieldset id="fieldset-${id}" data-key="${id}">
<hr class="sc-hr">
<div>
<label>Headline-Tag</label>
<select name="headlineTag" id="headlineTag-${id}">
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
<option value="p">p</option>
</select>
</div>
<div>
<label>Frage</label>
<input type="text" id="question-${id}" name="question">
</div>
<div>
<label>Antwort</label>
<textarea id="answer-${id}" rows="5" name="answer"></textarea>
</div>
</div>
<div class="mce-btn removeLast">
<button type="button" onclick="removeLast()" data-target="bild-${id}">- Remove Last One</button>
</div>
</fieldset>
<div>
<div type="text" id="imageID-${id}" name="imageID"></div>
<div class="mce-btn">
<button type="button" class="mce-select_image" data-target="imageID-${id}">Select Image</button>
</div>
</div>
<div class="mce-btn removeLast">
<button type="button" onclick="removeLastFAQ()" data-target="bild-${id}">- Remove Last One</button>
</div>
</fieldset>
`;
$('.mce-container > .mce-container-body.mce-abs-layout')
.height($('.mce-container > .mce-container-body.mce-abs-layout').outerHeight() + height);
$(template).insertAfter(`#fields #fieldset-${id - 1}`);
})
setHeight(layoutWrapper, layoutWrapper.offsetHeight + height);
insertAfter(createElementFromHTML(template), nextField);
bindImageButtons();
});
bindImageButtons();
},
}
};
window.createShortcode = function (e) {
let shortcode = `[sc_fs_multi_faq `;
let count = 0;
$('#sc-start-point fieldset').each(function () {
const key = this.dataset.key;
shortcode += `headline-${key}="${$('#headlineTag-' + key).val()}" question-${key}="${$('#question-' + key).val()}" answer-${key}="${$('#answer-' + key).val()}" image-${key}="${$('#imageID-' + key).val()}" `;
count++;
});
shortcode += ` count="${count}" html="${e.data.giveHTML}" css_class="${e.data.sc_css_classes}"]`;
let shortcode = `[sc_fs_multi_faq `,
fieldsets = document.querySelectorAll('#sc-start-point fieldset');
for (let i = 0; i < fieldsets.length; i++) {
const key = fieldsets[i].dataset.key,
headlineTag = document.getElementById('headlineTag-' + key).value,
question = document.getElementById('question-' + key).value,
answer = document.getElementById('answer-' + key).value,
imageID = document.getElementById('imageID-' + key).innerHTML;
shortcode += `headline-${key}="${headlineTag}" question-${key}="${question}" answer-${key}="${answer}" image-${key}="${imageID}" `;
}
shortcode += ` count="${fieldsets.length}" html="${e.data.giveHTML}" css_class="${e.data.sc_css_classes}"]`;
return shortcode;
};
window.removeLast = function () {
$('#sc-start-point fieldset:last-of-type').remove();
window.removeLastFAQ = function () {
document.querySelector('#sc-start-point fieldset:last-of-type').remove();
};
......@@ -167,6 +167,7 @@ export default function ( editor ) {
);
},
} );
bindImageButtons();
},
}
};
......@@ -42,6 +42,11 @@ form#sc-start-point fieldset .mce-btn.long {
width: 100%;
}
#fields + .mce-btn.long {
width: 100%;
margin-top: 15px;
}
form#sc-start-point fieldset .mce-btn.removeLast {
display: none;
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment