Skip to content

Commit 71eecf1

Browse files
anthonydillonanthonydillon
committed
Add js and gulpfile
1 parent 8680dac commit 71eecf1

36 files changed

+291
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎gulpfile.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// Include gulp
2+
// to install the plugins, run the following:
3+
// npm install gulp-rename gulp-ruby-sass gulp-autoprefixer gulp-cache gulp-scss-lint gulp-minify-css gulp-notify --save-dev
4+
5+
var gulp = require('gulp')
6+
rename = require('gulp-rename'),
7+
sass = require('gulp-ruby-sass'),
8+
autoprefixer = require('gulp-autoprefixer'),
9+
notify = require('gulp-notify'),
10+
scsslint = require('gulp-scss-lint');
11+
minifycss = require('gulp-minify-css');
12+
13+
// Define base folders
14+
var src = 'sass';
15+
var dest = 'css/responsive/latest/';
16+
17+
// Compile CSS from Sass files
18+
gulp.task('sass', function() {
19+
return gulp.src(src + '/responsive/latest/ubuntu-styles.scss')
20+
.pipe(scsslint())
21+
.pipe(sass({ style: 'expanded' }))
22+
.on('error', function (err) { console.log(err.message); })
23+
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
24+
.pipe(gulp.dest(dest))
25+
.pipe(rename({suffix: '.min'}))
26+
.pipe(minifycss())
27+
.pipe(gulp.dest(dest))
28+
.pipe(notify({ message: 'Great news! your task is complete' }));
29+
});
30+
31+
// watch for changes in files
32+
gulp.task('watch', function() {
33+
// Watch .scss files
34+
gulp.watch(src + '*.scss', ['sass']);
35+
});
36+
37+
38+
// default task
39+
gulp.task('default', ['sass']);

