-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsettings.html
142 lines (121 loc) · 6.33 KB
/
settings.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Widget Settings • Wix</title>
<link rel="stylesheet" href="ui-lib.min.css"/>
</head>
<body>
<div wix-scroll="{height:646}">
<header class="box">
<div class="logo">
<img width="86" src="images/wix_icon.png" alt="logo"/>
</div>
<div class="loggedOut">
<p>
This is a sample Settings view for widgets and pages created with <a href="http://dev.wix.com"
target="_blank">Wix's 3rd Party SDK</a>,
compatible with Wix's product requirements.
This boilerplate is aimed at saving time for developing the UI of your apps, and let the
developer focus on developing logic.
</p>
<div class="login-panel">
<p class="create-account">Don't have an<br/>account? <strong><a href="#" target="_blank">Create
one</a></strong></p>
<button class="submit uilib-btn connect">Connect account</button>
</div>
</div>
<div class="loggedIn hidden">
<p>You are now connected to <strong>John Doe (john@doe.com)</strong> account<br/>
<a class="disconnect-account">Disconnect account</a></p>
<div class="premium-panel">
<p class="premium-features ">Premium features</p>
<button class="submit btn upgrade">Upgrade</button>
</div>
</div>
</header>
<div class="accordion" wix-ctrl="Accordion">
<div class="acc-pane">
<h3>General Settings: </h3>
<div class="acc-content">
<ul class="list">
<li wix-label="Image Visibility:">
<div wix-model="imageVisibility" wix-ctrl="Dropdown" wix-options="{width:150}">
<div value="show">Show Images</div>
<div value="hide">Hide Images</div>
<div value="showhover">Show Images on Hover</div>
</div>
</li>
<li wix-label="Fixed Position:">
<div wix-ctrl="FixedPositionControl"></div>
</li>
<li wix-label="Number of images:">
<div wix-model="numOfImages" wix-ctrl="Slider" wix-options="{ maxValue:500, preLabel:'0', postLabel:'500', toolTip:true}"></div>
<div wix-model="numOfImages" wix-ctrl="Spinner" wix-options="{ maxValue:500 }"></div>
</li>
<li wix-label="Fonts:">
<div wix-param="myFont" wix-ctrl="FontStylePicker"></div>
</li>
<li wix-label="Language Picker:">
<div wix-model="lang" wix-ctrl="LanguagePicker" wix-tooltip=" {placement:'top', text:'Pick Language'}"></div>
</li>
<li wix-label="Email address:">
<div id= "email" wix-ctrl="Input" wix-options="{ placeholder: 'john@doe.com' }"></div>
</li>
</ul>
</div>
</div>
<div class="acc-pane">
<h3>Color Settings: </h3>
<div class="acc-content">
<ul class="list">
<li wix-label="Text Color:">
<div wix-param="textColor" wix-ctrl="ColorPicker" wix-options="{startWithColor:'color-5'}"></div>
</li>
<li wix-label="Background Color:">
<div wix-param="backgroundColor" wix-ctrl="ColorPickerWithOpacity" wix-options="{startWithColor:'color-1'}"></div>
</li>
</ul>
</div>
</div>
<div class="acc-pane">
<h3>Sync Options</h3>
<div class="acc-content">
<p>How many images to sync ?</p>
<div wix-model="imagesToSync" wix-ctrl="Radio">
<div data-radio-value="sync10">Sync 10 images</div>
<div data-radio-value="sync25">Sync 25 images</div>
<div data-radio-value="sync50">Sync 50 images</div>
</div>
<p>Sync Meta Data ?</p>
<div wix-model="imageMeta" wix-ctrl="Checkbox:{ postLabel:'Image Meta'}"></div>
<div wix-model="imageAlt" wix-ctrl="Checkbox" wix-options="{ postLabel:'Image Alt', checked:true}"></div>
<div wix-model="imageLink" wix-ctrl="Checkbox:{ postLabel:'Image Link'}"></div>
</div>
</div>
</div>
</div>
<!-- jQuery Dependency -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- Wix SDK -->
<script src="//sslstatic.wix.com/services/js-sdk/1.26.0/js/Wix.js"></script>
<script type="text/javascript" src="ui-lib.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
Wix.UI.initialize({
numOfImages: 100,
isIconShown: true,
imageVisibility: 'show',
imagesToSync: 0,
imageLink: false
});
/**
Validate email adress
*/
$('#email').getCtrl().setValidationFunction(function(value) {
return (/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value));
});
});
</script>
</body>
</html>