UNPKG

5.48 kBapplication/x-httpd-phpView Raw
1<?php
2if (!defined('WEBROOT'))
3 exit;
4use \ace\Ace;
5?><!doctype html>
6<html>
7<head>
8<meta charset="utf-8" />
9<title>Ace | Paradigm</title>
10<link rel="stylesheet" type="text/css" href="/assets/reset.css" />
11<script src="/assets/jquery.1.8.min.js"></script>
12<link rel="stylesheet" type="text/css" href="/ace.css" />
13<script src="/ace.js"></script>
14<script>
15
16$(function(){
17 $('.ace-smile').each(function(){
18 var $el = $(this);
19 $.getJSON('/ace/api/demo/smile',function(data){
20 if (!(data && data.data))
21 return $el.html('api error' + (data.error?': '+data.error:''));
22 $el.html(data.data);
23 });
24 });
25
26 var $acePopExample = $('#ace-pop-example').bind('click',function(e){
27 e.preventDefault();
28 ace.pop({
29 header: 'Are you sure?'
30 ,body: 'Clicking Ok will close this window.<br /><br />...So will clicking Cancel.'
31 ,btns: [
32 ['cancel','Cancel']
33 ,['ok','Ok']
34 ]
35 });
36 });
37 ace.tooltip($acePopExample, {
38 content: 'I has speech!'
39 ,pos: 'right'
40 ,offset: 10
41 });
42
43 var $aceTooltipExample = $('#ace-tooltip-example').bind('click',function(){return false;});
44 ace.tooltip($aceTooltipExample, {
45 content: 'Look at me!'
46 ,pos: 'top'
47 ,offset: 10
48 ,group: 1
49 });
50 ace.tooltip($aceTooltipExample, {
51 content: 'I can have multiple tooltips attached.<br />And they always stay on-screen!'
52 ,pos: 'bot'
53 ,offset: 10
54 ,group: 1
55 });
56});
57
58</script>
59
60<style type="text/css">
61body {
62 font-family: Helvetica,arial,sans-serif;
63}
64a {
65 text-decoration: none;
66 color: #9e6618;
67}
68a:hover {
69 text-decoration: underline;
70}
71.page {
72 width: 960px;
73 margin: 20px auto;
74}
75.page-title {
76 padding: 1em 0 1.4em 0;
77 font-size: 25px;
78 text-transform: uppercase;
79}
80.page-title span:nth-child(1) {
81 font-weight: 300;
82 letter-spacing: 0.19em;
83}
84.page-title span:nth-child(2) {
85 font-weight: 500;
86 letter-spacing: 0.15em;
87}
88h3 {
89 font-size: 15px;
90 text-transform: uppercase;
91 letter-spacing: 0.1em;
92 margin: 2em 0 1em 0;
93 border-bottom: 1px solid #ccc;
94 padding-bottom: 0.3em;
95}
96h3 span {
97 font-size: 12px;
98 text-transform: none;
99}
100.instagram-container {
101 float: left;
102 width: 660px;
103}
104.twitter-container {
105 float: left;
106 width: 300px;
107}
108.carousel-container {
109 padding: 16px 0 0 0;
110 margin-bottom: 14px;
111}
112.ace-twitter.type-featured .ace-twitter-wrap {
113 background-position: 933px 39px;
114}
115.ace-example {
116 margin-bottom: 14px;
117}
118.ace-class-description {
119 margin-bottom: 14px;
120}
121.ace-double .ace-example {
122 float: left;
123 width: 48%;
124}
125.ace-double .ace-example:nth-child(2) {
126 float: right;
127}
128div.ace-smile {
129 padding: 10px;
130 display: inline-block; /* for tooltip */
131}
132</style>
133
134</head>
135<body>
136
137<div class="page">
138
139 <h1 class="page-title"><span>Para</span><span>digm</span></h1>
140
141 <div class="instagram-container">
142 <!--<script type="text/ace-instagram">{
143 query: 'users/227962011/media/recent'
144 }</script>-->
145 <script type="text/ace-instagram">{
146 query: 'users/%userId%/media/recent'
147 ,fetch: {
148 userId: ['users/search?q=jewelmint',function(res){
149 return res.data[0].id;
150 }]
151 }
152 }</script>
153 </div>
154
155 <div class="twitter-container">
156 <script type="text/ace-twitter">{
157 screenName: 'jewelmint'
158 ,numGet: 10
159 ,numShow: 4
160 ,scroll: 'y'
161 ,type: 'sidebar'
162 }</script>
163 </div>
164
165 <div class="clear">&nbsp;</div>
166
167 <div class="carousel-container">
168 <script type="text/ace-carousel">{
169 imgs: [
170 'http://remotweb.com/files/uploads/2014/06/fashion_jewelry.jpg'
171 ,'http://www.cobymadison.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/1/7/17645w_1.jpg'
172 ,'http://thechrisellefactor.com/wp-content/uploads/2012/04/Chanel_Wallet_Chriselle1.jpg'
173 ,'http://thechrisellefactor.com/wp-content/uploads/2012/09/Peplum_Leather_zara_top_Valentino_rockstud_leopard_shoes_Purse_chriselle_Lim_5.jpg'
174 ,'http://glambistro.com/wp-content/uploads/2013/10/summer-arm-candy.jpg'
175 ,'http://www.mychicadventure.com/wp-content/uploads/2014/05/boho-chic-2.jpg'
176 ]
177 ,dims: '195x148'
178 ,speed: 300
179 ,shadbox: true
180 }</script>
181 </div>
182
183 <div class="twitter-horizontal-container">
184 <script type="text/ace-twitter">{
185 screenName: 'jewelmint'
186 ,numGet: 10
187 ,numShow: 1
188 ,scroll: 'x'
189 ,type: 'featured'
190 }</script>
191 </div>
192
193 <div class="ace-double">
194 <div class="ace-example">
195 <h3>ace.tooltip():</h3>
196 <a id="ace-tooltip-example" href="#">Hover me!</a>
197 </div>
198 <div class="ace-example">
199 <h3>ace.pop():</h3>
200 <a id="ace-pop-example" href="#">Click on me!</a>
201 </div>
202 <div class="clear">&nbsp;</div>
203 </div>
204
205 <div class="ace-example">
206 <h3>Ace API Example <span>(/ace/api/demo/smile)</span>:</h3>
207 <div class="ace-smile"></div>
208 </div>
209
210 <div class="ace-class-description">
211 <h3>Ace PHP Utility Methods <span>(displayed using Ace::varDump)</span>:</h3>
212 <?php
213 $c = new ReflectionClass('\ace\Ace');
214 $methods = array();
215 $ignore = array('loadConfig',);
216 $pretty = array();
217 //Ace::varDump($c->getDocComment());
218 foreach ($c->getMethods() as $v) {
219 if ($v->name[0] == '_' || !$v->isPublic() || in_array($v->name,$ignore))
220 continue;
221 $m = array();
222 $comment = trim(preg_replace('/(\/\*)|(\*\/)|\*/','',$v->getDocComment()));
223 if ($comment)
224 $m['comment'] = $comment;
225 $methods[$v->name] = $m;
226 $pretty[] = 'Ace::'.($v->name . ($comment ? "\n\t$comment" : ''));
227 }
228 Ace::varDump($methods);
229 //if (!empty($_GET['debug'])) echo "\n\n".implode("\n",$pretty)."\n\n";
230 ?>
231 </div>
232
233</div>
234
235<?php include WEBROOT.'/global-footer.php'; ?>
236
237</body>
238</html>
\No newline at end of file