Skip to content

Commit

Permalink
2.3.8 Fix to prevent iOS delay clicking bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@caiobiodere
caiobiodere committed Apr 1, 2019
1 parent 198b88d commit 4059b28
Show file tree
Hide file tree
Showing 12 changed files with 182 additions and 86 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "cordova-template-framework7-vue-webpack",
"version": "2.3.7",
"version": "2.3.8",
"description": "Cordova template with framework7, vue 2 and webpack 2.",
"main": "index.js",
"scripts": {
Expand Down
21 changes: 11 additions & 10 deletions template_src/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"cheerio": "^1.0.0-rc.2",
"chokidar": "^2.0.4",
"chokidar": "^2.1.5",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^2.1.0",
"css-loader": "^2.1.1",
"current-device": "^0.8.0",
"epipebomb": "^1.0.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
Expand All @@ -30,27 +30,28 @@
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-url-loader": "^2.0.2",
"uglify-js": "^3.2.0",
"uglify-js": "^3.5.3",
"uglifyjs-webpack-plugin": "^2.0.1",
"url-loader": "^1.1.2",
"vue-hot-reload-api": "^2.0.11",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.2.4",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.1.9",
"webpack-merge": "^4.2.1"
},
"dependencies": {
"font-awesome": "^4.7.0",
"framework7": "^4.0.6",
"framework7-icons": "^2.1.1",
"framework7-vue": "^4.0.6",
"framework7": "^4.2.0",
"framework7-icons": "^2.3.0",
"framework7-vue": "^4.2.0",
"loglevel": "^1.4.1",
"material-design-icons": "^3.0.1",
"vue": "^2.5.17",
"vuex": "^3.1.0"
"vue": "^2.6.10",
"vuex": "^3.1.0",
"fastclick": "^1.0.6"
}
}
14 changes: 11 additions & 3 deletions template_src/src/assets/vue/pages/about.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<f7-page>
<f7-navbar title="About F7" back-link="Back" sliding></f7-navbar>
<f7-navbar large title="About" title-large="About" back-link="Framework7"></f7-navbar>
<f7-block-title>Welcome to Framework7</f7-block-title>
<f7-block strong>
<p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to. Framework7 is created by Vladimir Kharlampidi (iDangero.us).</p>
Expand All @@ -11,6 +11,14 @@
</f7-page>
</template>
<script>
export default {
import { f7Page, f7Navbar, f7BlockTitle, f7Block } from 'framework7-vue';
export default {
components: {
f7Page,
f7Navbar,
f7BlockTitle,
f7Block,
},
};
</script>
</script>
136 changes: 76 additions & 60 deletions template_src/src/assets/vue/pages/chat.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,22 @@
<f7-messagebar
:placeholder="placeholder"
ref="messagebar"
:attachmentsVisible="attachmentsVisible"
:sheetVisible="sheetVisible"
:attachments-visible="attachmentsVisible"
:sheet-visible="sheetVisible"
:value="messageText"
@input="messageText = $event.target.value"
>
<f7-link
icon-if-ios="f7:camera_fill"
icon-if-md="f7:camera_alt"
icon-ios="f7:camera_fill"
icon-aurora="f7:camera_fill"
icon-md="material:camera_alt"
slot="inner-start"
@click="sheetToggle"
@click="sheetVisible = !sheetVisible"
></f7-link>
<f7-link
icon-if-ios="f7:arrow_up_fill"
icon-if-md="material:send"
icon-ios="f7:arrow_up_round_fill"
icon-aurora="f7:arrow_up_round_fill"
icon-md="material:send"
slot="inner-end"
@click="sendMessage"
></f7-link>
Expand Down Expand Up @@ -45,23 +49,50 @@
v-for="(message, index) in messagesData"
:key="index"
:type="message.type"
:text="message.text"
:image="message.image"
:name="message.name"
:avatar="message.avatar"
:first="isFirstMessage(message, index)"
:last="isLastMessage(message, index)"
:tail="isTailMessage(message, index)"
>
<span slot="text" v-if="message.text" v-html="message.text"></span>
</f7-message>
<f7-message v-if="typingMessage"
type="received"
:typing="true"
:first="true"
:last="true"
:tail="true"
:header="`${typingMessage.name} is typing`"
:avatar="typingMessage.avatar"
></f7-message>
</f7-messages>
</f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7Messages, f7MessagesTitle, f7Message, f7Messagebar, f7Link, f7MessagebarAttachments, f7MessagebarAttachment, f7MessagebarSheet, f7MessagebarSheetImage } from 'framework7-vue';
export default {
components: {
f7Navbar,
f7Page,
f7Messages,
f7MessagesTitle,
f7Message,
f7Messagebar,
f7MessagebarAttachments,
f7MessagebarAttachment,
f7MessagebarSheet,
f7MessagebarSheetImage,
f7Link,
},
data() {
return {
attachments: [],
sheetVisible: false,
typingMessage: null,
messageText: '',
messagesData: [
{
type: 'sent',
Expand All @@ -75,13 +106,13 @@
name: 'Kate',
type: 'received',
text: 'Hi, I am good!',
avatar: 'http://lorempixel.com/100/100/people/9',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
},
{
name: 'Blue Ninja',
type: 'received',
text: 'Hi there, I am also fine, thanks! And how are you?',
avatar: 'http://lorempixel.com/100/100/people/7',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
},
{
type: 'sent',
Expand All @@ -93,48 +124,48 @@
},
{
type: 'sent',
image: 'http://lorempixel.com/200/260/cats/4/',
image: 'https://cdn.framework7.io/placeholder/cats-200x260-4.jpg',
},
{
name: 'Kate',
type: 'received',
text: 'Nice!',
avatar: 'http://lorempixel.com/100/100/people/9',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
},
{
name: 'Kate',
type: 'received',
text: 'Like it very much!',
avatar: 'http://lorempixel.com/100/100/people/9',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
},
{
name: 'Blue Ninja',
type: 'received',
text: 'Awesome!',
avatar: 'http://lorempixel.com/100/100/people/7',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
},
],
images: [
'http://lorempixel.com/300/300/cats/1/',
'http://lorempixel.com/200/300/cats/2/',
'http://lorempixel.com/400/300/cats/3/',
'http://lorempixel.com/300/150/cats/4/',
'http://lorempixel.com/150/300/cats/5/',
'http://lorempixel.com/300/300/cats/6/',
'http://lorempixel.com/300/300/cats/7/',
'http://lorempixel.com/200/300/cats/8/',
'http://lorempixel.com/400/300/cats/9/',
'http://lorempixel.com/300/150/cats/10/',
'https://cdn.framework7.io/placeholder/cats-300x300-1.jpg',
'https://cdn.framework7.io/placeholder/cats-200x300-2.jpg',
'https://cdn.framework7.io/placeholder/cats-400x300-3.jpg',
'https://cdn.framework7.io/placeholder/cats-300x150-4.jpg',
'https://cdn.framework7.io/placeholder/cats-150x300-5.jpg',
'https://cdn.framework7.io/placeholder/cats-300x300-6.jpg',
'https://cdn.framework7.io/placeholder/cats-300x300-7.jpg',
'https://cdn.framework7.io/placeholder/cats-200x300-8.jpg',
'https://cdn.framework7.io/placeholder/cats-400x300-9.jpg',
'https://cdn.framework7.io/placeholder/cats-300x150-10.jpg',
],
people: [
{
name: 'Kate Johnson',
avatar: 'http://lorempixel.com/100/100/people/9',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
},
{
name: 'Blue Ninja',
avatar: 'http://lorempixel.com/100/100/people/7',
avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
},
],
answers: [
Expand All @@ -154,21 +185,6 @@
responseInProgress: false,
};
},
// Resize page when attachments or sheet become visible
watch: {
attachmentsVisible() {
const self = this;
self.$nextTick(() => {
self.messagebar.resizePage();
});
},
sheetVisible() {
const self = this;
self.$nextTick(() => {
self.messagebar.resizePage();
});
},
},
computed: {
attachmentsVisible() {
const self = this;
Expand All @@ -179,6 +195,13 @@
return self.attachments.length > 0 ? 'Add comment or Send' : 'Message';
},
},
mounted() {
const self = this;
self.$f7ready(() => {
self.messagebar = self.$refs.messagebar.f7Messagebar;
self.messages = self.$refs.messages.f7Messages;
});
},
methods: {
isFirstMessage(message, index) {
const self = this;
Expand All @@ -201,10 +224,6 @@
if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
return false;
},
sheetToggle() {
const self = this;
self.sheetVisible = !self.sheetVisible;
},
deleteAttachment(image) {
const self = this;
const index = self.attachments.indexOf(image);
Expand All @@ -224,24 +243,28 @@
},
sendMessage() {
const self = this;
const text = self.messagebar.getValue().replace(/\n/g, '<br>').trim();
const text = self.messageText.replace(/\n/g, '<br>').trim();
const messagesToSend = [];
self.attachments.forEach((attachment) => {
messagesToSend.push({
image: attachment,
});
});
if (text.trim().length) {
if (text.length) {
messagesToSend.push({
text,
});
}
if (messagesToSend.length === 0) {
return;
}
// Reset attachments
self.attachments = [];
// Hide sheet
self.sheetVisible = false;
// Clear area
self.messagebar.clear();
self.messageText = '';
// Focus area
if (text.length) self.messagebar.focus();
// Send message
Expand All @@ -253,29 +276,22 @@
setTimeout(() => {
const answer = self.answers[Math.floor(Math.random() * self.answers.length)];
const person = self.people[Math.floor(Math.random() * self.people.length)];
self.messages.showTyping({
header: `${person.name} is typing`,
self.typingMessage = {
name: person.name,
avatar: person.avatar,
});
};
setTimeout(() => {
self.messagesData.push({
text: answer,
type: 'received',
name: person.name,
avatar: person.avatar,
});
self.messages.hideTyping();
self.typingMessage = null;
self.responseInProgress = false;
}, 4000);
}, 1000);
}
},
},
mounted() {
this.$f7ready((f7) => {
const self = this;
self.messagebar = self.$refs.messagebar.f7Messagebar;
self.messages = self.$refs.messages.f7Messages;
})
}
};
</script>
10 changes: 10 additions & 0 deletions template_src/src/assets/vue/pages/color-themes.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,17 @@
</f7-page>
</template>
<script>
import { f7Page, f7Block, f7BlockTitle, f7Navbar, f7Row, f7Col, f7Button } from "framework7-vue";
export default {
components: {
f7Page,
f7Block,
f7BlockTitle,
f7Navbar,
f7Row,
f7Col,
f7Button
},
data() {
const colors = [
'red',
Expand Down
10 changes: 9 additions & 1 deletion template_src/src/assets/vue/pages/dynamic-route.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,13 @@
</template>

<script>
export default {}
import { f7Page, f7Navbar, f7Block, f7Link } from "framework7-vue";
export default {
components: {
f7Page,
f7Navbar,
f7Block,
f7Link
}
}
</script>
Loading

0 comments on commit 4059b28

Please sign in to comment.