Skip to content

Commit 32141dc

Browse files
superlloydsuperlloyd
committed
made code nicer
1 parent 796e878 commit 32141dc

File tree

8 files changed

+182
-177
lines changed

8 files changed

+182
-177
lines changed

‎TestApp/Sample.Chosen.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ <h2>Live Example</h2>
6464
<script type="text/javascript">var htmlSample = $('.liveExample').html();</script>
6565
<source-view title="Source code: view" selector=".liveExample"></source-view>
6666
<source-view title="Source code: view model" url="ScriptsLocal/Sample.Chosen.ts"></source-view>
67+
<source-view title="Source code: Chosen component" url="ScriptsLocal/components/VueChosen.ts"></source-view>
6768
</div>
6869

6970
</article>
@@ -79,6 +80,7 @@ <h2>Live Example</h2>
7980
<script src="ScriptsLocal/components/SourceView.js"></script>
8081

8182
<!-- PAGE SCRIPT HERE -->
83+
<script src="ScriptsLocal/components/VueChosen.js"></script>
8284
<script src="ScriptsLocal/Sample.Chosen.js"></script>
8385
</body>
8486
</html>

‎TestApp/Sample.MapControl.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ <h2>Live Example</h2>
5252
<script type="text/javascript">var htmlSample = $('.liveExample').html();</script>
5353
<source-view title="Source code: view" selector=".liveExample"></source-view>
5454
<source-view title="Source code: view model" url="ScriptsLocal/Sample.MapControl.ts"></source-view>
55+
<source-view title="Source code: Google Map component" url="ScriptsLocal/components/GoogleMap.ts"></source-view>
5556
</div>
5657

5758
</article>
@@ -67,7 +68,8 @@ <h2>Live Example</h2>
6768
<script src="ScriptsLocal/components/SourceView.js"></script>
6869

6970
<!-- PAGE SCRIPT HERE -->
70-
<script src="ScriptsLocal/Sample.MapControl.js"></script>
71+
<script src="ScriptsLocal/components/GoogleMap.js"></script>
7172
<script src="https://maps.googleapis.com/maps/api/js?callback=gmapInitialized" async defer></script>
73+
<script src="ScriptsLocal/Sample.MapControl.js"></script>
7274
</body>
7375
</html>

‎TestApp/Sample.TabControl.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
1111

1212
<!-- VueJS (0.12.16) -->
13-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
13+
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>-->
14+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.js"></script>
1415

1516
<!-- sample styles -->
1617
<link href="Content/samples.css" rel="stylesheet" />

‎TestApp/ScriptsLocal/Sample.Chosen.ts

