Initial commit
This commit is contained in:
isUnknown
commit
65e0da7e11
1397 changed files with 596542 additions and 0 deletions
1
site/OFF_plugins/embed/field/assets/css/field.css
Normal file
1
site/OFF_plugins/embed/field/assets/css/field.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
.field-embed-preview{position:relative;margin-top:-2px;border:2px solid #ddd;border-top-width:0;background-color:#ddd;overflow-y:auto}.field-embed-preview__bucket{-webkit-transition:opacity .5s;transition:opacity .5s;text-align:center}.field-embed-preview__bucket iframe,.field-embed-preview__bucket object{margin-right:auto;margin-left:auto}.field-embed-preview__bucket .embed--rich{padding:.6em}.field-embed-preview__bucket .embed--link>.embed--link__fallback{display:inline-block;padding:.6em}.field-embed-preview__bucket .embed--link>.embed--link__fallback>a{border-bottom:2px solid #bbb}.field-embed-preview__bucket .embed--error{padding:.6em;font-size:.75em;font-weight:600}.field-embed-preview__bucket .embed--error>span{display:block;font-weight:400}.field-embed-preview__loading{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:opacity .5s;transition:opacity .5s;font-size:.8em;font-weight:600;opacity:0}.field-embed-info{display:none;position:relative;margin-top:-2px;padding:.6em;border:2px solid #ddd;border-top-width:0;background-color:#fff}.field-embed-info a{font-weight:600}.field-embed-info a[href]{color:#8dad28}.field-embed-info a[href]:hover{opacity:.75}.field-embed-info__title{display:block;font-size:.95em;font-weight:600;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.field-embed-info>span:not(.field-embed-info__title){font-size:.8em}.field-embed-info>span:not(:first-child):not(:last-child)::after{content:' / '}.field-content+.field-embed-info{border-top-width:1px;border-top-color:#ddd!important}.field-embed-cheatsheet{position:absolute;top:1px;right:4px}.field-embed-cheatsheet__icon{cursor:help}.field-embed-cheatsheet__bucket{display:none;position:absolute;width:100%;margin-top:8px;padding:.35em .5em;background-color:rgba(255,255,255,.95);z-index:1}.field-embed-cheatsheet:hover+.field-embed-cheatsheet__bucket{display:block}.field-embed-cheatsheet__table{width:100%;font-size:.8em;font-weight:400}.field-embed-cheatsheet__table td{padding:0 .5em}.field-embed-cheatsheet__th{font-weight:700}.field-embed-cheatsheet__th td{border-bottom:1px solid #ddd}
|
||||
229
site/OFF_plugins/embed/field/assets/js/field.js
Normal file
229
site/OFF_plugins/embed/field/assets/js/field.js
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
(function($) {
|
||||
$.fn.embedfield = function() {
|
||||
|
||||
// ================================================
|
||||
// Make icon clickable
|
||||
// ================================================
|
||||
|
||||
var clickableIcon = function($this) {
|
||||
var icon = $this.next('.field-icon');
|
||||
|
||||
icon.css({
|
||||
'cursor': 'pointer',
|
||||
'pointer-events': 'auto'
|
||||
});
|
||||
|
||||
icon.on('click', function() {
|
||||
var url = $.trim($this.val());
|
||||
if(url !== '' && $this.is(':valid')) {
|
||||
window.open(url);
|
||||
} else {
|
||||
$this.focus();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// ================================================
|
||||
// Update embed
|
||||
// ================================================
|
||||
|
||||
var updateEmbed = function($this, preview, info, sheet) {
|
||||
var url = $.trim($this.val());
|
||||
|
||||
if(!$this.data('embedurl') || url !== $this.data('embedurl')) {
|
||||
$this.data('embedurl', url);
|
||||
|
||||
if(url === '') {
|
||||
hidePreview(preview);
|
||||
hideInfo(info);
|
||||
setCheatsheet(sheet, {parameters: ''});
|
||||
|
||||
} else if($this.is(':valid')) {
|
||||
clearPreview(preview);
|
||||
|
||||
$.ajax({
|
||||
url: $this.data('ajax') + 'preview',
|
||||
type: 'POST',
|
||||
data: {
|
||||
url: url,
|
||||
code: preview.wrapper.length === 0 ? 'false' : 'true'
|
||||
},
|
||||
success: function(data) {
|
||||
showPreview(preview, data);
|
||||
setCheatsheet(sheet, data);
|
||||
|
||||
if(data.success !== 'false') {
|
||||
showInfo(info, data);
|
||||
} else {
|
||||
hideInfo(info);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// ================================================
|
||||
// Set preview section
|
||||
// ================================================
|
||||
|
||||
var showPreview = function(preview, data) {
|
||||
preview.load.css('opacity', '0');
|
||||
preview.bucket.html(data.code).css('opacity', '1');
|
||||
preview.bucket.find('.embed__thumb').click(pluginEmbedLoadLazyVideo);
|
||||
};
|
||||
|
||||
var clearPreview = function(preview) {
|
||||
preview.bucket.css('opacity', '0');
|
||||
preview.load.css('opacity', '1');
|
||||
};
|
||||
|
||||
var hidePreview = function(preview) {
|
||||
preview.bucket.css('opacity', '0').html('');
|
||||
};
|
||||
|
||||
|
||||
// ================================================
|
||||
// Set info section
|
||||
// ================================================
|
||||
|
||||
var showInfo = function(info, data) {
|
||||
if(data.title) {
|
||||
info.title.html(data.title).show();
|
||||
} else {
|
||||
info.title.hide();
|
||||
}
|
||||
|
||||
if(data.authorName) {
|
||||
info.author.show().find('a').attr('href', data.authorUrl ).html(data.authorName);
|
||||
} else {
|
||||
info.author.hide();
|
||||
}
|
||||
|
||||
if(data.providerName) {
|
||||
info.provider.show().find('a').attr('href', data.providerUrl ).html(data.providerName);
|
||||
} else {
|
||||
info.provider.hide();
|
||||
}
|
||||
|
||||
if(data.type) {
|
||||
info.type.show().html(data.type);
|
||||
} else {
|
||||
info.type.hide();
|
||||
}
|
||||
|
||||
if(info.wrapper.prop('style').display === '') {
|
||||
info.wrapper.show();
|
||||
} else {
|
||||
info.wrapper.slideDown();
|
||||
}
|
||||
};
|
||||
|
||||
var hideInfo = function(info) {
|
||||
info.wrapper.hide();
|
||||
};
|
||||
|
||||
|
||||
// ================================================
|
||||
// Set cheatsheet
|
||||
// ================================================
|
||||
|
||||
var setCheatsheet = function(sheet, data) {
|
||||
sheet.bucket.html(data.parameters);
|
||||
if(data.parameters === '') {
|
||||
sheet.icon.hide();
|
||||
} else {
|
||||
sheet.icon.show();
|
||||
}
|
||||
};
|
||||
|
||||
// ================================================
|
||||
// Fix borders
|
||||
// ================================================
|
||||
|
||||
var showBorder = function($this, preview, info) {
|
||||
if(!$this.parents('.field').hasClass('field-with-error')) {
|
||||
setBorder(preview, info, '#8dae28');
|
||||
} else {
|
||||
setBorder(preview, info, '#000');
|
||||
}
|
||||
};
|
||||
|
||||
var hideBorder = function(preview, info) {
|
||||
setBorder(preview, info, '');
|
||||
};
|
||||
|
||||
var setBorder = function(preview, info, color) {
|
||||
preview.wrapper.add(info.wrapper).css('border-color', color);
|
||||
};
|
||||
|
||||
|
||||
// ================================================
|
||||
// Initialization
|
||||
// ================================================
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var $this = $(this);
|
||||
|
||||
if($this.data('embedfield')) {
|
||||
return;
|
||||
} else {
|
||||
$this.data('embedfield', true);
|
||||
}
|
||||
|
||||
// make icon clickable
|
||||
clickableIcon($this);
|
||||
|
||||
// collect all elements
|
||||
var inputTimer;
|
||||
var preview = $this.parent().nextAll('.field-embed-preview');
|
||||
preview = {
|
||||
wrapper: preview,
|
||||
bucket: preview.find('.field-embed-preview__bucket'),
|
||||
load: preview.find('.field-embed-preview__loading'),
|
||||
};
|
||||
var info = $this.parent().nextAll('.field-embed-info');
|
||||
info = {
|
||||
wrapper: info,
|
||||
title: info.find('.field-embed-info__title'),
|
||||
author: info.find('.field-embed-info__author'),
|
||||
provider: info.find('.field-embed-info__provider'),
|
||||
type: info.find('.field-embed-info__type')
|
||||
};
|
||||
var sheet = $this.parent().prev().find('.field-embed-cheatsheet');
|
||||
sheet = {
|
||||
wrapper: sheet,
|
||||
icon: sheet.find('.field-embed-cheatsheet__icon'),
|
||||
bucket: sheet.next(),
|
||||
};
|
||||
|
||||
// update embed on input blur
|
||||
$this.on('blur', function() {
|
||||
window.clearTimeout(inputTimer);
|
||||
updateEmbed($this, preview, info, sheet);
|
||||
});
|
||||
|
||||
// update embed on input change (delayed)
|
||||
$this.bind('input embed.change', function() {
|
||||
window.clearTimeout(inputTimer);
|
||||
inputTimer = window.setTimeout(function(){
|
||||
updateEmbed($this, preview, info, sheet);
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// update embed on load
|
||||
updateEmbed($this, preview, info, sheet);
|
||||
|
||||
// fix border colors on input focus and blur
|
||||
$this.focus(function(){
|
||||
showBorder($this, preview, info);
|
||||
}).blur(function(){
|
||||
hideBorder(preview, info);
|
||||
});
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
152
site/OFF_plugins/embed/field/assets/scss/field.scss
Normal file
152
site/OFF_plugins/embed/field/assets/scss/field.scss
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
|
||||
$bgcolor: #ddd;
|
||||
$link: #bbb;
|
||||
$green: #8dad28;
|
||||
$white: #fff;
|
||||
|
||||
.field-embed {
|
||||
|
||||
// ================================================
|
||||
// Preview display section
|
||||
// ================================================
|
||||
|
||||
&-preview {
|
||||
position: relative;
|
||||
margin-top: -2px;
|
||||
border: 2px solid $bgcolor;
|
||||
border-top-width: 0;
|
||||
background-color: $bgcolor;
|
||||
overflow-y: auto;
|
||||
|
||||
&__bucket {
|
||||
transition: opacity .5s;
|
||||
text-align: center;
|
||||
|
||||
iframe,
|
||||
object {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// actual embed
|
||||
.embed {
|
||||
&--rich { padding: .6em; }
|
||||
|
||||
&--link > .embed--link__fallback {
|
||||
display: inline-block;
|
||||
padding: .6em;
|
||||
|
||||
> a { border-bottom: 2px solid $link; }
|
||||
}
|
||||
|
||||
&--error {
|
||||
padding: .6em;
|
||||
font-size: .75em;
|
||||
font-weight: 600;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: opacity .5s;
|
||||
font-size: .8em;
|
||||
font-weight: 600;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ================================================
|
||||
// Info section
|
||||
// ================================================
|
||||
|
||||
&-info {
|
||||
display: none;
|
||||
position: relative;
|
||||
margin-top: -2px;
|
||||
padding: .6em;
|
||||
border: 2px solid $bgcolor;
|
||||
border-top-width: 0;
|
||||
background-color: $white;
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
|
||||
&[href] {
|
||||
color: $green;
|
||||
|
||||
&:hover { opacity: .75; }
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
font-size: .95em;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> span {
|
||||
&:not(.field-embed-info__title) { font-size: .8em; }
|
||||
&:not(:first-child):not(:last-child)::after { content: ' / '; }
|
||||
}
|
||||
|
||||
.field-content + & {
|
||||
border-top-width: 1px;
|
||||
border-top-color: $bgcolor !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ================================================
|
||||
// Cheatsheet overlay
|
||||
// ================================================
|
||||
|
||||
&-cheatsheet {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 4px;
|
||||
|
||||
&__icon { cursor: help; }
|
||||
|
||||
&__bucket {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
padding: .35em .5em;
|
||||
background-color: rgba($white, .95);
|
||||
z-index: 1;
|
||||
|
||||
.field-embed-cheatsheet:hover + & { display: block; }
|
||||
}
|
||||
|
||||
&__table {
|
||||
width: 100%;
|
||||
font-size: .8em;
|
||||
font-weight: 400;
|
||||
|
||||
td { padding: 0 .5em; }
|
||||
}
|
||||
|
||||
&__th {
|
||||
font-weight: 700;
|
||||
|
||||
td { border-bottom: 1px solid $bgcolor; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue