Skip to content

Commit

Permalink
Work for #12 - Vendor file big and take long time to load
Browse files Browse the repository at this point in the history
  • Loading branch information
T_S_V committed Mar 29, 2020
1 parent 52a2538 commit 790f6de
Show file tree
Hide file tree
Showing 11 changed files with 654 additions and 196 deletions.
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>surveyjs_vue_quickstart</title>
<title>SurveyJS + VueJS</title>
<script src="https://unpkg.com/jquery"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link
Expand Down
7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,12 @@
"bootstrap": "^3.3.7",
"ckeditor": "^4.11.4",
"jquery": "^3.1.1",
"survey-vue": "^1.5.17",
"survey-pdf": "^1.5.17",
"survey-creator": "^1.5.17",
"survey-pdf": "^1.5.17",
"survey-vue": "^1.5.17",
"surveyjs-widgets": "^1.5.17",
"vue": "^2.2.2"
"vue": "^2.2.2",
"vue-router": "^3.1.6"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
Expand Down
244 changes: 65 additions & 179 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,195 +1,81 @@
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- If you want to hide survey, comment the lines below -->
<h2>Survey Library:</h2>
<survey :survey="survey"></survey>
<!-- If you want to hide Survey PDF, comment the lines below -->
<h2>Survey PDF:</h2>
<button v-on:click="savePDF">Save PDF</button>
<!-- If you want to hide Survey Creator, comment the lines below -->
<h2>Survey Creator:</h2>
<survey-creator></survey-creator>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">SurveyJS + VueJS</a>
</div>
<ul class="nav navbar-nav">
<li>
<router-link to="/">Home</router-link>
</li>
<li>
<router-link to="/survey">Survey</router-link>
</li>
<li>
<router-link to="/creator">SurveyJS Creator</router-link>
</li>
<li>
<router-link to="/exportpdf">PDF Export</router-link>
</li>
<!-- <li>
<router-link to="/bar/baz">/bar/baz</router-link>
</li>
<li>
<router-link to="/a/b/c">/a/b/c</router-link>
</li>-->
</ul>
</div>
</nav>
<router-view class="view"></router-view>
</div>
</template>

