Skip to content

Commit 052ff85

Browse files
desandrodesandro
committed
🎩 requirejs sandbox
1 parent 039d9fd commit 052ff85

File tree

4 files changed

+119
-4
lines changed

4 files changed

+119
-4
lines changed

‎gulpfile.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ function addBanner( str ) {
5959

6060
gulp.task( 'requirejs', function() {
6161
var banner = getBanner();
62+
var definitionRE = /define\(\s*'infinite-scroll\/js\/index'(.|\n)+\],\s*factory/;
6263
// HACK src is not needed
6364
// should refactor rjsOptimize to produce src
6465
return gulp.src('js/index.js')
@@ -75,8 +76,13 @@ gulp.task( 'requirejs', function() {
7576
jquery: 'empty:'
7677
}
7778
}) )
78-
// remove named module
79-
// .pipe( replace( "'infinite-scroll/js/index',", '' ) )
79+
// munge AMD definition
80+
.pipe( replace( definitionRE, function( definition ) {
81+
// remove named module
82+
return definition.replace( "'infinite-scroll/js/index',", '' )
83+
// use explicit file paths, './history' -> 'infinite-scroll/js/history'
84+
.replace( /'.\//g, "'infinite-scroll/js/" );
85+
}) )
8086
// add banner
8187
.pipe( addBanner( banner ) )
8288
.pipe( rename('infinite-scroll.pkgd.js') )

‎sandbox/js/scroll-loader.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@ var container = document.querySelector('.posts-container');
22
var infScroll = new InfiniteScroll( container, {
33
path: '.pagination__next',
44
append: '.post',
5-
historyTitle: true,
65
nav: '.pagination',
76
status: '.scroll-status',
87
log: true,
9-
// json: true,
108
// history: false,
119
});

‎sandbox/requirejs/requirejs-main.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*global requirejs: false*/
2+
3+
// ---- bower components ---- //
4+
5+
// requirejs.config({
6+
// baseUrl: '../../bower_components'
7+
// });
8+
//
9+
// requirejs( [ '../js/index' ], initScroll );
10+
11+
// ---- pkgd ---- //
12+
13+
requirejs( [
14+
'../../dist/infinite-scroll.pkgd.js'
15+
], initScroll );
16+
17+
function initScroll( InfiniteScroll ) {
18+
new InfiniteScroll( '.posts-container', {
19+
path: '.pagination__next',
20+
append: '.post',
21+
nav: '.pagination',
22+
status: '.scroll-status',
23+
log: true,
24+
history: false,
25+
});
26+
}

‎sandbox/requirejs/requirejs.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
2+
<!doctype html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width" />
7+
8+
<title>requireJS</title>
9+
10+
<link rel="stylesheet" href="../css/blog.css" />
11+
<link rel="stylesheet" href="../css/loader-ellips.css" />
12+
13+
<script data-main="requirejs-main" src="https://unpkg.com/requirejs@2/require.js"></script>
14+
15+
</head>
16+
<body>
17+
18+
<div class="site-header">
19+
<div class="container">
20+
21+
<h1>requireJS</h1>
22+
23+
</div>
24+
</div>
25+
26+
<div class="container">
27+
<div class="posts-container">
28+
<article class="post">
29+
<a class="post-header" href="/blog/wyday-logos">
30+
<h1 class="post-header__title">wyDay logos</h1>
31+
<p class="post-header__date">22 Mar 2017</p>
32+
</a>
33+
<div class="post__content">
34+
<p><img src="https://i.imgur.com/pbs1Ylg.png" alt="wyDay logos"></p>
35+
<p>After seeing my work on <a href="http://logo.pizza">Logo Pizza</a>, Wyatt at <a href="https://wyday.com/">wyDay</a> employed my services to design a new set of logos for wyDay and its products, LimeLM and wyBuild. wyDay makes &quot;premium software development tools for high-tech companies.&quot; A kindred spirit for Metafizzy!</p>
36+
<p><img src="https://i.imgur.com/jUySqoc.png" alt="wyDay logos before &amp; after"></p>
37+
<p>wyDay already had a strong brand to work with. That LimeLM pirate with lime eye patch is a great visual — easily memorable. The wyDay and wyBuild logos were a bit generic, so I was offered a blank slate for them. The end result is a set of straight-forward, iconic emblems.</p>
38+
39+
</div>
40+
</article>
41+
<article class="post">
42+
<a class="post-header" href="/blog/mealio-logo">
43+
<h1 class="post-header__title">Mealio logo</h1>
44+
<p class="post-header__date">8 Mar 2017</p>
45+
</a>
46+
<div class="post__content">
47+
<p><img src="https://i.imgur.com/3Ycdt9U.png" alt="Mealio logo"></p>
48+
<p><em>If you eat and if you even remotely like food then <a href="https://www.mealio.com">Mealio</a> is the right place for you.</em> Mealio helps people solve the problem of constantly having to create a weekly meal plan by generating them based on the user&#39;s preferences. It&#39;s like Spotify for food.</p>
49+
<p>I was tasked to design the Mealio logo. I delivered on an friendly &amp; clever M monogram that evokes the approachable and helpful qualities of Mealio. The fork and knife fitting within the counters of the M say it all. Knife, fork, M = Mealio.</p>
50+
51+
</div>
52+
</article>
53+
54+
</div> <!-- posts-container -->
55+
56+
<div class="scroll-status">
57+
<div class="infinite-scroll-request">
58+
<div class="loader-ellips">
59+
<span class="loader-ellips__dot loader-ellips__dot--1"></span>
60+
<span class="loader-ellips__dot loader-ellips__dot--2"></span>
61+
<span class="loader-ellips__dot loader-ellips__dot--3"></span>
62+
<span class="loader-ellips__dot loader-ellips__dot--4"></span>
63+
</div>
64+
</div>
65+
<p class="infinite-scroll-error">No more pages to load</p>
66+
<p class="infinite-scroll-last">Last page loaded</p>
67+
</div>
68+
69+
<nav class="pagination">
70+
<span class="pagination__current">Page 1 of 17</span>
71+
<a class="pagination__next" href="../page/2.html">Next &middot; 2</a>
72+
</nav>
73+
</div> <!-- container -->
74+
75+
<footer class="site-footer">
76+
<div class="container">
77+
78+
<p class="site-footer__fizzy-makes">Metafizzy makes delightful UI libraries and logos</p>
79+
80+
81+
</div>
82+
</footer>
83+
84+
</body>
85+
</html>

0 commit comments

Comments
 (0)