Skip to content

Commit

Permalink
完善文本输入功能
Browse files Browse the repository at this point in the history
  • Loading branch information
wangjin committed Oct 11, 2016
1 parent 0d4fe73 commit 8913ae8
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 32 deletions.
146 changes: 117 additions & 29 deletions pages/new/new.js
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,44 @@
// new.js
// TODO 并不是所有非中文字符宽度都为中文字符宽度一半，需特殊处理
// TODO 由于文本框聚焦存在bug，故编辑模式待实现

const input = require('../../utils/input.js');
const config = require('../../config.js');
const geo = require('../../services/geo.js');

const RESOLUTION = 750; // 微信规定屏幕宽度为750rpx
const MARGIN = 10; // 写字面板左右margin
const ROW_CHARS = Math.floor((RESOLUTION - 2 * MARGIN) / config.input.charWidth);
const MAX_CHAR = 1000; // 最多输1000字符

const TEXT = 'TEXT';

Page({

data: {
// 日记对象
diary: {},
diary: {
meta: {},
list: [],
},

// 页面所处模式
showMode: 'common',

// 输入框状态对象
input: {
inputStatus: {
row: 0,
column: 0,
lines: [''],
mode: 'INPUT',
auto: false, // 是否有自动换行
},

// 待传至模板对象
data: null,

// 当前位置信息
poi: null,
},

// 页面初始化
Expand All @@ -35,8 +47,9 @@ Page({
let title = options.title;
if (title) {this.setData({'diary.title': title});}
}

this.setData({data: this.data.diary});

this.getPoi();
},

// 页面渲染完成
Expand All @@ -58,12 +71,31 @@ Page({

// 清除正在输入文本
clearInput() {
this.setData({input: {row: 0, common: 0, lines: ['']}});
this.setData({inputStatus: {
row: 0,
common: 0,
lines: [''],
mode: 'INPUT',
auto: false,
}});
},

// 结束文本输入
inputDone() {
let text = this.data.inputStatus.lines.join('\n');
let diary = this.data.diary;

if (text) {
diary.list.push(this.makeContent(TEXT, text, ''));
this.setData({diary: diary});
}

this.inputCancel();
},

// 进入文本编辑模式
inputTouch(event) {
this.setData({showMode: 'inputText', data: this.data.input});
this.setData({showMode: 'inputText', data: this.data.inputStatus});
},

// 取消文本编辑
Expand All @@ -74,41 +106,97 @@ Page({

// 文本输入
textInput(event) {
console.log(event);
let context = event.detail;
let [lines, row] = [this.data.input.lines, this.data.input.row];

if (context.value.length != context.cursor) {
console.log('用户输入中...');
} else {
let len = input.strlen(context.value);
console.log('当前文本长度: ' + len);

// 当前输入长度超过规定长度
if (len >= ROW_CHARS) {
// 输入模式
if (this.data.inputStatus.mode === 'INPUT') {
if (context.value.length != context.cursor) {
console.log('用户输入中...');
} else {
let text = context.value;
let len = input.strlen(text);
let lines = this.data.inputStatus.lines;
let row = this.data.inputStatus.row;
let [extra, extra_index] = [[['']], 0];

// TODO 此处方案不完善
while (input.strlen(text) > ROW_CHARS) {
let last = text[text.length - 1];

if (input.strlen(extra[extra_index] + last) > ROW_CHARS) {
extra_index += 1;
extra[extra_index] = [''];
console.log('当前文本长度: ' + len);

// 当前输入长度超过规定长度
if (len >= ROW_CHARS) {
// TODO 此处方案不完善
while (input.strlen(text) > ROW_CHARS) {
let last = text[text.length - 1];

if (input.strlen(extra[extra_index] + last) > ROW_CHARS) {
extra_index += 1;
extra[extra_index] = [''];
}
extra[extra_index].unshift(last);
text = text.slice(0, -1);
}
extra[extra_index].unshift(last);
text = text.slice(0, -1);
}
}

lines[lines.length - 1] = text;
lines[lines.length - 1] = text;
if (extra_index) {
extra.reverse().forEach((element, index, array) => {
lines.push(element.join(''));
row += 1;
})
});
}

let inputStatus = {
lines: lines,
row: row,
mode: 'INPUT',
auto: true, // // 自动换行的则处于输入模式
};

this.setData({inputStatus, data: inputStatus});
}
}
},

this.setData({'input.lines': lines, 'input.row': row});
this.setData({data: this.data.input});
// 文本框获取到焦点
focusInput(event) {
let isInitialInput = this.data.inputStatus.row == 0 && this.data.inputStatus.lines[0] == 0;
let isAutoInput = this.data.inputStatus.mode == 'INPUT' && this.data.inputStatus.auto == true;
let mode = 'EDIT';

if (isInitialInput || isAutoInput) {
mode = 'INPUT';
}

this.setData({'inputStatus.mode': mode});
},

// 获得当前位置信息
getPoi() {
var that = this;
wx.getLocation({
type: 'gcj02',
success: function(res) {
geo.mapRequest(
'geocoder',
{'location': geo.formatLocation(res)},
loc => {
let poi = {
'latitude': res.latitude,
'longitude': res.longitude,
'name': loc.result.address,
};
that.setData({poi: poi});
})
}
})
},

// 构造日记内容对象
makeContent(type, content, description) {
return {
type: type,
content: content,
description: description,
poi: this.data.poi,
}
}
})
4 changes: 2 additions & 2 deletions pages/new/new.wxml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@
<template name="inputText">
<view class="input-container">
<view style="height:47rpx" wx:for="{{data.lines}}" wx:for-index="idx">
<input type="text" id="input-{{idx}}" placeholder="" bindinput="textInput" bindchange="textInputChange" value="{{item}}" auto-focus="{{idx == data.row ? true : false}}" />
<input type="text" data-index="{{idx}}" placeholder="" bindinput="textInput" bindchange="textInputChange" value="{{item}}" auto-focus="{{idx == data.row ? true : false}}" bindfocus="focusInput"/>
</view>
</view>
<view class="tabbar">
<view class="item" style="width:50%" bindtap="inputCancel">
<image class="icon" mode="aspectFit" src="../../images/tabbar/cancel.png"></image>
</view>
<view class="item" style="width:50%">
<view class="item" style="width:50%" bindtap="inputDone">
<image class="icon" mode="aspectFit" src="../../images/tabbar/ok.png"></image>
</view>
</view>
Expand Down
2 changes: 1 addition & 1 deletion services/geo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,6 @@ module.exports = {

// 格式化地理位置
formatLocation(loc) {
return [loc.longitude, loc.latitude].map(toString).join(',');
return [loc.latitude, loc.longitude].map(f => f.toString()).join(',');
},
}

0 comments on commit 8913ae8

Please sign in to comment.