Vasily Yaremchuk presented on his Single Page Website module for Drupal. The module allows building single page sites in Drupal by loading content asynchronously from different pages via AJAX. It currently supports the Bartik theme. Issues discussed included layout differences between themes, overflow handling, and ensuring scripts and styles load properly. The roadmap includes supporting more themes and advanced testing. Questions were invited at the end of the presentation.

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. Gold Sponsor of
DrupalCamp Kyiv 2011

3. Silver Sponsors of
DrupalCamp Kyiv 2011

4. 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

5. 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 :-)

6. 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

7. 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()

8. 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

9. 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).

10. 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

11. 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:

12. 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.)

13. 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)

14. 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

15. 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

16. 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)

17. 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');

18. 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);

19. 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

20. 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

21. 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/sandbox/vasilyyaremchuk/1131866
Single Page Website project page

22. 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