<script>
import SurveyCreator from "./components/SurveyCreator";
import * as SurveyVue from "survey-vue";
import * as SurveyPDF from "survey-pdf";
import * as SurveyKo from "survey-knockout";
import "bootstrap/dist/css/bootstrap.css";
var Survey = SurveyVue.Survey;
Survey.cssType = "bootstrap";
import Vue from "vue";
import VueRouter from "vue-router";
import * as widgets from "surveyjs-widgets";
import "inputmask/dist/inputmask/phone-codes/phone.js";
import "bootstrap/dist/css/bootstrap.css";
import { init as customWidget } from "./customwidget";
Vue.use(VueRouter);
widgets.icheck(SurveyVue);
widgets.select2(SurveyVue);
widgets.inputmask(SurveyVue);
widgets.jquerybarrating(SurveyVue);
widgets.jqueryuidatepicker(SurveyVue);
widgets.nouislider(SurveyVue);
widgets.select2tagbox(SurveyVue);
widgets.signaturepad(SurveyVue);
widgets.sortablejs(SurveyVue);
widgets.ckeditor(SurveyVue);
widgets.autocomplete(SurveyVue);
widgets.bootstrapslider(SurveyVue);
customWidget(SurveyVue);
const Home = () => import("./views/Home.vue");
const Survey = () =>
import(/* webpackChunkName: "survey" */ "./views/Survey.vue");
const Creator = () =>
import(/* webpackChunkName: "creator" */ "./views/Creator.vue");
const ExportToPDF = () =>
import(/* webpackChunkName: "creator" */ "./views/ExportToPDF.vue");
SurveyVue.Serializer.addProperty("question", "tag:number");
SurveyKo.Serializer.addProperty("question", "tag:number");
const router = new VueRouter({
mode: "history",
base: __dirname,
routes: [
{ path: "/", component: Home },
// Just use them normally in the route config
{ path: "/survey", component: Survey },
// multiple parameters, `/` should not be encoded. The name is also important
// https://github.com/vuejs/vue-router/issues/2719
// { path: '/a/:tags*', name: 'tagged', component: () => new Promise(resolve => {
// setTimeout(() => {
// resolve({
// template: `<div>
// <h2>Lazy with params</h2>
// <pre id="tagged-path">{{ $route.path }}</pre>
// </div>`
// })
// }, 200)
// }) },
// Bar and Baz belong to the same root route
// and grouped in the same async chunk.
{ path: "/creator", component: Creator },
{ path: "/exportpdf", component: ExportToPDF }
]
});
export default {
name: "app",
components: {
Survey,
SurveyCreator
},
data() {
var json = {
title: "Product Feedback Survey Example",
showProgressBar: "top",
pages: [
{
questions: [
{
type: "matrix",
name: "Quality",
title:
"Please indicate if you agree or disagree with the following statements",
columns: [
{
value: 1,
text: "Strongly Disagree"
},
{
value: 2,
text: "Disagree"
},
{
value: 3,
text: "Neutral"
},
{
value: 4,
text: "Agree"
},
{
value: 5,
text: "Strongly Agree"
}
],
rows: [
{
value: "affordable",
text: "Product is affordable"
},
{
value: "does what it claims",
text: "Product does what it claims"
},
{
value: "better then others",
text: "Product is better than other products on the market"
},
{
value: "easy to use",
text: "Product is easy to use"
}
]
},
{
type: "rating",
name: "satisfaction",
title: "How satisfied are you with the Product?",
mininumRateDescription: "Not Satisfied",
maximumRateDescription: "Completely satisfied"
},
{
type: "rating",
name: "recommend friends",
visibleIf: "{satisfaction} > 3",
title:
"How likely are you to recommend the Product to a friend or co-worker?",
mininumRateDescription: "Will not recommend",
maximumRateDescription: "I will recommend"
},
{
type: "comment",
name: "suggestions",
title: "What would make you more satisfied with the Product?"
}
]
},
{
questions: [
{
type: "radiogroup",
name: "price to competitors",
title: "Compared to our competitors, do you feel the Product is",
choices: [
"Less expensive",
"Priced about the same",
"More expensive",
"Not sure"
]
},
{
type: "radiogroup",
name: "price",
title: "Do you feel our current price is merited by our product?",
choices: [
"correct|Yes, the price is about right",
"low|No, the price is too low for your product",
"high|No, the price is too high for your product"
]
},
{
type: "multipletext",
name: "pricelimit",
title: "What is the... ",
items: [
{
name: "mostamount",
title:
"Most amount you would every pay for a product like ours"
},
{
name: "leastamount",
title: "The least amount you would feel comfortable paying"
}
]
}
]
},
{
questions: [
{
type: "text",
name: "email",
title:
'Thank you for taking our survey. Please enter your email address, then press the "Submit" button.'
}
]
}
]
};
var model = new SurveyVue.Model(json);
var savePDF = function() {
var surveyPDF = new SurveyPDF.SurveyPDF(json);
surveyPDF.data = model.data;
surveyPDF.save();
};
return {
survey: model,
savePDF: savePDF
};
}
router: router
};
</script>

Expand Down
4 changes: 3 additions & 1 deletion src/components/SurveyCreator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import "survey-creator/survey-creator.css";
import * as SurveyKo from "survey-knockout";
import * as widgets from "surveyjs-widgets";
import { init as customWidget } from "../customwidget";
import { init as customWidget } from "../components/customwidget";
import "inputmask/dist/inputmask/phone-codes/phone.js";
Expand All @@ -26,6 +26,8 @@ widgets.autocomplete(SurveyKo);
widgets.bootstrapslider(SurveyKo);
customWidget(SurveyKo);
SurveyKo.Serializer.addProperty("question", "tag:number");
var CkEditor_ModalEditor = {
afterRender: function(modalEditor, htmlElement) {
var editor = window["CKEDITOR"].replace(htmlElement);
Expand Down
0 src/customwidget.js → src/components/customwidget.js
View file
File renamed without changes.
Loading

0 comments on commit 790f6de

Please sign in to comment.