‎js/core.js‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
/*jslint regexp: true */
2+
/*global YUI, core, browser, window, Modernizr, localStorage */
3+
4+
/**
5+
* Ubuntu Core Front-End Framework
6+
*
7+
* Core javascript file part of Ubuntu Core Front-End Framework
8+
*
9+
* This file containes the classes required by ubuntu.com to interact.
10+
*
11+
* @project Ubuntu Core Front-End Framework
12+
* @author Web Team at Canonical Ltd
13+
* @copyright 2012 Canonical Ltd
14+
*
15+
*/
16+
17+
if (!core) { var core = {}; }
18+
YUI().use('node', 'anim', 'event-resize', function (Y) {
19+
core.setEqualHeight = function ($className) {
20+
var maxHeight = 0,
21+
collection = Y.all('.' + $className);
22+
23+
collection.each(function (node) {
24+
node.all(' > div, > ul li').each(function (node) {
25+
if (node.get('clientHeight') > maxHeight) {
26+
maxHeight = node.get('clientHeight');
27+
}
28+
});
29+
node.all('> div, > ul li').setStyle('height', maxHeight);
30+
maxHeight = 0;
31+
});
32+
};
33+
34+
core.hashSlide = function () {
35+
Y.all('#main-content a').each(function (node) {
36+
if (node.get('hash') !== '') {
37+
var targetURL = node.get('origin') + node.get('pathname');
38+
if (window.location.href === targetURL) {
39+
node.on("click", function (e) {
40+
e.preventDefault();
41+
if (!this.hasClass('slideless')) {
42+
core.slideToAnchor(node.get('hash'));
43+
}
44+
});
45+
}
46+
}
47+
});
48+
};
49+
50+
core.slideToAnchor = function ($name) {
51+
if ($name !== '') {
52+
var destination = Y.one($name).getXY()[1] - 20,
53+
webkitAnim = new Y.Anim({
54+
node: Y.one('html'),
55+
to: { scroll: [0, destination]},
56+
easing: 'easeOut',
57+
duration: 1
58+
}),
59+
ffAnim = new Y.Anim({
60+
node: Y.one('body'),
61+
to: { scroll: [0, destination]},
62+
easing: 'easeOut',
63+
duration: 1
64+
});
65+
webkitAnim.run(1000);
66+
ffAnim.run(1000);
67+
}
68+
};
69+
70+
core.getPullQuotes = function () {
71+
Y.all('span.pullquote').each(function (node) {
72+
var item = Y.Node.create('<div class="pull-quote js">&ldquo;' + node.getContent() + '&rdquo;</div>');
73+
node.get('parentNode').get('parentNode').get('parentNode').append(item);
74+
});
75+
};
76+
77+
core.setupTooltips = function () {
78+
if (Y.one('.tooltip') !== null) {
79+
Y.all('.tooltip').each(function (node) {
80+
node.get('parentNode').prepend('<p class="tooltip-label">' + node.get('title') + '</p>');
81+
var title = this.get('title');
82+
node.on('mouseover', function () {
83+
this.set('title', '');
84+
this.get('parentNode').one('.tooltip-label').setStyle('display', 'inline');
85+
});
86+
node.on('mouseout', function () {
87+
this.set('title', title);
88+
this.get('parentNode').one('.tooltip-label').setStyle('display', 'none');
89+
});
90+
});
91+
}
92+
};
93+
94+
core.sectionTabs = function () {
95+
96+
if (Y.one('.tabbed-content')) {
97+
Y.one('.tabbed-menu').append('<img src="//assets.ubuntu.com/sites/ubuntu/latest/u/img/patterns/tabbed-nav-arrow.png" class="arrow" height="6" width="12" alt="">');
98+
99+
var p = Y.one('.tabbed-menu a.active'),
100+
s = p.get('href').split('#')[1],
101+
a = Y.one('.arrow'),
102+
w = (p.get('clientWidth') / 2) - 7,
103+
x = (p.get('parentNode').getXY()[0] - p.get('parentNode').get('parentNode').getXY()[0]) + w;
104+
Y.all('.tabbed-content').each(function () {
105+
if (this.get('id') !== s) {
106+
this.setStyle('opacity', '0');
107+
}
108+
});
109+
a.setStyle('left', x + 'px').setStyle('display', 'inline');
110+
Y.all('.tabbed-menu a').on('click', function (e) {
111+
e.preventDefault();
112+
Y.all('.tabbed-menu a').removeClass('active');
113+
e.currentTarget.addClass('active');
114+
Y.all('.tabbed-content').addClass('hide').setStyle('opacity', '0');
115+
s = e.currentTarget.get('hash');
116+
Y.one(s).removeClass('hide');
117+
new Y.Anim({ node: s, to: { opacity: 1 } }).run();
118+
x = (e.currentTarget.get('parentNode').getXY()[0] - e.currentTarget.get('parentNode').get('parentNode').getXY()[0]) + w;
119+
new Y.Anim({ node: a, to: { left: x + 'px' } }).run();
120+
});
121+
}
122+
};
123+
124+
core.tabbedContent = function () {
125+
Y.all('.tabbed-content .accordion-button').on('click', function (e) {
126+
e.preventDefault();
127+
e.target.get('parentNode').toggleClass('open');
128+
});
129+
};
130+
131+
core.svgFallback = function () {
132+
if (typeof Modernizr === "object") {
133+
if (!Modernizr.svg || !Modernizr.backgroundsize) {
134+
Y.all("img[src$='.svg']").each(function (node) {
135+
node.setAttribute("src", node.getAttribute('src').toString().match(/.*\/(.+?)\./)[0] + 'png'); // jslint acceptable
136+
});
137+
}
138+
}
139+
};
140+
141+
core.resourceHubBoxes = function () {
142+
Y.all(".resource").on('click', function (e) {
143+
e.preventDefault();
144+
e.stopPropagation();
145+
if (e.currentTarget.one('a') !== null) {
146+
window.location = e.currentTarget.one('a').get("href");
147+
}
148+
});
149+
};
150+
151+
core.mobileNav = function () {
152+
if (Y.one('.header-search')) {
153+
Y.one('.nav-primary').insert('<a class="search-toggle"></a><a id="menu" class="nav-toggle">menu</a>', 'before');
154+
} else {
155+
Y.one('.nav-primary').insert('</a><a id="menu" class="nav-toggle">menu</a>', 'before');
156+
}
157+
158+
Y.all('.nav-toggle').on('click', function (e) {
159+
e.preventDefault();
160+
if (Y.one('.header-search')) {
161+
Y.one('.header-search').removeClass('active');
162+
}
163+
164+
Y.all('.nav-toggle').toggleClass('active');
165+
Y.all('header nav ul').toggleClass('active');
166+
Y.all('.nav-primary').toggleClass('active');
167+
});
168+
169+
if (Y.one('.header-search')) {
170+
Y.one('.search-toggle').on('click', function (e) {
171+
e.preventDefault();
172+
173+
Y.all('.nav-toggle').removeClass('active');
174+
Y.all('header nav ul').removeClass('active');
175+
Y.all('.nav-primary').removeClass('active');
176+
177+
Y.one('.header-search').toggleClass('active');
178+
Y.one('.header-search .form-text').focus();
179+
});
180+
}
181+
182+
if (Y.one('.breadcrumb li a')) {
183+
Y.one('.breadcrumb > li a').insert('<span class="after"></span>');
184+
Y.one('.breadcrumb li a .after').on('click', function (e) {
185+
e.preventDefault();
186+
Y.one('.nav-secondary').toggleClass('open');
187+
core.setLocalStorage('onboard');
188+
});
189+
}
190+
191+
};
192+
193+
core.navOnboarding = function () {
194+
var key = 'ubuntu',
195+
nav_secondary = Y.one('.nav-secondary'),
196+
ls;
197+
198+
if (nav_secondary && !nav_secondary.test(':empty')) {
199+
if (Y.one('html').hasClass('localstorage')) {
200+
if (localStorage.getItem(key) === null) {
201+
nav_secondary.addClass('open');
202+
} else {
203+
ls = JSON.parse(localStorage.getItem(key));
204+
if (ls.navigation !== 'onboard') {
205+
nav_secondary.addClass('open');
206+
}
207+
}
208+
}
209+
}
210+
};
211+
212+
core.setLocalStorage = function ($value) {
213+
var key = 'ubuntu',
214+
value = $value,
215+
ubuntu = {};
216+
217+
ubuntu.navigation = value;
218+
localStorage.setItem(key, JSON.stringify(ubuntu));
219+
};
220+
221+
core.sectionTabs();
222+
core.tabbedContent();
223+
core.setEqualHeight('equal-height');
224+
core.getPullQuotes();
225+
core.setupTooltips();
226+
core.svgFallback();
227+
core.resourceHubBoxes();
228+
core.mobileNav();
229+
core.navOnboarding();
230+
core.hashSlide();
231+
});

