材质
材质




最新内容
2个月前
10个月前
10个月前
10个月前
10个月前
11个月前
1年前
全站热门内容
/**
* Zibll前端剧集视频扩展 - 前端脚本
* Version: 1.0.0
*/
(function($, window) {
'use strict';
// 等待DOM加载完成
$(document).ready(function() {
// 稍微延迟初始化,确保主题JS已执行
setTimeout(function() {
ZFVEManager.init();
}, 500);
});
/**
* 剧集视频管理器
*/
var ZFVEManager = {
// 配置
config: {
episodeCounter: 1, // 从第1集开始计数
maxEpisodes: 88, // 最大剧集数
},
// DOM元素缓存
elements: {},
// 媒体选择器实例
mediaSelector: null,
// 当前操作的剧集输入框
currentEpisodeInput: null,
/**
* 初始化
*/
init: function() {
// 检查是否在投稿页面(通过标题输入框判断)
if (!$('.newposts-title').length && !$('.featured-edit').length) {
return;
}
// 插入UI到页面
this.insertUI();
this.cacheElements();
this.bindEvents();
this.checkVideoStatus();
this.loadExistingData();
},
/**
* 插入UI到页面
*/
insertUI: function() {
var $template = $('#zfve-ui-template');
if (!$template.length) {
return;
}
// 查找标题输入框
var $titleBox = $('.newposts-title');
if (!$titleBox.length) {
return;
}
// 从模板中获取内容类型选择器(始终显示)
var $contentType = $template.find('.zfve-content-type').clone();
// 从模板中获取剧集视频设置(仅视频教程显示)
var $videoEpisodes = $template.find('.zfve-video-episodes-wrapper').clone();
// 从模板中获取资源介绍(始终显示)
var $description = $template.find('.zfve-resource-description').clone();
// 从模板中获取文件格式管理(仅资源类型显示)
var $fileFormats = $template.find('.zfve-file-formats').clone();
// 从模板中获取模型属性(仅资源类型显示)
var $modelAttributes = $template.find('.zfve-model-attributes').clone();
// 从模板中获取引擎属性(仅引擎格式显示)
var $engineAttributes = $template.find('.zfve-engine-attributes').clone();
// 从模板中获取资源图片(始终显示)
var $resourceImages = $template.find('.zfve-resource-images').clone();
// 插入到标题输入框之后,按正确顺序排列
$titleBox.after($contentType);
$contentType.after($videoEpisodes);
$videoEpisodes.after($description);
$description.after($fileFormats);
$fileFormats.after($modelAttributes);
$modelAttributes.after($engineAttributes);
$engineAttributes.after($resourceImages);
// 移除模板(避免重复ID)
$template.remove();
},
/**
* 缓存DOM元素
*/
cacheElements: function() {
this.elements = {
wrapper: $('.zfve-video-episodes-wrapper'),
addBtn: $('#zfve_add_episode'),
episodesList: $('#zfve_episodes_list')
};
},
/**
* 绑定事件
*/
bindEvents: function() {
var self = this;
// 添加剧集按钮
this.elements.addBtn.on('click', function(e) {
e.preventDefault();
self.addEpisode();
});
// 删除剧集(使用事件委托)
this.elements.episodesList.on('click', '.zfve-remove-episode', function(e) {
e.preventDefault();
self.removeEpisode($(this));
});
// 上传视频按钮(使用事件委托)
this.elements.episodesList.on('click', '.zfve-upload-video-btn', function(e) {
e.preventDefault();
self.openVideoSelector($(this));
});
// 监听付费内容开关(子比主题的付费模块)
this.initPayModuleListener();
// 实时同步资源介绍内容到原有编辑器
$('#post_content').on('input change', function() {
self.syncContentToOriginalEditor();
});
// 拦截AJAX请求,确保图片数据被包含
if (typeof $.ajaxSetup === 'function') {
var originalBeforeSend = $.ajaxSettings.beforeSend;
$.ajaxSetup({
beforeSend: function(xhr, settings) {
// 检查是否是表单提交的AJAX请求
if (settings.type === 'POST' && settings.data && typeof settings.data === 'string') {
if (settings.data.indexOf('post_content') > -1 || settings.data.indexOf('posts_id') > -1) {
// 合并图片到post_content
if (typeof ZFVEImagePicker !== 'undefined' && ZFVEImagePicker.resourceImages.length > 0) {
var descriptionText = $('#post_content').val() || '';
var imagesHtml = '';
ZFVEImagePicker.resourceImages.forEach(function(url) {
imagesHtml += '\n\n';
});
var fullContent = descriptionText + imagesHtml;
// 修改AJAX数据
var params = new URLSearchParams(settings.data);
params.set('post_content', fullContent);
settings.data = params.toString();
}
}
}
if (originalBeforeSend) {
return originalBeforeSend.apply(this, arguments);
}
}
});
}
// 表单提交前,更新隐藏的input值并验证
$('form.new-post-form').on('submit', function(e) {
// 强制更新所有隐藏字段(确保最新数据被提交)
if (typeof ZFVEFileFormats !== 'undefined' && ZFVEFileFormats.updateFormatsData) {
ZFVEFileFormats.updateFormatsData();
}
if (typeof ZFVEModelAttributes !== 'undefined' && ZFVEModelAttributes.saveAttributes) {
ZFVEModelAttributes.saveAttributes();
}
if (typeof ZFVEEngineAttributes !== 'undefined' && ZFVEEngineAttributes.saveAttributes) {
ZFVEEngineAttributes.saveAttributes();
}
// 验证资源文件格式
if (!self.validateFormats()) {
e.preventDefault();
alert('错误:至少需要选择一个资源文件格式!');
return false;
}
// 将图片HTML直接合并到post_content中
if (typeof ZFVEImagePicker !== 'undefined' && ZFVEImagePicker.resourceImages.length > 0) {
var descriptionText = $('#post_content').val() || '';
var imagesHtml = '';
ZFVEImagePicker.resourceImages.forEach(function(url) {
imagesHtml += '\n\n
';
});
var fullContent = descriptionText + imagesHtml;
$('#post_content').val(fullContent);
// 同时更新隐藏字段(兼容)
ZFVEImagePicker.updateHiddenField();
}
// 同步资源介绍到原有编辑器
self.syncContentToOriginalEditor();
self.updateHiddenInputs();
});
},
/**
* 检查内容类型并显示/隐藏剧集设置
*/
checkVideoStatus: function() {
// 获取当前内容类型
var currentType = $('input[name="zfve_content_type"]:checked').val() || 'resource';
// 如果是视频教程类型,始终显示剧集设置(无论是否有视频封面)
if (currentType === 'video') {
this.elements.wrapper.slideDown(300);
} else {
// 如果是资源内容类型,隐藏剧集设置
this.elements.wrapper.slideUp(300);
}
},
/**
* 初始化付费内容模块监听器
*/
initPayModuleListener: function() {
var self = this;
// 子比主题常见的付费开关选择器
var payModuleSelectors = [
'#pay-module', // 付费模块开关
'[name="pay_module"]', // 付费模块name属性
'#posts_price', // 价格输入框
'[name="posts_price"]', // 价格name属性
'.pay-module-switch', // 付费模块switch类
'.posts-price-input', // 价格输入框类
'input[id*="pay"]', // ID包含pay的input
'input[name*="pay"]', // name包含pay的input
'input[id*="price"]', // ID包含price的input
'input[name*="price"]', // name包含price的input
'.checkbox-wrapper input', // checkbox包装器中的input
'.pay-setting input', // 付费设置中的input
'.sidebar-tab-main input[type="checkbox"]' // 侧边栏checkbox
];
// 尝试找到付费开关
var $paySwitch = null;
for (var i = 0; i < payModuleSelectors.length; i++) {
$paySwitch = $(payModuleSelectors[i]);
if ($paySwitch.length) {
break;
}
}
if (!$paySwitch || !$paySwitch.length) {
// 延迟重试(付费模块可能延迟加载)
setTimeout(function() {
self.initPayModuleListener();
}, 3000);
// 使用MutationObserver监听DOM变化
this.observePayModuleChanges();
return;
}
// 初始状态检查
this.updateEpisodePaymentStatus($paySwitch);
// 监听开关变化(适配不同的输入类型)
$paySwitch.on('change', function() {
self.updateEpisodePaymentStatus($(this));
});
// 如果是价格输入框,也监听input事件
if ($paySwitch.is('input[type="text"], input[type="number"]')) {
$paySwitch.on('input', function() {
self.updateEpisodePaymentStatus($(this));
});
}
// 如果是复选框,也监听click事件
if ($paySwitch.is('input[type="checkbox"]')) {
$paySwitch.on('click', function() {
setTimeout(function() {
self.updateEpisodePaymentStatus($paySwitch);
}, 100);
});
}
},
/**
* 使用MutationObserver监听付费模块DOM变化
*/
observePayModuleChanges: function() {
var self = this;
// 监听整个右侧边栏的变化
var sidebarSelectors = ['.sidebar-tab-main', '.post-edit-sidebar', '.edit-sidebar', '#side-sortables'];
sidebarSelectors.forEach(function(selector) {
var sidebar = document.querySelector(selector);
if (sidebar) {
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
setTimeout(function() {
self.initPayModuleListener();
}, 500);
}
});
});
observer.observe(sidebar, {
childList: true,
subtree: true
});
}
});
},
/**
* 更新剧集付费状态
*/
updateEpisodePaymentStatus: function($paySwitch) {
var isPayEnabled = false;
// 判断付费功能是否开启
if ($paySwitch.is('input[type="checkbox"]')) {
// 复选框类型
isPayEnabled = $paySwitch.is(':checked');
} else if ($paySwitch.is('input[type="text"], input[type="number"]')) {
// 价格输入框,如果有值则认为开启付费
var price = $paySwitch.val();
isPayEnabled = price && price !== '' && parseFloat(price) > 0;
} else if ($paySwitch.is('select')) {
// 下拉选择框
var value = $paySwitch.val();
isPayEnabled = value && value !== '' && value !== '0';
}
// 更新所有剧集的观看权限选择器状态
var $episodePaidSelects = $('.zfve-episode-is-paid');
if (isPayEnabled) {
$episodePaidSelects.prop('disabled', false);
$('.zfve-episode-is-paid').siblings('.px12').html(
'已开启付费功能,可以设置付费剧集'
);
} else {
$episodePaidSelects.prop('disabled', true).val('0');
$('.zfve-episode-is-paid').siblings('.px12').html(
'请先在右边栏开启"付费内容"功能后,才能设置付费剧集'
);
}
},
/**
* 添加剧集
*/
addEpisode: function() {
if (this.elements.episodesList.find('.zfve-episode-item').length >= this.config.maxEpisodes) {
this.showNotice('最多可添加' + this.config.maxEpisodes + '集', 'warning');
return;
}
var episodeNumber = this.config.episodeCounter++;
var episodeHtml = this.createEpisodeHtml(episodeNumber);
this.elements.episodesList.append(episodeHtml);
// 添加淡入动画
var $newEpisode = this.elements.episodesList.find('.zfve-episode-item').last();
$newEpisode.addClass('zfve-fade-in');
// 滚动到新添加的剧集
this.scrollToEpisode($newEpisode);
// 同步新剧集的付费状态(解决添加剧集后开启付费功能,新剧集状态不更新的bug)
this.syncNewEpisodePaymentStatus();
},
/**
* 同步新添加剧集的付费状态
*/
syncNewEpisodePaymentStatus: function() {
var self = this;
// 尝试找到付费开关(使用相同的选择器列表)
var payModuleSelectors = [
'#pay-module',
'[name="pay_module"]',
'#posts_price',
'[name="posts_price"]',
'.pay-module-switch',
'.posts-price-input',
'input[id*="pay"]',
'input[name*="pay"]',
'input[id*="price"]',
'input[name*="price"]'
];
var $paySwitch = null;
for (var i = 0; i < payModuleSelectors.length; i++) {
$paySwitch = $(payModuleSelectors[i]);
if ($paySwitch.length) {
// 找到了付费开关,更新状态
setTimeout(function() {
self.updateEpisodePaymentStatus($paySwitch);
}, 100);
return;
}
}
// 如果找不到付费开关,检查现有剧集的状态
var $existingSelects = $('.zfve-episode-is-paid').not(':last');
if ($existingSelects.length > 0) {
var isEnabled = !$existingSelects.first().prop('disabled');
var $newSelect = $('.zfve-episode-is-paid').last();
if (isEnabled) {
// 如果现有剧集是启用的,新剧集也启用
$newSelect.prop('disabled', false);
$newSelect.siblings('.px12').html(
'已开启付费功能,可以设置付费剧集'
);
} else {
// 如果现有剧集是禁用的,新剧集也禁用
$newSelect.prop('disabled', true).val('0');
$newSelect.siblings('.px12').html(
'请先在右边栏开启"付费内容"功能后,才能设置付费剧集'
);
}
}
},
/**
* 创建剧集HTML
*/
createEpisodeHtml: function(episodeNumber, title, url, isPaid) {
title = title || '';
url = url || '';
isPaid = (isPaid === undefined || isPaid === null) ? false : isPaid; // 默认免费
return '
暂无图片,请先上传图片
加载失败,请重试
加载失败,请检查网络
暂无图片,点击上方"添加图片"按钮开始上传
' + '