Skip to content

Commit

Permalink
将preview按钮做成可以随意滑动放置；增加撤销和恢复操作！！！
Browse files Browse the repository at this point in the history
  • Loading branch information
@tywei90
tywei90 committed Nov 27, 2017
1 parent e2c721d commit d98bb8e
Show file tree
Hide file tree
Showing 16 changed files with 265 additions and 79 deletions.
2 changes: 1 addition & 1 deletion public/main.css
View file

Large diffs are not rendered by default.

100 changes: 50 additions & 50 deletions public/main.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/action/unit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const actions = {
editUnit: (id, prop, value) => dispatch({ type: 'EditUnit', id, prop, value }),
removeUnit: (id) => dispatch({ type: 'RemoveUnit', id }),
clear: () => dispatch({ type: 'Clear'}),
insert: (data) => dispatch({ type: 'Insert', data}),
insert: (data, index) => dispatch({ type: 'Insert', data, index}),
moveUnit: (fid, tid) => dispatch({ type: 'MoveUnit', fid, tid }),
};

Expand Down
90 changes: 88 additions & 2 deletions src/components/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import UnitAudio from './units/audio/index'
import UnitCode from './units/code/index'

import Preview from './preview.js'
import $ from 'jquery'

import 'whatwg-fetch'

Expand Down Expand Up @@ -54,7 +55,9 @@ class Content extends React.Component {
this.state = {
errTip: '',
visible: false,
confirmLoading: false
confirmLoading: false,
pageX: null,
pageY: null
}
}
clearSettings(){
Expand Down Expand Up @@ -163,6 +166,81 @@ class Content extends React.Component {
}
})
.catch(e => console.log("Oops, error", e))
}
handleTouchStart(e) {
this.scale = 1.5;
this.$panel = $('#J_preview');
this.$panel.css('transform', `scale(${this.scale})`);
this.$panel.css('-webkit-transform', `scale(${this.scale})`);
this.panelRight = parseInt(this.$panel.css('right'), 10);
this.panelBottom = parseInt(this.$panel.css('bottom'), 10);
this.setState({pageX: e.pageX, pageY: e.pageY});
}
handleTouchMove(e) {
const panelW = parseInt(this.$panel.css('width'), 10);
const panelH = parseInt(this.$panel.css('height'), 10);
const minW = panelW*(this.scale - 1)*0.5;
const maxW = window.innerWidth - panelW*(this.scale + 1)*0.5;
const minH = panelH*(this.scale - 1)*0.5;
const maxH = window.innerHeight - panelH*(this.scale + 1)*0.5;
const {pageX, pageY} = this.state;
e.preventDefault();
e = e.touches[0];
const moveEvent = {
moveX: e.pageX - pageX,
moveY: e.pageY - pageY
};
this.panelRight = this.panelRight - moveEvent.moveX;
this.panelBottom = this.panelBottom - moveEvent.moveY;
// 边界判断
if(this.panelRight <= minW){
this.panelRight = minW;
}
if(this.panelRight >= maxW){
this.panelRight = maxW;
}
if(this.panelBottom <= minH){
this.panelBottom = minH;
}
if(this.panelBottom >= maxH){
this.panelBottom = maxH;
}
this.$panel.css('right', this.panelRight);
this.$panel.css('bottom', this.panelBottom);
this.setState({pageX: e.pageX, pageY: e.pageY});
}
handleTouchEnd(e) {
e.preventDefault();
this.$panel.css('transform', 'scale(1)');
this.$panel.css('-webkit-transform', 'scale(1)');
}
goPrev(e){
if(!this.$prev.hasClass('active')) return
let configs = JSON.parse(sessionStorage.getItem('configs'));
let index = parseInt(sessionStorage.getItem('index'));
unitAction.insert(JSON.parse(configs[index - 1]), -1);
}
goNext(e){
if(!this.$next.hasClass('active')) return
let configs = JSON.parse(sessionStorage.getItem('configs'));
let index = parseInt(sessionStorage.getItem('index'));
unitAction.insert(JSON.parse(configs[index + 1]), 1);
}
componentWillUpdate(){
this.$prev = $('.J_prev');
this.$next = $('.J_next');
let configs = JSON.parse(sessionStorage.getItem('configs'));
let index = parseInt(sessionStorage.getItem('index'));
if(index > 0){
this.$prev.addClass('active');
}else{
this.$prev.removeClass('active');
}
if(index < configs.length - 1){
this.$next.addClass('active');
}else{
this.$next.removeClass('active');
}
}
render() {
const { unit } = this.props;
Expand All @@ -181,6 +259,13 @@ class Content extends React.Component {
// }
return (
<section className="m-content f-fl">
<em id="J_preview"
onTouchStart={(e) => this.handleTouchStart(e.touches[0])}
onTouchMove={(e) => this.handleTouchMove(e)}
onTouchEnd={(e) => this.handleTouchEnd(e)}
>
<i className="icon iconfont icon-yulan"></i>
</em>
<Modal title="导入配置"
wrapClassName="upload-dialog"
visible={visible}
Expand Down Expand Up @@ -212,7 +297,8 @@ class Content extends React.Component {
<span className="J_insert" onClick={() => this.setState({visible: true})}>导入</span>|
<span className="J_output" onClick={this.download}>导出</span>|
<span className="J_clear" onClick={this.clearSettings}>清空</span>)
<em id="J_preview">预览<i className="icon iconfont icon-yulan"></i></em>
<i className="icon iconfont icon-iconfonthoutui J_prev" onClick={this.goPrev.bind(this)}></i>
<i className="icon iconfont icon-iconfontqianjin J_next" onClick={this.goNext.bind(this)}></i>
</div>
<ul id="unitMain">
{renderUnits(unit)}
Expand Down
25 changes: 15 additions & 10 deletions src/components/content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
.ant-upload-list{
display: none;
}
#J_preview{
display: none;
}
>div{
background-color: #dff0d8;
padding: 10px 15px;
Expand All @@ -23,17 +26,19 @@
font-size: 14px;
cursor: pointer;
}
em{
display: none;
color: #337ab7;
font-size: 14px;
i{
color: #9e9e9e;
font-size: 20px;
padding: 0 5px;
position: absolute;
right: 15px;
i{
vertical-align: middle;
margin-left: 1px;
font-size: 20px;
}
right: 50px;
top: 6px;
}
i.active{
color: #337ab7;
}
.icon-iconfontqianjin{
right: 10px;
}
}
>ul>li{
Expand Down
37 changes: 30 additions & 7 deletions src/components/mediaQuery.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,19 @@
padding: 0 10px;
}
.goHome {
font-size: 20px;
padding: 0 10px;
margin-left: 50px;
}
.links {
display: none;
position: absolute;
top: 0;
left: 50%;
margin-left: -80px;
padding-left: 0;
font-size: 16px;
i{
font-size: 20px;
}
}
.user {
line-height: 44px;
font-size: 12px;
padding-right: 20px;
a:hover {
color: inherit;
Expand Down Expand Up @@ -84,7 +89,25 @@
width: 100%;
margin: 0;
#J_preview {
display: inline-block;
user-select: none;
transition: transform 0.4s;
-webkit-transition: -webkit-transform 0.4s;
touch-action: none;
z-index: 10;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #ffdfb4;
bottom: 80px;
right: 35px;
border-radius: 50%;
i{
color: #337ab7;
font-size: 20px;
}
}
}
@keyframes zoomInDown {
Expand Down
12 changes: 12 additions & 0 deletions src/fonts/demo_fontclass.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,18 @@ <h1>IconFont 图标</h1>
<div class="fontclass">.icon-shanchu</div>
</li>

<li>
<i class="icon iconfont icon-iconfonthoutui"></i>
<div class="name">撤销</div>
<div class="fontclass">.icon-iconfonthoutui</div>
</li>

<li>
<i class="icon iconfont icon-iconfontqianjin"></i>
<div class="name">恢复</div>
<div class="fontclass">.icon-iconfontqianjin</div>
</li>

<li>
<i class="icon iconfont icon-tupian"></i>
<div class="name">图片</div>
Expand Down
16 changes: 16 additions & 0 deletions src/fonts/demo_symbol.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,22 @@ <h1>IconFont 图标</h1>
<div class="fontclass">#icon-shanchu</div>
</li>

<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-iconfonthoutui"></use>
</svg>
<div class="name">撤销</div>
<div class="fontclass">#icon-iconfonthoutui</div>
</li>

<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-iconfontqianjin"></use>
</svg>
<div class="name">恢复</div>
<div class="fontclass">#icon-iconfontqianjin</div>
</li>

<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tupian"></use>
Expand Down
12 changes: 12 additions & 0 deletions src/fonts/demo_unicode.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,18 @@ <h1>IconFont 图标</h1>
<div class="code">&amp;#xe602;</div>
</li>

<li>
<i class="icon iconfont">&#xe605;</i>
<div class="name">撤销</div>
<div class="code">&amp;#xe605;</div>
</li>

<li>
<i class="icon iconfont">&#xe60e;</i>
<div class="name">恢复</div>
<div class="code">&amp;#xe60e;</div>
</li>

<li>
<i class="icon iconfont">&#xe6ee;</i>
<div class="name">图片</div>
Expand Down
Loading

0 comments on commit d98bb8e

Please sign in to comment.