|
16 | 16 | --- |
17 | 17 |
|
18 | 18 | `````html |
19 | | -<link rel="stylesheet" href="/docs/widget.css"> |
| 19 | +<script type="text/spm"> |
| 20 | + require('./widget.css'); |
| 21 | +</script> |
20 | 22 |
|
21 | 23 | <script type="text/template" id="alice-module"> |
22 | 24 | <div class="alice-module"> |
@@ -138,110 +140,107 @@ a { |
138 | 140 |
|
139 | 141 | <div class="alice-modules"></div> |
140 | 142 |
|
141 | | -<script type="text/javascript"> |
142 | | -seajs.use(['jquery', 'underscore', 'arale-popup'], function($, _, Popup) { |
| 143 | +<script type="text/spm"> |
| 144 | +var $ = require('jquery'); |
| 145 | +var _ = require('underscore'); |
| 146 | +var Popup = require('arale-popup'); |
143 | 147 |
|
144 | | - $('.alice-modules').on('mouseenter', '.alice-module-demo', function() { |
145 | | - $(this).find('.alice-module-sourcecode').fadeIn(200); |
146 | | - }).on('mouseleave', '.alice-module-demo', function() { |
147 | | - $(this).find('.alice-module-sourcecode').fadeOut(200); |
148 | | - }); |
| 148 | +$('.alice-modules').on('mouseenter', '.alice-module-demo', function() { |
| 149 | + $(this).find('.alice-module-sourcecode').fadeIn(200); |
| 150 | +}).on('mouseleave', '.alice-module-demo', function() { |
| 151 | + $(this).find('.alice-module-sourcecode').fadeOut(200); |
| 152 | +}); |
149 | 153 |
|
150 | | - new Popup({ |
151 | | - trigger: '.alice-module-sourcecode', |
152 | | - template: '<div class="black">源码在下方</div>', |
153 | | - delay: -1, |
154 | | - delegateNode: '.alice-modules' |
155 | | - }); |
| 154 | +new Popup({ |
| 155 | + trigger: '.alice-module-sourcecode', |
| 156 | + template: '<div class="black">源码在下方</div>', |
| 157 | + delay: -1, |
| 158 | + delegateNode: '.alice-modules' |
| 159 | +}); |
156 | 160 |
|
157 | | - $('.alice-modules').on('click', '.alice-module-sourcecode', function() { |
158 | | - var code = $(this).parent().find('.alice-module-code'); |
159 | | - if (code.is(':hidden')) { |
160 | | - code.animate({ |
161 | | - opacity: 1, |
162 | | - height: 'toggle' |
163 | | - }, 200); |
164 | | - } else { |
165 | | - code.animate({ |
166 | | - opacity: 0, |
167 | | - height: 'toggle' |
168 | | - }, 200); |
169 | | - } |
170 | | - }); |
| 161 | +$('.alice-modules').on('click', '.alice-module-sourcecode', function() { |
| 162 | + var code = $(this).parent().find('.alice-module-code'); |
| 163 | + if (code.is(':hidden')) { |
| 164 | + code.animate({ |
| 165 | + opacity: 1, |
| 166 | + height: 'toggle' |
| 167 | + }, 200); |
| 168 | + } else { |
| 169 | + code.animate({ |
| 170 | + opacity: 0, |
| 171 | + height: 'toggle' |
| 172 | + }, 200); |
| 173 | + } |
| 174 | +}); |
171 | 175 |
|
172 | | - $.getJSON('/docs/widgets.json?nowrap', function(data) { |
173 | | - var alias = data || {}; |
174 | | - var deps = _.pairs(alias); |
175 | | - _.each(deps, function(dep) { |
176 | | - var name = dep[0].replace('alice-', ''); |
177 | | - var version = dep[1]; |
178 | | -
|
179 | | - var moduleNode = $($('#alice-module').html()); |
180 | | - moduleNode.find('.alice-module-title a') |
181 | | - .attr('href', '/' + name) |
182 | | - .attr('id', 'modules-' + name) |
183 | | - .html(name); |
184 | | - moduleNode.find('.alice-module-version').html( |
185 | | - '<a href="http://spmjs.io/package/alice-' + name + '" target="_blank">' + |
186 | | - '<img src="http://spmjs.io/badge/alice-' + name + '">' + |
187 | | - '</a>' |
188 | | - ); |
189 | | - moduleNode.appendTo('.alice-modules'); |
190 | | - var list = substractTitle(moduleNode.find('h2')); |
191 | | -
|
192 | | - $.ajax({ |
193 | | - url: 'http://docs.spmjs.io/alice-' + name + '/latest/', |
194 | | - dataType: 'html', |
195 | | - success: function(data) { |
196 | | - data = $(data); |
197 | | - moduleNode.find('.alice-module-description') |
198 | | - .html(data.find('.entry-content > p:first-child').html()); |
199 | | -
|
200 | | - data.find('.nico-insert-code').each(function(index, item) { |
201 | | - var demoNode = $($('#alice-module-demo').html()); |
202 | | - item = $(item); |
203 | | - if (item.children()[0].tagName === 'LINK' || |
204 | | - item.children()[0].tagName === 'STYLE') { |
205 | | - return; |
206 | | - } |
207 | | - var subtitle = item.prev().html(); |
208 | | - if (item.prev()[0].tagName !== 'H3' || !subtitle) { |
209 | | - subtitle = '默认'; |
210 | | - } |
211 | | - demoNode.find('.alice-module-subtitle').html(subtitle); |
212 | | - demoNode.find('.alice-module-dom').html(item.html()); |
213 | | - // 直接使用目标页面生成的高亮代码，不再动态渲染 |
214 | | - var codeHtml = item.next('.highlight').find('pre').html(); |
215 | | - demoNode.find('.alice-module-code').html(codeHtml); |
216 | | -
|
217 | | - moduleNode.find('.alice-loading').remove(); |
218 | | - demoNode.appendTo(moduleNode); |
219 | | - }); |
220 | | -
|
221 | | - // 中文关键词，一般放在 keywords 数组的第一个 |
222 | | - // 在这里写到左边索引栏中 |
223 | | - var keywords = data.find('.sidebar-wrapper .sidebar-description').data('keyword'); |
224 | | - if (keywords) { |
225 | | - list.find('i').html(keywords); |
| 176 | +$.getJSON('/docs/widgets.json?nowrap', function(data) { |
| 177 | + var alias = data || {}; |
| 178 | + var deps = _.pairs(alias); |
| 179 | + _.each(deps, function(dep) { |
| 180 | + var name = dep[0].replace('alice-', ''); |
| 181 | + var version = dep[1]; |
| 182 | +
|
| 183 | + var moduleNode = $($('#alice-module').html()); |
| 184 | + moduleNode.find('.alice-module-title a') |
| 185 | + .attr('href', '/' + name) |
| 186 | + .attr('id', 'modules-' + name) |
| 187 | + .html(name); |
| 188 | + moduleNode.find('.alice-module-version').html( |
| 189 | + '<a href="http://spmjs.io/package/alice-' + name + '" target="_blank">' + |
| 190 | + '<img src="http://spmjs.io/badge/alice-' + name + '">' + |
| 191 | + '</a>' |
| 192 | + ); |
| 193 | + moduleNode.appendTo('.alice-modules'); |
| 194 | + var list = substractTitle(moduleNode.find('h2')); |
| 195 | +
|
| 196 | + $.ajax({ |
| 197 | + url: 'http://docs.spmjs.io/alice-' + name + '/latest/', |
| 198 | + dataType: 'html', |
| 199 | + success: function(data) { |
| 200 | + data = $(data); |
| 201 | + moduleNode.find('.alice-module-description') |
| 202 | + .html(data.find('.entry-content > p:first-child').html()); |
| 203 | +
|
| 204 | + data.find('.nico-insert-code').each(function(index, item) { |
| 205 | + var demoNode = $($('#alice-module-demo').html()); |
| 206 | + item = $(item); |
| 207 | + if (item.children()[0].tagName === 'LINK' || |
| 208 | + item.children()[0].tagName === 'STYLE') { |
| 209 | + return; |
226 | 210 | } |
| 211 | + var subtitle = item.prev().html(); |
| 212 | + if (item.prev()[0].tagName !== 'H3' || !subtitle) { |
| 213 | + subtitle = '默认'; |
| 214 | + } |
| 215 | + demoNode.find('.alice-module-subtitle').html(subtitle); |
| 216 | + demoNode.find('.alice-module-dom').html(item.html()); |
| 217 | + // 直接使用目标页面生成的高亮代码，不再动态渲染 |
| 218 | + var codeHtml = item.next('.highlight').find('pre').html(); |
| 219 | + demoNode.find('.alice-module-code').html(codeHtml); |
| 220 | +
|
| 221 | + moduleNode.find('.alice-loading').remove(); |
| 222 | + demoNode.appendTo(moduleNode); |
| 223 | + }); |
| 224 | +
|
| 225 | + // 中文关键词，一般放在 keywords 数组的第一个 |
| 226 | + // 在这里写到左边索引栏中 |
| 227 | + var keywords = data.find('.sidebar-wrapper .sidebar-description').data('keyword'); |
| 228 | + if (keywords) { |
| 229 | + list.find('i').html(keywords); |
227 | 230 | } |
228 | | - }); |
229 | | - }); |
230 | | - seajs.use('/static/side', function(side) { |
231 | | - side.init(); |
| 231 | + } |
232 | 232 | }); |
233 | 233 | }); |
234 | | -
|
235 | | - function substractTitle(item) { |
236 | | - $('.side-loading').remove(); |
237 | | - item = item.find('a'); |
238 | | - var list = $($('#list-template').html()); |
239 | | - list.find('a').html(item.html() + list.find('a').html()); |
240 | | - list.find('a').attr('href', '#' + item.attr('id')); |
241 | | - list.appendTo('.side-area ul'); |
242 | | - return list; |
243 | | - } |
244 | | -
|
245 | 234 | }); |
| 235 | +
|
| 236 | +function substractTitle(item) { |
| 237 | + $('.side-loading').remove(); |
| 238 | + item = item.find('a'); |
| 239 | + var list = $($('#list-template').html()); |
| 240 | + list.find('a').html(item.html() + list.find('a').html()); |
| 241 | + list.find('a').attr('href', '#' + item.attr('id')); |
| 242 | + list.appendTo('.side-area ul'); |
| 243 | + return list; |
| 244 | +} |
246 | 245 | </script> |
247 | 246 | ````` |
0 commit comments