1. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Vasily Yaremchuk
Single Page Website
experience in the design of the module
Successful Development LP

2. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Agenda
 What are the Single Page Sites?
 Background of Drupal module
 Discussion of the difficulties
 Drupal Sandbox as a storage of your custom module
 Different issues and changes in module settings approach
 Architecture of the module
 Roadmap
 Conclusion & Questions

3. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Single Page Website
excellent example
• http://www.volll.com
See more in Google :-)

4. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
How to do Single Page Site in Drupal Environment?
• Fixed Header and Footer Logo
Header
Main menu
• Anchor links in Main menu
Content area
Footer

5. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
How to get content of the different
pages to this page?
• AJAX request to the other pages
• Drupal API functions (node_load fore
example)
• CURL or file_get_contents()

6. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
The following solution is proposed:
Main menu: first second third Create wrappers for each “sub page”
by module
#first $(“#first").load(first_url+" "+content_selector);
#second $(“#second").load(second_url+" "+content_selector);
#third $(“#third").load(third_url+" "+content_selector);
Get content of each wrapper by AJAX

7. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Weak Points
• Drupal is runs many times
• There is no simple content amount
limitation.
• Content is loaded asynchronously
(AJAX).

8. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Strong Points
• We can show any page on the site,
even to build by custom module
without worrying about how it is
created inside Drupal
• Page loads not all at once, but by parts.
But we must ensure that the upper sub-page is
loaded faster than anyone else

9. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Sandbox (experimental) projects
The image below illustrate some differents of sandbox
projects compare with full projects:

10. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Promoting sandbox project to full project
• Create a new issue in the Project Applications
queue
• You should be sure that your code corresponds to
the Drupal coding standards
- Coder module (http://drupal.org/project/coder)
- Conventions (http://drupal.org/coding-standards#naming)
- hook_install and hook_uninstall, dependencies
- ScreenCast how to install and setup the module
- Try new module in different conditions (inst. prof.)

11. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Layout issue (different themes)
Different html structure and Logo
Header
different names of selectors Main menu
in each Drupal them
two ways to solve this issue:
Content area
1. Complex settings page
Footer
2. Limited number of
supported themes (prepare
list of presets for each
allowed theme)

12. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Complex settings way
Admin should have advansed
level in HTML&CSS
The page of module settings
will be too difficult to fill
Admin should find out the IDs
of all necessary DOM selectors
by FireBug for example

13. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Limited list of themes: final solution
• Module works only in allowed theme environment
• Now Bartik and Zen with sub-themes supported
only

14. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Overflow issue
Solutions:
- visible (show all content)
- hidden (cut content
according window height)
- scroll (provide vertical
scroll if overflow appeared)

15. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
How to change active theme?
• hook_menu or hook_menu_alter:
$items['your_path'] = array( Function your_callback_func()
... should return the machine-readable
'theme callback' => 'your_callback_func', name of the theme,
'theme arguments' => array(1), for example 'bartik'.
... You should be sure that
); the them exists and is enabled.
• You can use hook_custom_theme if the choice of theme
doesn't depend on the path
This hook also should return the machine-readable name of the theme
• You can overwrite 'theme_default' Drupal system variable
variable_set('theme_default', 'your_theme_machine-readable_name');

16. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Scripts and Styles issues
• When we get content of some HTML DOM selector of the
other Drupal page we should be sure that there is no
some specific JS or CSS added by drupal_add_js() and
drupal_add_css() related to this part of page content.
• Also when we get content by AJAX some actions in JS
that work when the document ready does not affected on
content that we get by AJAX.
(function($){
$(document).ready(function(){
// code that is placed here can not work out for the content
// that will get from the other pages by AJAX
});
})(jQuery);

17. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Architecture of the module
Module are allowed to compile Single Page Website
in Bartik theme and it’s sub-themes only at the
current stage of the development
The following files included in module pack:
single_page_website.info - dependencies[] = "menu"
single_page_website.module - hook_permission(), hook_menu()
single_page_website.install - hook_uninstall() - clear variables
single_page_website.admin.inc - module settings form
README.txt - user manual, useful links
js/scroll.js - them independent scrolling functions
js/bartik.js - some JS settings individual for Bartik theme
js/bartik.ini - DOM selector settings for Bartik theme

18. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Roadmap
 Support more popular themes and it’s sub-
themes
 Testing with SimpleTest (create .test file in
the module package)
 Advanced settings tab on module settings page
 More different effects of switching pages

19. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Useful links
http://www.cooper.com/#about:books
The Inmates Are Running the Asylum: Why High Tech Products Drive Us
Crazy and How to Restore the Sanity by Alan Cooper
http://drupal.org/coding-standards
http://drupal.org/node/1138960
The discursion with reviewers about Single Page Website module
http://drupal.org/project/single_page_website
Single Page Website project page

20. Vasily Yaremchuk: Single Page Website. Try out a demonstration: http://yaremchuk.ru
Please, ask your Questions!
Vasily Yaremchuk
Successful Development LP
http://php.sfdev.com
Contacts:
www.yaremchuk.ru
vaso1977@gmail.com
vasilyyaremchuk