← Back to branch summary

~mhall119/ubuntu-api-website/content-editing

« back to all changes in this revision

Viewing changes to developer_network/web/static/js/base.js

  • Committer: mhall119
  • Date: 2013-09-19 17:48:26 UTC
  • Revision ID: mhall119@ubuntu.com-20130919174826-s8pqgtw7g6ifzc16
Add sidenav to match Wordpress, required copying in some css and js from the WP theme

Show diffs side-by-side

added added

removed removed

Lines of Context:
developer_network/web/static/js/base.js
 
1
/** 
 
2
 * @fileoverview A base JS object containing site-wide methods
 
3
 *
 
4
 * @author Canonical Web Team: Steve Edwards
 
5
 * @version 1.0
 
6
 */
 
7
 
 
8
template_dir = '/wp-content/themes/ubuntu-developer';
 
9
page_id = '';
 
10
base = {};
 
11
 
 
12
$(document).ready(function() {
 
13
        base.setPageId();
 
14
        base.positionNavArrow();
 
15
        base.readySearch();
 
16
        base.readyStepLinks();
 
17
        base.readyAccordion();
 
18
        base.readyFAQs();
 
19
        base.readySmoothScrolling();
 
20
        base.getTweets();
 
21
});
 
22
 
 
23
/* Init methods */
 
24
 
 
25
// Set the current page ID
 
26
base.setPageId = function() {
 
27
        page_id = base.getPageId();
 
28
};
 
29
 
 
30
// Position the arrow under the active nav item
 
31
base.positionNavArrow = function() {
 
32
        var item = $('.header-navigation li[class*="current"]');
 
33
        if (item.length !== 0) {
 
34
                var item_width = item.width();
 
35
                var item_pos = item.offset();
 
36
                var arrow = $('.arrow-nav');
 
37
                var arrow_width = arrow.width();
 
38
        
 
39
                arrow.css('left', (item_pos.left + item_width / 2 - (arrow_width / 2)) + 'px');
 
40
                arrow.css('display', 'block');
 
41
        }
 
42
}
 
43
 
 
44
// Ready the search box
 
45
base.readySearch = function() {
 
46
        var text = 'Search';
 
47
        
 
48
        // Clear and re-populate
 
49
        $('#input-search').bind({
 
50
                focus: function() {
 
51
                        if ($(this).val() == text) {
 
52
                                $(this).val('');
 
53
                                $(this).css('font-style', 'normal');
 
54
                                $(this).css('color', '#333');
 
55
                        }
 
56
                },
 
57
                blur: function() {
 
58
                        if ($(this).val() == '') {
 
59
                                $(this).val(text);
 
60
                                $(this).css('font-style', 'italic');
 
61
                                $(this).css('color', '#ccc');
 
62
                        }
 
63
                }
 
64
        })
 
65
        
 
66
        // Enter key submits form
 
67
        $('#input-search').keypress(function(e) {
 
68
                if (e.which == 13) {
 
69
                        // Handle empty searches for WP
 
70
                        if ($(this).val() == '') {
 
71
                                $(this).val(' ');
 
72
                        }
 
73
                        $('#form-search').submit();
 
74
                        e.preventDefault();
 
75
                }
 
76
        });     
 
77
}
 
78
 
 
79
// Ensure step box items are clickable
 
80
base.readyStepLinks = function() {
 
81
        if (page_id != 'home' && page_id != 'gomobile') return false;
 
82
 
 
83
         $('.box-steps li').click(function(e) {
 
84
                console.log('clicked');
 
85
                if(page_id == 'home') {
 
86
                        window.location.href = $(this).find('a').attr('href');
 
87
                } else {
 
88
                        $(this).find('a').trigger('click');
 
89
                }
 
90
        });
 
91
}
 
92
 
 
93
// Prep the accordion
 
94
base.readyAccordion = function() {
 
95
        $('.accordion').accordion({
 
96
                active: base.getAccordionActiveElement(),
 
97
                autoHeight: false
 
98
        });
 
99
        
 
100
        // Set the active link text
 
101
        base.setAccordionActiveLinkText();
 
102
};
 
103
 
 
104
// Ensure FAQ questions are clickable
 
105
base.readyFAQs = function() {
 
106
        $('.faqs dt').bind('click', function(e) {
 
107
                var description = $(this).next('dd');
 
108
                if (description.css('display') == 'none') {
 
109
                        description.fadeIn('slow');
 
110
                } else {
 
111
                        description.hide();
 
112
                }
 
113
        });
 
114
}
 
115
 
 
116
// Applies 'smooth scrolling' to anchor tags
 
117
base.readySmoothScrolling = function() {
 
118
        $('a').each(function(i) {
 
119
                if($(this).attr('href').charAt(0) ==  '#'){
 
120
                        $(this).click(function() {
 
121
                                  var elementClicked = $(this).attr("href");
 
122
                                  var destination = $(elementClicked).offset().top;
 
123
                                  $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1500 );
 
124
                                  return false;
 
125
                        });
 
126
                }
 
127
        });
 
128
}
 
129
 
 
130
// Get latest tweets
 
131
base.getTweets = function() {
 
132
 
 
133
        // Latest tweet from @ubuntuappdev
 
134
        var args = {
 
135
                username: 'ubuntuappdev',
 
136
                template: '{text}{time}',
 
137
                count: 1
 
138
        }
 
139
        $('.tweet').tweet(args);
 
140
}
 
141
 
 
142
/* Non-init methods */
 
143
 
 
144
// Get the current page ID
 
145
base.getPageId = function() {
 
146
        return $('body').attr('class');
 
147
};
 
148
 
 
149
// Get the active accordion element by parsing the URL
 
150
base.getAccordionActiveElement = function() {
 
151
        var element = 0;
 
152
        var current_page_lookup = $('.accordion .current_page_item a');
 
153
        if (current_page_lookup.length < 1) {
 
154
                return element;
 
155
        }
 
156
        var url = $('.accordion .current_page_item a')[0].toString();
 
157
        var strings = $('.accordion h3 a').map(function(i, elem) {
 
158
           var lookup = elem.toString();
 
159
           return lookup;
 
160
        }).get();
 
161
        
 
162
        // Look for a channel filter and compare it to the accordion headings
 
163
        $.each(strings, function(i, string) {
 
164
                var pattern = new RegExp(string.replace(/\s+/g, '-').replace('+', 'p'), 'i');
 
165
                if (url == string || url.match(pattern)) {
 
166
                        element = i;
 
167
                }
 
168
        });
 
169
        
 
170
        return element;
 
171
}
 
172
 
 
173
// Set the accordion active link text
 
174
base.setAccordionActiveLinkText = function() {
 
175
        var active_link = $('.accordion .current_page_item a');
 
176
        var link_text = active_link.text();
 
177
        active_link.text(link_text + '  ›');
 
178
}