Lines changed: 1 addition & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,4 @@
1-
Vue.component('vue-chosen', {
2-
template: '<select data-placeholder={{placeholder}} v-attr="multiple:multiple" class="chosen-select">' +
3-
' <option v-if="placeholder"></option>' +
4-
' <option v-repeat="item in options | toOptionData" v-j-data="item">{{item.text}}</option>' +
5-
' </select>'
6-
,
7-
data: function () {
8-
return {
9-
changing: false,
10-
};
11-
},
12-
directives: {
13-
jData: function (value) {
14-
var el: HTMLElement = this.el;
15-
$(el).data('chosen', value);
16-
},
17-
},
18-
props: {
19-
options: null, // select data
20-
'v-model': { twoWay: true, default: null }, // bind to single selection
21-
'selected-options': { twoWay: true, default: [], type: Array }, // bind to multi-selection
22-
chosen: null, // chosen option
23-
'text-key': null, // item[text] will be displayed as text, or obj.toString() if text is undefined
24-
placeholder: null, // optional placeholder string
25-
multiple: { type: Boolean, required: false, }
26-
},
27-
filters: {
28-
toOptionData: function (val) {
29-
if (!val)
30-
return val;
31-
var key = this.textKey;
32-
return val.map(x => {
33-
if (key) return { text: x[key], value: x };
34-
else return { text: (x ? x : '').toString(), value: x };
35-
});
36-
},
37-
},
38-
methods: {
39-
select(objs: any[]) {
40-
if (!objs) objs = [];
41-
this.changing = true;
42-
try {
43-
$(this.$el).find('option').each((i, e) => {
44-
var data = $(e).data('chosen');
45-
if (!data)
46-
return;
47-
if (objs.contains(data.value)) $(e).attr('selected', 'selected');
48-
else $(e).removeAttr('selected');
49-
});
50-
$(this.$el).trigger("chosen:updated");
51-
}
52-
finally {
53-
this.changing = false;
54-
}
55-
}
56-
},
57-
ready: function () {
58-
// initialize
59-
var coptions = $.extend({}, { width: '10em' }, this.chosen);
60-
$(this.$el).chosen(coptions);
61-
// initialize selection
62-
if (this.vModel) this.select([this.vModel]);
63-
else this.select(this.selectedOptions);
64-
// track changes
65-
$(this.$el).on('change', () => {
66-
if (this.changing)
67-
return;
68-
this.changing = true;
69-
try {
70-
var target: any[] = this.selectedOptions;
71-
if (!target) {
72-
target = [];
73-
this.selectedOptions = target;
74-
}
75-
target.splice(0, target.length);
76-
$(this.$el).find(':selected').each((i, e) => target.push($(e).data('chosen').value));
77-
this.vModel = target.length > 0 ? target[0] : null;
78-
}
79-
finally {
80-
this.changing = false;
81-
}
82-
});
83-
},
84-
watch: {
85-
'vModel': function (value) {
86-
if (this.changing)
87-
return;
88-
if (value) this.select([value]);
89-
else this.select([]);
90-
},
91-
'selectedOptions': function (value: any[]) {
92-
if (this.changing)
93-
return;
94-
if (value) this.select(value);
95-
else this.select([]);
96-
},
97-
},
98-
});
99-
100-
module Sample.Chosen {
1+
module Sample.Chosen {
1012

1023
interface IBook {
1034
ID: string;

‎TestApp/ScriptsLocal/Sample.MapControl.ts

Lines changed: 2 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,4 @@
1-
module Sample.MapControl {
2-
export var MapInitDefered = $.Deferred();
3-
}
4-
function gmapInitialized() {
5-
Sample.MapControl.MapInitDefered.resolve();
6-
}
7-
// Map component, i.e. 'google-map' tag
8-
// include gmap API after this script:
9-
// <script src="https://maps.googleapis.com/maps/api/js?callback=gmapInitialized" async defer> </script>
10-
Vue.component('google-map', function (resolve, reject) {
11-
Sample.MapControl.MapInitDefered.done(tpl => {
12-
resolve({
13-
template: '<div id={{id}}></div>',
14-
data: function () {
15-
return {
16-
map: <google.maps.Map>null,
17-
mapMarkers: <google.maps.Marker[]>[],
18-
};
19-
},
20-
props: {
21-
id: {
22-
type: String,
23-
required: true,
24-
},
25-
lat: {
26-
type: Number,
27-
required: false,
28-
},
29-
lng: {
30-
type: Number,
31-
required: false,
32-
},
33-
zoom: {
34-
type: Number,
35-
required: false,
36-
},
37-
markers: null, // google.maps.LatLng | google.maps.LatLng[]
38-
},
39-
attached: function () {
40-
var getv = (x, y) => x == undefined ? y : x;
41-
var lat
42-
var map = new google.maps.Map(this.$el, {
43-
center: new google.maps.LatLng(getv(this.lat, -27.468), getv(this.lng, 153.025)),
44-
zoom: getv(this.zoom, 10),
45-
});
46-
this.map = map;
47-
},
48-
watch: {
49-
'markers': function (newVal, oldVal) {
50-
var prev = <google.maps.Marker[]>this.mapMarkers;
51-
$.each(prev, (i, x) => x.setMap(null));
52-
if (!newVal) {
53-
this.mapMarkers = [];
54-
return;
55-
}
56-
if (newVal.length === undefined) {
57-
newVal = [newVal];
58-
}
59-
var map = <google.maps.Map>this.map;
60-
var na = <google.maps.LatLng[]>newVal;
61-
this.mapMarkers = na.map((value, index, array) => {
62-
var m = new google.maps.Marker({
63-
position: value,
64-
map: map,
65-
title: 'Hello World!'
66-
});
67-
return m;
68-
});
69-
},
70-
}
71-
});
72-
});
73-
})
74-
1+

752
module Sample.MapControl {
763
var model = {
774
markers: <google.maps.LatLng[]>null,
@@ -80,7 +7,7 @@ module Sample.MapControl {
807
el: '#sample',
818
data: model,
829
});
83-
Sample.MapControl.MapInitDefered.then(() => {
10+
GoogleMapInitDeferred.then(() => {
8411
model.markers = [
8512
new google.maps.LatLng(-27.468, 153.025),
8613
new google.maps.LatLng(-27.478, 153.035),

‎TestApp/ScriptsLocal/components/GoogleMap.ts

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
var GoogleMapInitDeferred = $.Deferred();
2+
function gmapInitialized() {
3+
// Map component, i.e. 'google-map' tag
4+
// include gmap API after this script:
5+
// <script src="https://maps.googleapis.com/maps/api/js?callback=gmapInitialized" async defer> </script>
6+
GoogleMapInitDeferred.resolve();
7+
}
8+
9+
Vue.component('google-map', function (resolve, reject) {
10+
GoogleMapInitDeferred.done(tpl => {
11+
resolve({
12+
template: '<div id={{id}}></div>',
13+
data: function () {
14+
return {
15+
map: <google.maps.Map>null,
16+
mapMarkers: <google.maps.Marker[]>[],
17+
};
18+
},
19+
props: {
20+
id: {
21+
type: String,
22+
required: true,
23+
},
24+
lat: {
25+
type: Number,
26+
required: false,
27+
},
28+
lng: {
29+
type: Number,
30+
required: false,
31+
},
32+
zoom: {
33+
type: Number,
34+
required: false,
35+
},
36+
markers: null, // google.maps.LatLng | google.maps.LatLng[]
37+
},
38+
attached: function () {
39+
var getv = (x, y) => x == undefined ? y : x;
40+
var lat
41+
var map = new google.maps.Map(this.$el, {
42+
center: new google.maps.LatLng(getv(this.lat, -27.468), getv(this.lng, 153.025)),
43+
zoom: getv(this.zoom, 10),
44+
});
45+
this.map = map;
46+
},
47+
watch: {
48+
'markers': function (newVal, oldVal) {
49+
var prev = <google.maps.Marker[]>this.mapMarkers;
50+
$.each(prev, (i, x) => x.setMap(null));
51+
if (!newVal) {
52+
this.mapMarkers = [];
53+
return;
54+
}
55+
if (newVal.length === undefined) {
56+
newVal = [newVal];
57+
}
58+
var map = <google.maps.Map>this.map;
59+
var na = <google.maps.LatLng[]>newVal;
60+
this.mapMarkers = na.map((value, index, array) => {
61+
var m = new google.maps.Marker({
62+
position: value,
63+
map: map,
64+
title: 'Hello World!'
65+
});
66+
return m;
67+
});
68+
},
69+
}
70+
});
71+
});
72+
})

0 commit comments

Comments
 (0)