‎package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
{
3+
"name": "ubuntu-web-style-guide",
4+
"version": "0.1.0",
5+
"description": "The Ubuntu web style guide",
6+
"private": true,
7+
"scripts": {
8+
"start": "node app"
9+
},
10+
"devDependencies": {
11+
"gulp": "*",
12+
"gulp-autoprefixer": "^2.1.0",
13+
"gulp-cache": "^0.2.7",
14+
"gulp-minify-css": "^0.4.6",
15+
"gulp-notify": "^2.2.0",
16+
"gulp-rename": "^1.2.0",
17+
"gulp-ruby-sass": "^1.0.0-alpha.3",
18+
"gulp-scss-lint": "^0.1.7"
19+
}
20+
}

_core-constants.scss renamed to scss/_core-constants.scss

File renamed without changes.

_core-grid-desktop.scss renamed to scss/_core-grid-desktop.scss

File renamed without changes.

_core-grid-tablet.scss renamed to scss/_core-grid-tablet.scss

File renamed without changes.

_core-grid.scss renamed to scss/_core-grid.scss

File renamed without changes.

_core-mixins.scss renamed to scss/_core-mixins.scss

File renamed without changes.

_core-templates.scss renamed to scss/_core-templates.scss

File renamed without changes.

0 commit comments

Comments
 (0)