1074 lines
43 KiB
HTML
1074 lines
43 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<title>{$cartoonname} - ²Î¿¼ÎÄ°¸</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link href="/public/plugs/editor/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="/public/plugs/editor/css/font-awesome.min.css" rel="stylesheet">
|
||
<link href="/public/plugs/editor/css/toastr.min.css" rel="stylesheet">
|
||
<script src="/public/plugs/editor/jquery.js"></script>
|
||
<script src="/public/plugs/editor/lodash.min.js"></script>
|
||
<script src="/public/plugs/editor/toastr.min.js"></script>
|
||
<script src="/public/plugs/editor/handlebars.min.js"></script>
|
||
<script src="/public/plugs/editor/knockout-min.js"></script>
|
||
<script src="/public/plugs/editor/jquery.validate.min.js"></script>
|
||
<script src="/public/plugs/editor/jquery.validate.unobtrusive.min.js"></script>
|
||
<script src="/public/plugs/editor/bootstrap.min.js"></script>
|
||
<script src="/public/plugs/editor/clipboard.min.js"></script>
|
||
<script src="/public/plugs/editor/rasterizeHTML.allinone.js"></script>
|
||
<script src="/public/plugs/editor/qrcode.js"></script>
|
||
<script>
|
||
toastr.options.positionClass = 'toast-bottom-right';
|
||
</script>
|
||
<script src="/public/plugs/editor/admin.js?v=10"></script>
|
||
|
||
<link rel="stylesheet" href="/public/plugs/editor/css/page_mp_article.css" />
|
||
<link rel="stylesheet" href="/public/plugs/editor/css/page_mp_article_improve_combo.css" />
|
||
<link rel="stylesheet" href="/public/plugs/editor/css/admin.css?v=5"/>
|
||
|
||
<!--[if lte IE 8]>
|
||
<script src="https://cdn-comic.weipinwan.com/comic/static/1509519112101/assets/js/html5shiv.min.js"></script>
|
||
<script src="https://cdn-comic.weipinwan.com/comic/static/1509519112101/assets/js/respond.min.js"></script>
|
||
<![endif]-->
|
||
|
||
<style type="text/css">
|
||
#editor-bar .dropdown-menu {
|
||
height: auto;
|
||
max-height: 400px;
|
||
overflow-x: hidden;
|
||
}
|
||
p{margin:0px;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="rich_media">
|
||
<div class="rich_media_inner" style="padding-top:0">
|
||
<div class="rich_media_area_primary">
|
||
<h1 id="wx-article-title" class="rich_media_title">{$cartoonname} - ²Î¿¼ÎÄ°¸</h1>
|
||
<p id="wx-article-summary" style="font-size: 14px; text-indent: 2em;">{$intro}</p>
|
||
<div class="rich_media_content">
|
||
<div id="wx-article-content">
|
||
<div id="wx-article-cover"></div>
|
||
<p> £¨Í¼Æ¬Ô´×ÔÍøÂ磬ÈôÓÐÇÖȨÇëÁªÏµÉ¾³ý£©</p>
|
||
<div id="wx-article-body"></div>
|
||
<div id="wx-article-footer"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{notempty name="referral_link_id"}
|
||
<div style="padding-top:20px">
|
||
<div class="input-group">
|
||
<span class="input-group-addon">ÔÎÄÁ´½Ó</span>
|
||
<input type="text" id="txt-referral-link" readonly style="background:white" class="form-control"
|
||
value="{$referral_link}"
|
||
onclick="this.select()"/>
|
||
<span class="input-group-btn">
|
||
<button type="button" data-toggle="copy-link" class="btn btn-default"><i class="fa fa-copy"></i> ¸´ÖÆ</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{/notempty}
|
||
</div>
|
||
</div>
|
||
|
||
<nav id="editor-bar" class="navbar navbar-default navbar-fixed-bottom">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#editor-menu" aria-expanded="false">
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="collapse navbar-collapse" id="editor-menu">
|
||
<ul class="nav navbar-nav">
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-header"></i> ÎÄ°¸±êÌâ <span class="caret"></span></a>
|
||
<ul class="dropdown-menu">
|
||
<!-- ko foreach: titles -->
|
||
<li><a href="#" data-bind="text: title, click: $root.changeTitle"></a></li>
|
||
<!-- /ko -->
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-image"></i> ÎÄ°¸·âÃæ <span class="caret"></span></a>
|
||
<ul class="dropdown-menu">
|
||
<!-- ko foreach: covers -->
|
||
<li>
|
||
<a href="#" data-bind="click: $root.changeCover">
|
||
<img style="max-width:200px;max-height:40px;" data-bind="attr: { src: cover_url }" />
|
||
</a>
|
||
</li>
|
||
<!-- /ko -->
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">ÕýÎÄÄ£°å <span class="caret"></span></a>
|
||
<ul class="dropdown-menu">
|
||
<!-- ko foreach: body_templates -->
|
||
<li style="border-bottom:#eee 1px solid;">
|
||
<a href="#" data-bind="click: $root.changeBodyTemplate">
|
||
<img style="max-height: 40px;" data-bind="attr: { src: preview_img }" />
|
||
</a>
|
||
</li>
|
||
<!-- /ko -->
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">ÔÎÄÒýµ¼Ä£°å <span class="caret"></span></a>
|
||
<ul class="dropdown-menu">
|
||
<!-- ko foreach: footer_templates -->
|
||
<li style="border-bottom:#eee 1px solid;">
|
||
<a href="#" data-bind="click: $root.changeFooterTemplate">
|
||
<img style="max-height: 40px;" data-bind="attr: { src: preview_img }" />
|
||
</a>
|
||
</li>
|
||
<!-- /ko -->
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-copy"></i> ¸´ÖÆ <span class="caret"></span></a>
|
||
<ul class="dropdown-menu">
|
||
|
||
|
||
<li>
|
||
<a href="javascript:void(0);" data-toggle="copy-text" data-clipboard-target="#wx-article-title">¸´ÖƱêÌâ</a>
|
||
</li>
|
||
<li>
|
||
<a href="javascript:void(0);" data-toggle="copy-text" data-clipboard-target="#wx-article-summary">¸´ÖÆÕªÒª</a>
|
||
</li>
|
||
<li>
|
||
<a href="javascript:void(0);" data-toggle="copy-text" data-clipboard-target="#wx-article-content">¸´ÖÆÕýÎÄ (È«²¿)</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="navbar-form navbar-right">
|
||
{empty name="referral_link_id"}
|
||
|
||
<span data-bind="visible: is_novel_online" style="display:none;">
|
||
<button type="button" class="btn btn-primary" data-bind="click: openReferralLinkModal">
|
||
<i class="fa fa-link"></i> Éú³ÉÔÎÄÁ´½Ó
|
||
</button>
|
||
</span>
|
||
{else /}
|
||
<span data-bind="visible: is_novel_online" style="display:none;">
|
||
<span class="btn-group dropup">
|
||
<button type="button" class="btn btn-primary" data-toggle="get-link"><i class="fa fa-link"></i> »ñÈ¡ÔÎÄÁ´½Ó</button>
|
||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
|
||
<span class="caret"></span>
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-bind="click: editReferralLink"><i class="fa fa-fw fa-edit"></i> ÐÞ¸ÄÁ´½ÓÊôÐÔ</a></li>
|
||
<li><a href="#" data-bind="click: openReferralLinkModal"><i class="fa fa-fw fa-plus"></i> Éú³ÉÐÂÁ´½Ó</a></li>
|
||
</ul>
|
||
</span>
|
||
</span>
|
||
{/empty}
|
||
<span data-bind="visible: !is_novel_online()" style="display:none;">
|
||
<button type="button" class="btn btn-disabled">Âþ»ÒÑϼÜ</button>
|
||
</span>
|
||
</div>
|
||
</div><!-- /.navbar-collapse -->
|
||
</div><!-- /.container-fluid -->
|
||
</nav>
|
||
|
||
<div class="modal fade" id="create-referral-link-modal" tabindex="-1">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-bind="click: close" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
<h4 class="modal-title" data-bind="text: title"></h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div data-bind="visible: loading" class="loading-panel">
|
||
<i class="fa fa-spin fa-spinner"></i>
|
||
</div>
|
||
<form class="form-horizontal" style="display: none" data-bind="visible: !loading()">
|
||
<div class="form-group">
|
||
<label class="control-label col-sm-3">Èë¿ÚÒ³Ãæ</label>
|
||
<div class="col-sm-7">
|
||
<p class="form-control-static">
|
||
<span data-bind="visible: type() == 0">Âþ»ÔĶÁÒ³</span>
|
||
<span data-bind="visible: type() == 1">Ê×Ò³</span>
|
||
<span data-bind="visible: type() == 2">ÈÈÃÅÍƼö</span>
|
||
<span data-bind="visible: type() == 3">VIPÄê·Ñ³äÖµ</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="control-label col-sm-3"><span class="required">*</span> Åɵ¥ÇþµÀÃû³Æ</label>
|
||
<div class="col-sm-7">
|
||
<input type="text" class="form-control" maxlength="100" name="description"
|
||
data-val="true"
|
||
data-val-required="ÇëÌîдÅɵ¥ÇþµÀÃû³Æ"
|
||
data-bind="value: description" />
|
||
<p class="help-block help-block-error" data-valmsg-for="description" data-valmsg-replace="true"></p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-sm-3"><span class="required">*</span> Åɵ¥ÇþµÀÀàÐÍ</label>
|
||
<div class="col-sm-7">
|
||
<label class="radio-inline">
|
||
<input type="radio" name="referrer_type" value="verified_mp"
|
||
data-bind="checked: referrer_type"
|
||
data-val="true"
|
||
data-val-required="ÇëÑ¡ÔñÅɵ¥ÇþµÀÀàÐÍ"/>
|
||
<span>ÈÏÖ¤¹«ÖÚºÅ</span>
|
||
</label>
|
||
<label class="radio-inline">
|
||
<input type="radio" name="referrer_type" value="not_verified_mp"
|
||
data-bind="checked: referrer_type"/>
|
||
<span>·ÇÈÏÖ¤¹«ÖÚºÅ</span>
|
||
</label>
|
||
<p class="help-block help-block-error" data-valmsg-for="referrer_type" data-valmsg-replace="true"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div data-bind="visible: type() == 0" style="display:none">
|
||
<div class="form-group">
|
||
<div class="col-sm-7 col-sm-offset-3">
|
||
<p class="form-control-static">
|
||
<img style="width:80px" data-bind="attr: { src: novel_avatar }" />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-sm-3">ÔĶÁÔÎÄÕ½Ú</label>
|
||
<div class="col-sm-7">
|
||
<p class="form-control-static">
|
||
<strong data-bind="html: article_title"></strong>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-sm-3">¹Ø×¢Õ½ÚÐòºÅ</label>
|
||
<div class="col-sm-7">
|
||
<input type="text" class="form-control" maxlength="100" name="force_follow_chapter_idx"
|
||
placeholder="¿ÉÑ¡, Èç²»ÌîÔòʹÓÃÂþ»Ä¬ÈÏÉèÖÃ"
|
||
data-val="true"
|
||
data-val-digits="ÇëÊäÈëÊý×Ö"
|
||
data-bind="value: force_follow_chapter_idx" />
|
||
<div data-bind="visible: force_follow_chapter_id" style="display:none;margin-top:5px">
|
||
<span data-bind="text: force_follow_chapter_title"></span>
|
||
</div>
|
||
<p class="help-block help-block-error" data-valmsg-for="force_follow_chapter_idx" data-valmsg-replace="true"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" data-bind="click: submit, text: id() ? '±£´æÐÞ¸Ä' : 'Éú³ÉÁ´½Ó'"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var GetReferralLinkModal = function () {
|
||
var self = this;
|
||
var $modal = null;
|
||
var callbacks = null;
|
||
var defer = null;
|
||
var opts = null;
|
||
var link = null; // Éú³ÉµÄÁ´½Ó£¬{ id, url }
|
||
var promiseurl = "{:url('articles/api_get',array('model_id'=>25))}";
|
||
|
||
var model = {
|
||
loading: ko.observable(false),
|
||
submitting: ko.observable(false),
|
||
|
||
title: ko.observable(),
|
||
|
||
id: ko.observable(),
|
||
type: ko.observable(0),
|
||
article_id: ko.observable(),
|
||
novel_id: ko.observable(),
|
||
novel_avatar: ko.observable(),
|
||
novel_title: ko.observable(),
|
||
article_title: ko.observable(),
|
||
referrer_type: ko.observable(),
|
||
description: ko.observable(),
|
||
force_follow_chapter_idx: ko.observable(),
|
||
force_follow_chapter_id: ko.observable(),
|
||
force_follow_chapter_title: ko.observable(),
|
||
|
||
submit: function () {
|
||
self.submit();
|
||
},
|
||
close: function () {
|
||
self.close();
|
||
}
|
||
};
|
||
|
||
self.open = function (options) {
|
||
self.reset();
|
||
|
||
defer = $.Deferred();
|
||
|
||
opts = options;
|
||
|
||
if (!$modal) {
|
||
$modal = $('#create-referral-link-modal');
|
||
ko.applyBindings(model, $modal.find('.modal-content')[0]);
|
||
|
||
model.force_follow_chapter_idx.subscribe(function (idx) {
|
||
if (!idx || !/^\d+$/.test(idx)) {
|
||
model.force_follow_chapter_id(null);
|
||
model.force_follow_chapter_title(null);
|
||
} else {
|
||
self.tryFetchForceFollowChapterInfo();
|
||
}
|
||
});
|
||
}
|
||
|
||
callbacks = options.callbacks || {};
|
||
|
||
model.title(options.title || (options.id ? 'ÐÞ¸ÄÍƹãÁ´½ÓÊôÐÔ' : 'Éú³ÉÍƹãÁ´½Ó'));
|
||
|
||
if (options.type !== undefined) {
|
||
model.type(options.type);
|
||
}
|
||
|
||
model.loading(true);
|
||
|
||
var promise = $.Deferred().resolve().promise();
|
||
|
||
if (options.id) {
|
||
model.id(options.id);
|
||
|
||
promise = $.get(promiseurl+'&id=' + options.id, function (result) {
|
||
model.type(result.type);
|
||
model.article_id(result.article_id);
|
||
model.description(result.description);
|
||
model.referrer_type(result.referrer_type);
|
||
model.force_follow_chapter_idx(result.force_follow_chapter_idx);
|
||
|
||
opts.wx_article_title_id = result.wx_article_title_id;
|
||
opts.wx_article_cover_id = result.wx_article_cover_id;
|
||
opts.wx_article_body_template_id = result.wx_article_body_template_id;
|
||
opts.wx_article_footer_template_id = result.wx_article_footer_template_id;
|
||
});
|
||
} else {
|
||
model.article_id(options.article_id);
|
||
}
|
||
|
||
promise.then(function () {
|
||
self.tryFetchNovelArticleInfo();
|
||
self.tryFetchForceFollowChapterInfo();
|
||
model.loading(false);
|
||
});
|
||
|
||
$modal.modal('show');
|
||
|
||
return defer.promise();
|
||
};
|
||
|
||
self.tryFetchNovelArticleInfo = function () {
|
||
var articleId = model.article_id();
|
||
if (!articleId) {
|
||
return $.Deferred().resolve();
|
||
}
|
||
|
||
return $.get({:url('articles/api_get_short_article_info',array('model_id'=>25))}'¤t_article_id=' + articleId)
|
||
.then(function (result) {
|
||
model.novel_id(result.novel.id);
|
||
model.novel_avatar(result.novel.avatar);
|
||
model.novel_title(result.novel.title);
|
||
model.article_title(result.title);
|
||
});
|
||
};
|
||
|
||
self.tryFetchForceFollowChapterInfo = function () {
|
||
var idx = model.force_follow_chapter_idx();
|
||
if (idx) {
|
||
idx = parseInt(idx);
|
||
}
|
||
|
||
if (!idx) {
|
||
return false;
|
||
}
|
||
|
||
// Èç¹û novel_id δ¼ÓÔØ£¬Ò²ºöÂÔ£¬novel_id ¼ÓÔغó»áÔÙ´¥·¢Ò»´Î»ñÈ¡¹Ø×¢Õ½ÚÐÅÏ¢
|
||
if (!model.novel_id()) {
|
||
return false;
|
||
}
|
||
|
||
$.get('/admin/articles/api_get_basic_info_by_idx?model_id=25', {
|
||
nid: model.novel_id(),
|
||
idx: model.force_follow_chapter_idx()
|
||
})
|
||
.then(function (result) {
|
||
model.force_follow_chapter_id(result.id);
|
||
model.force_follow_chapter_title(result.title);
|
||
})
|
||
.fail(handleAjaxError);
|
||
};
|
||
|
||
self.submit = function () {
|
||
if (model.submitting()) {
|
||
return false;
|
||
}
|
||
|
||
if (!$modal.find('form').valid()) {
|
||
return false;
|
||
}
|
||
|
||
model.submitting(true);
|
||
|
||
$.ajax({
|
||
url: '/admin/articles/api_save?model_id=7',
|
||
type: 'POST',
|
||
contentType: 'application/json',
|
||
data: JSON.stringify({
|
||
id: model.id(),
|
||
type: model.referrer_type(),
|
||
chapterid: model.article_id(),
|
||
followchapter: model.force_follow_chapter_idx(),
|
||
title: model.description(),
|
||
article_title_id: opts.wx_article_title_id,
|
||
article_cover_id: opts.wx_article_cover_id,
|
||
article_body_template_id: opts.wx_article_body_template_id,
|
||
article_footer_template_id: opts.wx_article_footer_template_id
|
||
})
|
||
})
|
||
.then(function (result) {
|
||
link = result;
|
||
|
||
if (callbacks.link_generated) {
|
||
callbacks.link_generated(result);
|
||
}
|
||
|
||
self.close();
|
||
|
||
GetReferralLinkQrcodeModal.instance.open({
|
||
url: link.url,
|
||
callbacks: {
|
||
close: function () {
|
||
defer.resolve(link);
|
||
}
|
||
}
|
||
});
|
||
})
|
||
.fail(handleAjaxError)
|
||
.always(function () {
|
||
model.submitting(false);
|
||
});
|
||
};
|
||
|
||
self.close = function () {
|
||
$modal.modal('hide');
|
||
};
|
||
|
||
self.reset = function () {
|
||
link = null;
|
||
|
||
model.loading(false);
|
||
model.submitting(false);
|
||
|
||
model.id(null);
|
||
model.article_id(null);
|
||
model.novel_avatar(null);
|
||
model.novel_title(null);
|
||
model.article_title(null);
|
||
model.referrer_type(null);
|
||
model.force_follow_chapter_idx(null);
|
||
model.force_follow_chapter_id(null);
|
||
model.force_follow_chapter_title(null);
|
||
model.description(null);
|
||
}
|
||
};
|
||
|
||
GetReferralLinkModal.instance = new GetReferralLinkModal();
|
||
|
||
$(function () {
|
||
$(document).on('click', '[data-toggle="create-referral-link"]', function () {
|
||
GetReferralLinkModal.instance.open({
|
||
article_id: $(this).data('article-id')
|
||
});
|
||
|
||
return false;
|
||
});
|
||
});
|
||
</script>
|
||
<div class="modal fade" id="get-referral-link-qrcode-modal">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
<h4 class="modal-title">ÔÎÄÁ´½Ó</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>ÔÎÄÁ´½Ó:</strong>
|
||
<div style="margin:10px 0;word-break:break-all;" class="text-primary link-url"></div>
|
||
<div style="margin:10px 0;color:red;font-weight:bold;">
|
||
<i class="fa fa-info-circle"></i> ÇëÎñ±ØʹÓôËÁ´½Ó×÷ΪÎÄ°¸µÄÔÎÄÁ´½Ó£¬²»ÒªÊ¹ÓÃ΢ÐÅÖе㿪ºóÊÖ¹¤¸´ÖƵÄÁ´½Ó</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="qrcode" style="padding-left:20px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<span style="display:inline-block;margin-right:10px;color:red;vertical-align:middle;" class="copy-success-hint"></span>
|
||
<button type="button" class="btn btn-primary btn-copy-ref-link"><i class="fa fa-copy"></i> ¸´ÖÆÁ´½Ó</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var GetReferralLinkQrcodeModal = function () {
|
||
var self = this;
|
||
var $modal = null;
|
||
var opts = null;
|
||
|
||
this.open = function (options) {
|
||
opts = options;
|
||
|
||
if (!$modal) {
|
||
$modal = $('#get-referral-link-qrcode-modal');
|
||
$modal.on('hidden.bs.modal', function () {
|
||
if (opts.callbacks && opts.callbacks.close) {
|
||
opts.callbacks.close.apply(self, []);
|
||
}
|
||
});
|
||
$modal.on('shown.bs.modal', function () {
|
||
var clipboard = new Clipboard($modal.find('.btn-copy-ref-link')[0], {
|
||
text: function () {
|
||
return opts.url;
|
||
}
|
||
});
|
||
clipboard.on('success', function () {
|
||
var $hint = $modal.find('.copy-success-hint');
|
||
$hint.html('¸´ÖƳɹ¦!').show();
|
||
});
|
||
});
|
||
}
|
||
|
||
$modal.find('.copy-success-hint').hide();
|
||
$modal.find('.link-url').html(opts.url);
|
||
$modal.find('.qrcode').html('<div></div>');
|
||
|
||
new QRCode($modal.find('.qrcode>div')[0], {
|
||
text: opts.url,
|
||
width: 200,
|
||
height: 200,
|
||
colorDark : "#000000",
|
||
colorLight : "#ffffff",
|
||
correctLevel : QRCode.CorrectLevel.H
|
||
});
|
||
|
||
$modal.modal('show');
|
||
};
|
||
|
||
this.close = function () {
|
||
$modal.modal('hide');
|
||
}
|
||
};
|
||
|
||
GetReferralLinkQrcodeModal.instance = new GetReferralLinkQrcodeModal();
|
||
</script>
|
||
<div class="modal fade" id="content-img-modal" tabindex="-1">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
<h4 class="modal-title">ÕýÎÄͼƬ</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<ul class="list-group" data-bind="foreach: items">
|
||
<li class="list-group-item">
|
||
<span style="display:inline-block;margin-top:4px;">
|
||
<span style="font-size:16px;" data-bind="text: name"></span>
|
||
<span data-bind="visible: status() === 'generating'"><i class="fa fa-spin fa-spinner"></i></span>
|
||
|
||
<span class="text-muted" style="display: none;" data-bind="visible: status() === 'generated'">
|
||
(<span data-bind="text: width"></span> x <span data-bind="text: height"></span>)
|
||
</span>
|
||
</span>
|
||
<button type="button" class="btn btn-sm btn-default pull-right" data-bind="visible: status() === 'generated', click: $root.download"><i class="fa fa-download"></i> ÏÂÔØ</button>
|
||
|
||
<div style="color:red;display:none;" data-bind="visible: err_msg, html: err_msg"></div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var ContentImgModal = function () {
|
||
var self = this;
|
||
var $modal = null;
|
||
var model = {
|
||
items: ko.observableArray(),
|
||
download: function (item) {
|
||
var canvas = item.canvas;
|
||
if (!canvas.toBlob && !window.URL.createObjectURL) {
|
||
alert('ä¯ÀÀÆ÷°æ±¾¹ýµÍ, Çë¸üа汾»òʹÓùȸèä¯ÀÀÆ÷');
|
||
return false;
|
||
}
|
||
|
||
canvas.toBlob(function (blob) {
|
||
var link = document.createElement('a');
|
||
link.href = window.URL.createObjectURL(blob);
|
||
link.download = item.name + '.png';
|
||
link.click();
|
||
}, 'image/png');
|
||
}
|
||
};
|
||
|
||
this.open = function () {
|
||
ensureModal();
|
||
$modal.modal('show');
|
||
};
|
||
|
||
this.reset = function () {
|
||
model.items([]);
|
||
};
|
||
|
||
this.addItem = function (item) {
|
||
model.items.push({
|
||
id: item.id,
|
||
name: item.name,
|
||
status: ko.observable('generating'),
|
||
width: ko.observable(),
|
||
height: ko.observable(),
|
||
err_msg: ko.observable(),
|
||
canvas: null
|
||
})
|
||
};
|
||
|
||
this.markCompleted = function (itemId, canvas) {
|
||
var item = _.find(model.items(), function (it) {
|
||
return it.id === itemId;
|
||
});
|
||
|
||
item.status('generated');
|
||
item.canvas = canvas;
|
||
item.width(canvas.width);
|
||
item.height(canvas.height);
|
||
};
|
||
|
||
function ensureModal() {
|
||
if (!$modal) {
|
||
$modal = $('#content-img-modal');
|
||
ko.applyBindings(model, $modal.find('.modal-content')[0]);
|
||
}
|
||
}
|
||
};
|
||
|
||
ContentImgModal.instance = new ContentImgModal();
|
||
</script>
|
||
<script>
|
||
$(function () {
|
||
var editor = new WxArticleEditor({
|
||
ctype: 1,
|
||
novel_id: {$cartoonid},
|
||
is_novel_online: true,
|
||
article_id: {$volumeid},
|
||
next_article_id: {$next_volumeid|default=''},
|
||
category_id: {$category},
|
||
referral_link_id: {empty name="referral_link_id"}null{else /}{$referral_link_id}{/empty},
|
||
title_id: {empty name="title_id"}null{else /}{$title_id}{/empty},
|
||
cover_id: {empty name="cover_id"}null{else /}{$cover_id}{/empty},
|
||
body_template_id: {empty name="body_template_id"}""{else /}{$body_template_id}{/empty},
|
||
footer_template_id: {empty name="footer_template_id"}""{else /}{$footer_template_id}{/empty}
|
||
|
||
});
|
||
|
||
editor.init();
|
||
|
||
$('[data-toggle="copy-text"]').each(function () {
|
||
new Clipboard(this).on('success', function (e) {
|
||
e.clearSelection();
|
||
toastr.success('¸´ÖƳɹ¦');
|
||
});
|
||
});
|
||
|
||
$('[data-toggle="copy-link"]').each(function () {
|
||
var clipboard = new Clipboard(this, {
|
||
text: function () {
|
||
return $('#txt-referral-link').val();
|
||
}
|
||
});
|
||
clipboard.on('success', function (e) {
|
||
e.clearSelection();
|
||
toastr.success('Á´½Ó¸´ÖƳɹ¦');
|
||
});
|
||
});
|
||
|
||
$('[data-toggle="get-link"]').click(function () {
|
||
GetReferralLinkQrcodeModal.instance.open({
|
||
url: $('#txt-referral-link').val()
|
||
});
|
||
return false;
|
||
});
|
||
|
||
$('#btn-create-content-img').click(function () {
|
||
var modal = ContentImgModal.instance;
|
||
modal.reset();
|
||
|
||
var $chapters = editor.$body().find('.chapter');
|
||
|
||
$chapters.each(function (i) {
|
||
modal.addItem({
|
||
id: i + 1,
|
||
name: 'µÚ' + (i + 1) + 'ÕÂ'
|
||
});
|
||
});
|
||
|
||
modal.open();
|
||
|
||
$chapters.each(function (i) {
|
||
editor.drawHTML($(this)).then(function (canvas) {
|
||
modal.markCompleted(i + 1, canvas);
|
||
});
|
||
});
|
||
|
||
return false;
|
||
});
|
||
});
|
||
|
||
var EditorBar = function (options) {
|
||
var self = this;
|
||
var editor = options.editor;
|
||
var model = {
|
||
is_novel_online: ko.observable(options.is_novel_online),
|
||
titles: ko.observableArray(options.titles),
|
||
covers: ko.observableArray(options.covers),
|
||
body_templates: ko.observableArray(options.body_templates),
|
||
footer_templates: ko.observableArray(options.footer_templates),
|
||
|
||
changeTitle: function (title) {
|
||
scrollToElement('#wx-article-title', { offset: 10 }, function () {
|
||
editor.changeTitle(title.id);
|
||
});
|
||
},
|
||
|
||
changeCover: function (cover) {
|
||
scrollToElement('#wx-article-cover', { offset: 10 }, function () {
|
||
editor.changeCover(cover.id);
|
||
});
|
||
},
|
||
|
||
changeBodyTemplate: function (template) {
|
||
scrollToElement('#wx-article-body', { offset: 10 }, function () {
|
||
editor.changeBodyTemplate(template.id);
|
||
});
|
||
},
|
||
|
||
changeFooterTemplate: function (template) {
|
||
scrollToElement('#wx-article-footer', { offset: 10 }, function () {
|
||
editor.changeFooterTemplate(template.id);
|
||
});
|
||
},
|
||
|
||
openReferralLinkModal: function () {
|
||
GetReferralLinkModal.instance
|
||
.open({
|
||
article_id: editor.nextArticleId,
|
||
wx_article_title_id: editor.titleId,
|
||
wx_article_cover_id: editor.coverId,
|
||
wx_article_body_template_id: editor.bodyTemplateId,
|
||
wx_article_footer_template_id: editor.footerTemplateId
|
||
})
|
||
.then(function (link) {
|
||
location.href = '/admin/articles/editor/model_id/7/cartoonid/'+editor.novelId+'/volumeid/'+editor.nextArticleId+'?referral_link_id=' + link.id;
|
||
});
|
||
},
|
||
|
||
editReferralLink: function () {
|
||
GetReferralLinkModal.instance
|
||
.open({
|
||
id: editor.referralLinkId,
|
||
article_id: editor.nextArticleId,
|
||
wx_article_title_id: editor.titleId,
|
||
wx_article_cover_id: editor.coverId,
|
||
wx_article_body_template_id: editor.bodyTemplateId,
|
||
wx_article_footer_template_id: editor.footerTemplateId
|
||
});
|
||
}
|
||
};
|
||
|
||
self.init = function () {
|
||
ko.applyBindings(model, document.getElementById('editor-bar'));
|
||
}
|
||
};
|
||
|
||
var WxArticleEditor = function (options) {
|
||
var self = this;
|
||
var previewArticles = [];
|
||
var covers = [];
|
||
var titles = [];
|
||
var footerTemplates = [];
|
||
var bodyTemplates = [];
|
||
|
||
var $title = $('#wx-article-title');
|
||
var $cover = $('#wx-article-cover');
|
||
var $body = $('#wx-article-body');
|
||
var $footer = $('#wx-article-footer');
|
||
|
||
var editorBar = null;
|
||
|
||
this.titleId = options.title_id;
|
||
|
||
this.coverId = options.cover_id;
|
||
|
||
this.bodyTemplateId = options.body_template_id;
|
||
|
||
this.footerTemplateId = options.footer_template_id;
|
||
|
||
this.referralLinkId = options.referral_link_id;
|
||
|
||
this.novelId = options.novel_id;
|
||
|
||
this.categoryId = options.category_id;
|
||
|
||
this.articleId = options.article_id;
|
||
|
||
this.nextArticleId = options.next_article_id;
|
||
|
||
this.ctype = options.ctype;
|
||
|
||
this.init = function () {
|
||
return $.when(
|
||
loadCovers(),
|
||
loadTitles(),
|
||
loadFooterTemplates(),
|
||
loadBodyTemplates(),
|
||
loadPreviewArticles()
|
||
)
|
||
.then(function () {
|
||
editorBar = new EditorBar({
|
||
editor: self,
|
||
is_novel_online: options.is_novel_online,
|
||
titles: titles,
|
||
covers: covers,
|
||
body_templates: _.map(bodyTemplates, function (it) {
|
||
return { id: it.id, preview_img: it.preview_img };
|
||
}),
|
||
footer_templates: _.map(footerTemplates, function (it) {
|
||
return { id: it.id, preview_img: it.preview_img };
|
||
})
|
||
});
|
||
|
||
editorBar.init();
|
||
|
||
if (self.titleId) {
|
||
self.changeTitle(self.titleId);
|
||
} else {
|
||
renderTitle(_.sample(titles));
|
||
}
|
||
|
||
if (self.coverId) {
|
||
self.changeCover(self.coverId);
|
||
} else {
|
||
renderCover(_.sample(covers));
|
||
}
|
||
|
||
if (self.bodyTemplateId) {
|
||
self.changeBodyTemplate(self.bodyTemplateId);
|
||
} else {
|
||
renderBody(_.sample(bodyTemplates));
|
||
}
|
||
|
||
if (self.footerTemplateId) {
|
||
self.changeFooterTemplate(self.footerTemplateId);
|
||
} else {
|
||
renderFooter(_.sample(footerTemplates));
|
||
}
|
||
});
|
||
};
|
||
|
||
this.$body = function () {
|
||
return $body;
|
||
};
|
||
|
||
this.changeTitle = function (id) {
|
||
var title = _.find(titles, function (it) {
|
||
return it.id == id;
|
||
});
|
||
|
||
renderTitle(title);
|
||
};
|
||
|
||
this.changeCover = function (id) {
|
||
var cover = _.find(covers, function (it) {
|
||
return it.id == id;
|
||
});
|
||
|
||
renderCover(cover);
|
||
};
|
||
|
||
this.changeBodyTemplate = function (id) {
|
||
var template = _.find(bodyTemplates, function (it) {
|
||
return it.id == id;
|
||
});
|
||
|
||
renderBody(template);
|
||
};
|
||
|
||
this.changeFooterTemplate = function (id) {
|
||
var template = _.find(footerTemplates, function (it) {
|
||
return it.id == id;
|
||
});
|
||
|
||
renderFooter(template);
|
||
};
|
||
|
||
this.drawHTML = function ($el) {
|
||
$el.find('img').each(function () {
|
||
var src = $(this).attr('src');
|
||
if (src && src.indexOf('http') === 0) {
|
||
$(this).attr('src', '/backend/wx_article_editor/proxy?url=' + encodeURIComponent(src));
|
||
}
|
||
});
|
||
|
||
var canvas = document.createElement('canvas');
|
||
|
||
var scaleFactor = 2;
|
||
var targetWidth = 320;
|
||
|
||
var html = $el.html();
|
||
|
||
html = '<html>' +
|
||
'<head><style>html, body { padding:0; margin:0; } p { font-size:16px; font-weight:300; line-height:1.7em; font-family: "Microsoft YaHei", sans-serif; }</style></head>' +
|
||
'<body style="background-color:white"><div style="width:' + targetWidth + 'px">' + html + '</div></body></html>';
|
||
|
||
return rasterizeHTML.drawHTML(html, null, {
|
||
zoom: scaleFactor,
|
||
width: parseInt(targetWidth, 10) * scaleFactor
|
||
})
|
||
.then(function (result) {
|
||
|
||
var targetHeight = Math.floor(result.image.height / result.image.width * targetWidth);
|
||
|
||
canvas.style.width = targetWidth + 'px';
|
||
canvas.style.height = targetHeight + 'px';
|
||
|
||
canvas.width = targetWidth * scaleFactor;
|
||
canvas.height = targetHeight * scaleFactor;
|
||
|
||
var ctx = canvas.getContext('2d');
|
||
ctx.fillStyle = 'white';
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
canvas.getContext('2d').drawImage(result.image, 0, 0);
|
||
|
||
return canvas;
|
||
});
|
||
};
|
||
|
||
function renderTitle(title) {
|
||
if (!title) {
|
||
return false;
|
||
}
|
||
|
||
self.titleId = title.id;
|
||
|
||
$title.html(title.title);
|
||
}
|
||
|
||
function renderCover(cover) {
|
||
if (!cover) {
|
||
return false;
|
||
}
|
||
|
||
self.coverId = cover.id;
|
||
|
||
$cover.html('<img style="width:100%;display:block;margin-bottom:20px;" src="' + cover.cover_url + '" />');
|
||
}
|
||
|
||
function renderBody(template) {
|
||
if (!template) {
|
||
return false;
|
||
}
|
||
|
||
self.bodyTemplateId = template.id;
|
||
|
||
if (!template.compiled_template) {
|
||
template.compiled_template = Handlebars.compile(template.template);
|
||
}
|
||
|
||
$body.html(template.compiled_template({ chapters: previewArticles }));
|
||
}
|
||
|
||
function renderFooter(template) {
|
||
if (!template) {
|
||
return false;
|
||
}
|
||
|
||
self.footerTemplateId = template.id;
|
||
|
||
$footer.html(template.template);
|
||
}
|
||
|
||
function loadPreviewArticles() {
|
||
return $.get('/admin/articles/api_get_preview_articles?model_id=25&cartoonid=' + self.novelId+'¤t_article_id=' + self.articleId, function (data) {
|
||
previewArticles = data;
|
||
if (self.ctype === 1) {
|
||
LoadPreviewArticlesImages();
|
||
}
|
||
});
|
||
}
|
||
|
||
function loadCovers() {
|
||
return $.get('/admin/articles/api_get_covers?model_id=25&type=1&cid=' + self.categoryId, function (data) {
|
||
covers = data;
|
||
});
|
||
}
|
||
|
||
function loadTitles() {
|
||
return $.get('/admin/articles/api_get_titles?model_id=25&type=1&cid=' + self.categoryId, function (data) {
|
||
titles = data;
|
||
});
|
||
}
|
||
|
||
function loadFooterTemplates() {
|
||
return $.get('/admin/articles/api_get_footer_templates?model_id=25&ctype=' + self.ctype, function (data) {
|
||
footerTemplates = data;
|
||
});
|
||
}
|
||
|
||
function loadBodyTemplates() {
|
||
return $.get('/admin/articles/api_get_body_templates?model_id=25&ctype=' + self.ctype, function (data) {
|
||
bodyTemplates = data;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* ½«ÎÄÕÂÂþ»ÄÚÈݲð·Ö³ÉimgÊý×é
|
||
*/
|
||
function LoadPreviewArticlesImages() {
|
||
$.each(previewArticles, function (i, item) {
|
||
var praAarray = $.parseJSON(item.content);
|
||
var images = _.map(praAarray, function (img) {
|
||
return '<img src="' + item.image_cdn + '/' + img + '?x-oss-process=image/resize,w_750/format,jpeg/quality,q_70" />';
|
||
});
|
||
item.paragraphs = images;
|
||
});
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|