added syntax toggling for example pages including: haml, html and scss, sass, css
This commit is contained in:
parent
7f7b3c5ff8
commit
2635f91049
@ -12,9 +12,9 @@ GIT
|
||||
sass (3.1.0.alpha.50)
|
||||
|
||||
PATH
|
||||
remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
|
||||
remote: ..
|
||||
specs:
|
||||
compass (0.11.alpha.3.4ab7a6c)
|
||||
compass (0.11.alpha.3.7f7b3c5)
|
||||
chunky_png (~> 0.10.3)
|
||||
sass (>= 3.1.0.alpha.50)
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
function changeTheme(theme) {
|
||||
function changeTheme(theme, setCookie) {
|
||||
el = $('html');
|
||||
|
||||
if (!theme) theme = el.hasClass('dark') ? 'light': 'dark';
|
||||
@ -10,18 +10,25 @@ function changeTheme(theme) {
|
||||
setThemePreference(theme);
|
||||
}
|
||||
|
||||
function changeSyntax(syntax) {
|
||||
function changeSyntax(style, setCookie){
|
||||
el = $('html');
|
||||
el.removeClass('scss'); el.removeClass('sass');
|
||||
el.addClass(style);
|
||||
setStyleSyntaxPreference(style);
|
||||
}
|
||||
|
||||
if (!syntax) {
|
||||
syntax = el.hasClass('scss') ? 'sass': 'scss';
|
||||
} else if (el.hasClass(syntax)) {
|
||||
return;
|
||||
}
|
||||
el.removeClass('scss');
|
||||
el.removeClass('sass');
|
||||
el.addClass(syntax);
|
||||
setSyntaxPreference(syntax);
|
||||
function changeExampleStyleSyntax(style, setCookie){
|
||||
el = $('html');
|
||||
el.removeClass('scss'); el.removeClass('sass'); el.removeClass('css');
|
||||
el.addClass(style);
|
||||
setExampleStyleSyntaxPreference(style);
|
||||
}
|
||||
|
||||
function changeExampleMarkupSyntax(markup){
|
||||
el = $('html');
|
||||
el.removeClass('haml'); el.removeClass('html');
|
||||
el.addClass(markup);
|
||||
setExampleMarkupSyntaxPreference(markup);
|
||||
}
|
||||
|
||||
function setThemePreference(theme) {
|
||||
@ -31,43 +38,78 @@ function setThemePreference(theme) {
|
||||
path: '/'
|
||||
});
|
||||
}
|
||||
|
||||
function getThemePreference(defaultTheme) {
|
||||
theme = $.cookie("compass-theme");
|
||||
if (theme) {
|
||||
changeTheme(theme);
|
||||
changeTheme(theme, false);
|
||||
} else {
|
||||
changeTheme(defaultTheme);
|
||||
changeTheme(defaultTheme, true);
|
||||
}
|
||||
}
|
||||
function setSyntaxPreference(syntax) {
|
||||
|
||||
function setStyleSyntaxPreference (mainSyntax) {
|
||||
$.cookie("compass-syntax", null);
|
||||
$.cookie("compass-syntax", syntax, {
|
||||
expires: 60 * 60 * 24 * 365 * 10,
|
||||
path: '/'
|
||||
});
|
||||
$.cookie("compass-syntax", mainSyntax, { expires: 60 * 60 * 24 * 365 * 10, path: '/' });
|
||||
}
|
||||
function getSyntaxPreference(defaultSyntax) {
|
||||
syntax = $.cookie("compass-syntax");
|
||||
if (syntax){
|
||||
changeSyntax(syntax);
|
||||
} else {
|
||||
changeSyntax(defaultSyntax);
|
||||
|
||||
function setExampleStyleSyntaxPreference (exampleStyle) {
|
||||
$.cookie("compass-example-style", null);
|
||||
$.cookie("compass-example-style", exampleStyle, { expires: 60 * 60 * 24 * 365 * 10, path: '/' });
|
||||
}
|
||||
|
||||
function setExampleMarkupSyntaxPreference (exampleMarkup) {
|
||||
$.cookie("compass-example-markup", null);
|
||||
$.cookie("compass-example-markup", exampleMarkup, { expires: 60 * 60 * 24 * 365 * 10, path: '/' });
|
||||
}
|
||||
|
||||
function getSyntaxPreference(defaultSyntax, defaultMarkup) {
|
||||
mainSyntaxCookie = $.cookie("compass-syntax");
|
||||
mainSyntax = (mainSyntaxCookie) ? mainSyntaxCookie : defaultSyntax;
|
||||
changeSyntax(mainSyntax);
|
||||
|
||||
// add example styling preferences
|
||||
if ($('body').hasClass('demo')){
|
||||
markupCookie = $.cookie("compass-example-markup");
|
||||
styleCookie = $.cookie("compass-example-style");
|
||||
|
||||
markup = (markupCookie) ? markupCookie : defaultMarkup;
|
||||
style = (styleCookie) ? styleCookie : defaultSyntax;
|
||||
|
||||
changeExampleStyleSyntax(style)
|
||||
changeExampleMarkupSyntax(markup);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
getThemePreference('dark');
|
||||
getSyntaxPreference('scss');
|
||||
|
||||
$('document').ready(function(){
|
||||
getSyntaxPreference('scss', 'html');
|
||||
|
||||
$('#page').click(function(event){
|
||||
var target = $(event.target);
|
||||
|
||||
// Set Main Syntax Preference
|
||||
if (target.parent().is('#syntax_pref')) {
|
||||
changeSyntax(target.attr("rel"));
|
||||
changeSyntax(target.attr("rel"), true);
|
||||
event.preventDefault();
|
||||
|
||||
// Set Demo page syntax preferences
|
||||
} else if (target.parent().is('.syntax_pref')) {
|
||||
event.preventDefault();
|
||||
if (target.parent().parent().is('#markup')) {
|
||||
changeExampleMarkupSyntax(target.attr("rel"), true);
|
||||
} else {
|
||||
changeExampleStyleSyntax(target.attr("rel"), true);
|
||||
}
|
||||
|
||||
// Set Theme preference
|
||||
} else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) {
|
||||
changeTheme();
|
||||
event.preventDefault();
|
||||
|
||||
// View source for mixins
|
||||
} else if (target.attr("rel") == "view source") {
|
||||
$(target.attr("href")).toggle();
|
||||
event.preventDefault();
|
||||
|
@ -168,9 +168,13 @@
|
||||
background-color: rgba(#000, .04); }
|
||||
|
||||
.horizontal-rule-light {
|
||||
@include single-box-shadow(rgba(#fff, 1), 0, 1px, 0);
|
||||
@include box-shadow(#fff 0 1px 0);
|
||||
border-bottom: 1px solid #bbb; }
|
||||
|
||||
.horizontal-rule-top-light {
|
||||
@include box-shadow(#fff 0 1px 0 inset);
|
||||
border-top: 1px solid #bbb; }
|
||||
|
||||
.vertical-rule-light {
|
||||
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
|
||||
border-right: 1px solid #bbb; }
|
||||
@ -214,17 +218,17 @@
|
||||
@mixin light-theme($docs: false) {
|
||||
$page-bg: #ececec; // image-url('bg-light.jpg');
|
||||
|
||||
$text: #222 ;
|
||||
$heading: #444;
|
||||
$text: #111;
|
||||
$heading: #222;
|
||||
$strong-text: #000;
|
||||
|
||||
$search: #666;
|
||||
|
||||
$link: #307eb6;
|
||||
$nav-link: #555;
|
||||
$nav-link: #444;
|
||||
$code: #222;
|
||||
|
||||
$main-nav: #555;
|
||||
$main-nav: #000;
|
||||
$main-nav-selected: darken(#fb292d, 15);
|
||||
$docs-nav-selected: $strong-text;
|
||||
$module-nav-selected: $link;
|
||||
|
@ -1,4 +1,21 @@
|
||||
- render 'main' do
|
||||
- render 'basic' do
|
||||
- content_for(:additional_css) do
|
||||
= example_css
|
||||
%article= yield
|
||||
#wrap
|
||||
= render "partials/main-navigation"
|
||||
#page
|
||||
#docs_panel
|
||||
#theme_pref
|
||||
%a{:href => "#", :rel => "theme", :title => "switch theme" } Q
|
||||
#syntax_pref
|
||||
%a{:href => "#", :rel => "scss" } scss
|
||||
%a{:href => "#", :rel => "sass" } sass
|
||||
#version
|
||||
Version:
|
||||
%a.number(href="/CHANGELOG/")= compass_version
|
||||
%article= yield
|
||||
-#comments= render "partials/disqus_comments"
|
||||
%footer(role="contentinfo")= render "partials/footer"
|
||||
= @item[:content_for_javascripts]
|
||||
= render "partials/analytics"
|
||||
<script type="text/javascript">SyntaxHighlighter.all();</script>
|
||||
|
@ -5,12 +5,10 @@
|
||||
|
||||
#how
|
||||
%section#markup
|
||||
%nav
|
||||
%ul
|
||||
%li
|
||||
%a{:href => "#html"} html
|
||||
%li
|
||||
%a{:href => "#haml"} haml
|
||||
.syntax_pref
|
||||
%a{:href => "#", :rel => "html" } html
|
||||
%a{:href => "#", :rel => "haml" } haml
|
||||
|
||||
.code
|
||||
%ul
|
||||
%li#html
|
||||
@ -18,14 +16,10 @@
|
||||
%li#haml
|
||||
%pre= h(example_haml)
|
||||
%section#styles
|
||||
%nav
|
||||
%ul
|
||||
%li
|
||||
%a{:href => "#scss"} scss
|
||||
%li
|
||||
%a{:href => "#sass"} sass
|
||||
%li
|
||||
%a{:href => "#css"} css
|
||||
.syntax_pref
|
||||
%a{:href => "#", :rel => "scss" } scss
|
||||
%a{:href => "#", :rel => "sass" } sass
|
||||
%a{:href => "#", :rel => "css" } css
|
||||
.code
|
||||
%ul
|
||||
%li#scss
|
||||
|
Loading…
Reference in New Issue
Block a user