Browse files

Added off-canvas layouts.

  • Loading branch information...
1 parent 87bf9ff commit 746e7e7ee3b3bed2642462d5923b94e561b25ce2 @antonydoyle committed Oct 14, 2012
Showing with 189 additions and 12 deletions.
  1. +44 −0 css/offcanvas.css
  2. +15 −3 framework.php
  3. +8 −1 index.php
  4. +12 −0 js/app.js
  5. +50 −0 js/jquery.offcanvas.js
  6. +6 −4 language/en-GB/en-GB.tpl_siegeengine.ini
  7. +41 −4 layouts/default.php
  8. +13 −0 templateDetails.xml
View
44 css/offcanvas.css
@@ -0,0 +1,44 @@
+@charset "UTF-8";
+/* Foundation 3, artfully masterminded by ZURB Addition offcanvas.css - Specific CSS for off-canvas layouts Off canvas layout CSS/JS provided by or adapted from work by Jason Weaver and Luke Wroblewski
+ Requires: globals.css grid.css
+*/
+body.off-canvas { padding: 0; margin: 0; }
+
+
+[role="main"]:before { content: " "; position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%; -webkit-box-shadow: inset -3px 0px 6px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset -3px 0px 6px 0px rgba(0, 0, 0, 0.15); box-shadow: inset -3px 0px 6px 0px rgba(0, 0, 0, 0.15); }
+
+[role="complementary"], [role="main"] { width: 100%; padding: 0 15px; display: block; position: relative; z-index: 1; -webkit-transition: 0.25s all ease-in; -moz-transition: 0.25s all ease-in; -ms-transition: 0.25s all ease-in; -o-transition: 0.25s all ease-in; transition: 0.25s all ease-in; }
+
+.paneled [role="main"] { padding: 0; }
+
+.page-panel { width: 100%; padding: 0 15px; -webkit-transition: 0.3s margin ease-in-out; -moz-transition: 0.3s margin ease-in-out; -ms-transition: 0.3s margin ease-in-out; -o-transition: 0.3s margin ease-in-out; transition: 0.3s margin ease-in-out; }
+
+#switchPanels { margin: 0 -15px; }
+
+.hide-extras [role="complementary"] { display: block; }
+
+[role="navigation"]#topMenu { -webkit-transition: 0.25s all ease-in; -moz-transition: 0.25s all ease-in; -ms-transition: 0.25s all ease-in; -o-transition: 0.25s all ease-in; transition: 0.25s all ease-in; }
+
+[role="navigation"]#topMenu ul { margin-top: 0; }
+
+.js [role="complementary"] { margin-left: -100%; width: 80%; float: left; z-index: 2;background:#CCCCCC; }
+.js [role="main"] { margin-left: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; float: right; z-index: 1; position: relative; }
+.js .paneled [role="main"] { width: 500%; overflow: hidden; float: none; position: relative; left: 0; -webkit-transition: 0.15s all ease-in; -moz-transition: 0.15s all ease-in; -ms-transition: 0.15s all ease-in; -o-transition: 0.15s all ease-in; transition: 0.15s all ease-in; }
+.js .page-panel { min-height: 400px; float: left; margin: 0; width: 20%; }
+
+.active [role="complementary"] { margin-left: 0; }
+
+.active [role="main"] { margin-right: -80%; }
+
+.active-menu [role="navigation"]#topMenu { margin-top: 0 !important; }
+
+@media all and (min-width: 768px) { .js menu-button, .js .sidebar-button { display: none; }
+ .js [role="complementary"] { width: 33.34%; margin-left: 0; float: left; padding: 0 15px; }
+ .js [role="main"] { width: 66.66%; padding: 0 15px; }
+ .js .paneled [role="main"] { width: 100%; padding: 0; left: 0 !important; }
+ .js .page-panel { display: block; min-height: 800px; float: none; margin: 0; width: 100%; }
+ .js .hide-extras [role="main"] { width: 100%; }
+ .js .hide-extras [role="complementary"] { display: none; }
+ .js [role="navigation"]#topMenu { display: none; } }
+/* CSS Document */
+
View
18 framework.php
@@ -24,7 +24,10 @@
$unAlerts = $this->params->get('unAlerts');
$minFound = $this->params->get('minFound');
$setWidth = $this->params->get('setWidth');
-$templateLayout = $this->params->get('layout');
+$templateLayout = $this->params->get('layout');
+$offCanvas = $this->params->get('offCanvas');
+$topButton = $this->params->get('topButton');
+$sideButton = $this->params->get('sideButton');
$pageTitle = $this->getTitle();
$option = JRequest::getCmd('option');
@@ -38,6 +41,12 @@
}
// Count Modules & Stuff
+$offCanvasSideMenu = (int) ($this->countModules('offCanvasSideMenu') > 0);
+$offCanvasSideModule = (int) ($this->countModules('offCanvasSideModule') > 0);
+
+$offCanvasTopMenu = (int) ($this->countModules('offCanvasTopMenu') > 0);
+$offCanvasTopModule = (int) ($this->countModules('offCanvasTopModule') > 0);
+
$logo = (int) ($this->countModules('logo') > 0);
$menu = (int) ($this->countModules('menu') > 0);
@@ -197,6 +206,7 @@
$doc->addStyleSheet($template.'/css/templateCore.css');
$doc->addCustomTag('<script src="'.$template.'/js/modernizr.foundation.js"></script>');
+
if ($minFound > 0) {
$doc->addCustomTag('<script src="'.$template.'/js/foundation.js"></script>');
}
@@ -245,5 +255,7 @@
$doc->addCustomTag('<script src="'.$template.'/js/jquery.foundation.alerts.js"></script>');
}
}
-
-
+ if ($offCanvas > 0) {
+ $doc->addStyleSheet($template.'/css/offcanvas.css');
+ $doc->addCustomTag('<script src="'.$template.'/js/jquery.offcanvas.js"></script>');
+ }
View
9 index.php
@@ -40,12 +40,19 @@
})();
</script>
</head>
-
+ <?php if ($offCanvas > 0) { ?>
+<body class="off-canvas hide-extras slide-nav">
+<?php } else {?>
<body>
+<?php }?>
+
+
<?php
// Load template layout
include_once JPATH_THEMES . '/' . $this->template . '/layouts/'.$templateLayout.'';
?>
+
+
</body>
</html>
View
12 js/app.js
@@ -44,3 +44,15 @@
}
})(jQuery, this);
+
+
+ ;(function($, window, undefined) {
+ $(document).ready(function() {
+ $('.toggle-switch label').bind('click', function(e) {
+ var $checkbox = $(this).siblings('input');
+ e.preventDefault();
+ $checkbox.attr('checked', !$checkbox.attr('checked'));
+ });
+ });
+ })(jQuery, this);
+
View
50 js/jquery.offcanvas.js
@@ -0,0 +1,50 @@
+$(function() {
+ // Set the negative margin on the top menu for slide-menu pages
+ var $selector1 = $('#topMenu'),
+ events = 'click.fndtn touchstart.fndtn';
+ if ($selector1.length > 0) $selector1.css("margin-top", $selector1.height() * -1);
+
+ // Watch for clicks to show the sidebar
+ var $selector2 = $('#sidebarButton');
+ if ($selector2.length > 0) {
+ $('#sidebarButton').on(events, function(e) {
+ e.preventDefault();
+ $('body').toggleClass('active');
+ });
+ }
+
+ // Watch for clicks to show the menu for slide-menu pages
+ var $selector3 = $('#menuButton');
+ if ($selector3.length > 0) {
+ $('#menuButton').on(events, function(e) {
+ e.preventDefault();
+ $('body').toggleClass('active-menu');
+ });
+ }
+
+ // Adjust sidebars and sizes when resized
+ $(window).resize(function() {
+ $('body').removeClass('active');
+ var $selector4 = $('#topMenu');
+ if ($selector4.length > 0) $selector4.css("margin-top", $selector4.height() * -1);
+ });
+
+ // Switch panels for the paneled nav on mobile
+ var $selector5 = $('#switchPanels');
+ if ($selector5.length > 0) {
+ $('#switchPanels dd').on(events, function(e) {
+ e.preventDefault();
+ var switchToPanel = $(this).children('a').attr('href'),
+ switchToIndex = $(switchToPanel).index();
+ $(this).toggleClass('active').siblings().removeClass('active');
+ $(switchToPanel).parent().css("left", (switchToIndex * (-100) + '%'));
+ });
+ }
+
+ $('#nav li a').on(events, function(e) {
+ e.preventDefault();
+ var href = $(this).attr('href'),
+ $target = $(href);
+ $('html, body').animate({scrollTop : $target.offset().top}, 300);
+ });
+});
View
10 language/en-GB/en-GB.tpl_siegeengine.ini
@@ -187,10 +187,12 @@ TPL_SETTINGS_SETWIDTH_DESC="Specify the template width in px. Leave blank for de
TPL_SETTINGS_LAYOUT_LABEL="Choose Layout"
TPL_SETTINGS_LAYOUT_DESC="Choose template layout. You can create your own using default.php as a basis and place the file in the 'layouts' in the template folder."
-
-
-
-
+TPL_SETTINGS_OFFCANVAS_LABEL="Turn on Off Canvas Layout?"
+TPL_SETTINGS_TPL_SETTINGS_OFFCANVAS_DESC="Loads the Off Canvas layout specific CSS and activates some template layout features."
+TPL_SETTINGS_TOPBUT_LABEL="Top Off-Canvas Button Label"
+TPL_SETTINGS_TOPBUT_DESC="The label for the top off-canvas toggle button"
+TPL_SETTINGS_SIDEBUT_LABEL="Side Off-Canvas Button Label"
+TPL_SETTINGS_SIDEBUT_DESC="The label for the side off-canvas toggle button"
View
45 layouts/default.php
@@ -1,4 +1,11 @@
-
+<?php if ($offCanvas > 0) { ?>
+ <nav id="topMenu" role="navigation">
+ <jdoc:include type="modules" name="offCanvasTopMenu" style="none" />
+ </nav>
+ <div class="row">
+ <jdoc:include type="modules" name="offCanvasTopModule" style="html5" />
+ </div>
+ <?php } ?>
<!--Logo / Nav Row -->
<div class="row">
@@ -13,12 +20,39 @@
<?php }; ?>
</div>
<?php if ($menu > 0) : ?>
- <nav class="nine columns">
+ <?php if ($offCanvas > 0) { ?>
+ <nav id="menu" role="navigation" class="nine columns hide-for-small">
+ <jdoc:include type="modules" name="menu" style="none" />
+ </nav>
+ <p class="show-for-small">
+ <?php if ($offCanvasTopMenu > 0 or $offCanvasTopModule > 0) { ?>
+ <a class='menu-button button' id="menuButton" href="#menu"><?php echo $topButton ?></a>
+ <?php } ?>
+ <?php if ($offCanvasSideMenu > 0 or $offCanvasSideModule > 0) { ?>
+ <a class='sidebar-button button' id="sidebarButton" href="#sidebar"><?php echo $sideButton ?></a>
+ <?php } ?>
+ </p>
+ <? } else { ?>
+ <nav id="menu" role="navigation" class="nine columns">
<jdoc:include type="modules" name="menu" style="none" />
</nav>
+ <?php } ?>
<?php endif; ?>
</div>
-
+ <?php if ($offCanvas > 0) { ?>
+ <section id="sidebar" role="complementary">
+ <?php if ($offCanvasSideMenu > 0) { ?>
+ <nav id="sideMenu" role="navigation">
+ <jdoc:include type="modules" name="offCanvasSideMenu" style="none" />
+ </nav>
+ <?php } ?>
+ <?php if ($offCanvasSideModule > 0) { ?>
+ <jdoc:include type="modules" name="offCanvasSideModule" style="html5" />
+ <?php } ?>
+
+ </section>
+ <section role="main">
+<?php } else { }?>
<!--Orbit Row -->
<div class="row">
<?php if ($orbit > 0) : ?>
@@ -66,6 +100,7 @@
<?php endif; ?>
<div class="<?php echo htmlspecialchars($mainWidth); ?>">
+
<?php if ($above1 > 0) : ?>
<div class="<?php echo $aboveWidth ?>">
<jdoc:include type="modules" name="above1" style="html5" />
@@ -170,7 +205,9 @@
</div>
<?php endif; ?>
</div>
-
+<?php if ($offCanvas > 0) { ?>
+ </section>
+ <?php } else {} ?>
<!-- Initialize JS Plugins -->
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/app.js"></script>
View
13 templateDetails.xml
@@ -49,6 +49,10 @@
<position>footerTop2</position>
<position>footerTop3</position>
<position>footerTop4</position>
+ <position>offCanvasSideMenu</position>
+ <position>offCanvasSideModule</position>
+ <position>offCanvasTopMenu</position>
+ <position>offCanvasTopModule</position>
<position>debug</position>
</positions>
@@ -81,6 +85,15 @@
<option value="0">TPL_SETTINGS_LOGO_SELECT_MOD</option>
</field>
<field name="custLogo" label="TPL_SETTINGS_LOGO_CUS_LABEL" description="TPL_SETTINGS_LOGO_CUS_DESC" type="media" directory="stories" />
+
+ <field name="offCanvas" type="radio" default="1" label="TPL_SETTINGS_OFFCANVAS_LABEL" description="TPL_SETTINGS_TPL_SETTINGS_OFFCANVAS_DESC">
+ <option value="1">TPL_SETTINGS_FOUNDATION_ALL_YES</option>
+ <option value="0">TPL_SETTINGS_FOUNDATION_ALL_NO</option>
+ </field>
+
+ <field name="topButton" type="text" default="Top" label="TPL_SETTINGS_TOPBUT_LABEL" description="TPL_SETTINGS_TOPBUT_DESC" size="15" />
+ <field name="sideButton" type="text" default="Side" label="TPL_SETTINGS_SIDEBUT_LABEL" description="TPL_SETTINGS_SIDEBUT_DESC" size="15" />
+
</fieldset>
<fieldset name="Foundation Options" label="TPL_SETTINGS_FOUNDATION_OPTIONS_LABEL" addfieldpath="/templates/siegeengine/" >

0 comments on commit 746e7e7

Please sign in to comment.