www.gusucode.com > Flarum PHP论坛 中文版 v0.1 beta7源码程序 > FlarumChina-master/vendor/davis/flarum-ext-socialprofile/js/forum/src/components/SocialButtonsModal.js
import Modal from 'flarum/components/Modal'; import Button from 'flarum/components/Button'; import WebsiteInputComponent from 'Davis/SocialProfile/components/WebsiteInputComponent'; export default class SocialButtonsModal extends Modal { init() { super.init(); this.buttons = []; const buttons = JSON.parse(this.props.user.data.attributes.socialButtons || '[]'); if (buttons.length) { buttons.forEach((button, index) => { if (button.title !== '') { this.createButtonObject(index, button); } }); } else { this.createButtonObject(0); } } className() { return 'SocialButtonsModal Modal--small'; } title() { return app.translator.trans('davis-socialprofile.forum.edit.headtitle'); } content() { $('.Modal-content').css('overflow', 'visible'); return [ m('div', { className: 'Modal-body' }, [ m('div', { className: 'Form' }, [ this.buttons.map(button => WebsiteInputComponent.component({ button })), m('div', { className: 'Form-group', id: 'submit-button-group' }, [ m('div', { className: 'Button Button--primary EditSocialButtons-add', style: 'margin-left: 1%;', onclick: () => { this.createButtonObject(this.buttons.length); m.redraw(); $('document').ready(() => { $(`#socialgroup-${this.buttons.length - 1}`).slideDown(); }); }, }, [ m('i', { className: 'fa fa-fw fa-plus' }), ]), m('div', { className: 'Button Button--primary EditSocialButtons-del', style: 'margin-left: 1%;', onclick: () => { const curdel = (this.buttons.length - 1); $(`#socialgroup-${curdel}`).slideUp('normal', () => { this.buttons.splice(curdel, 1); m.redraw(); }); }, }, [ m('i', { className: 'fa fa-fw fa-minus' }), ]), Button.component({ type: 'submit', style: 'float: right;', className: 'Button Button--primary EditSocialButtons-save', loading: this.loading, children: app.translator.trans('davis-socialprofile.forum.edit.submit'), }), ]), ]), ]), ]; } data() { const buttons = []; this.buttons.forEach((button, index) => { if (button.title() !== '') { buttons[index] = {}; buttons[index].title = button.title(); buttons[index].url = button.url(); buttons[index].icon = button.icon(); buttons[index].favicon = button.favicon(); } }); return { socialButtons: JSON.stringify(buttons), }; } onsubmit(e) { e.preventDefault(); this.loading = true; this.props.user.save(this.data(), { errorHandler: this.onerror.bind(this) }) .then(this.hide.bind(this)) .then($('#app').trigger('refreshSocialButtons', [this.data().socialButtons])) .catch(() => { this.loading = false; m.redraw(); }); } createButtonObject(key, button = null) { if (button == null) { this.buttons[key] = {}; this.buttons[key].index = m.prop(key); this.buttons[key].favicon = m.prop('none'); this.buttons[key].title = m.prop(''); this.buttons[key].url = m.prop(''); this.buttons[key].icon = m.prop('globe'); } else { this.buttons[key] = {}; this.buttons[key].index = m.prop(key); this.buttons[key].favicon = m.prop(button.favicon); this.buttons[key].title = m.prop(button.title); this.buttons[key].url = m.prop(button.url); this.buttons[key].icon = m.prop(button.icon); } } }