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)
|
sass (3.1.0.alpha.50)
|
||||||
|
|
||||||
PATH
|
PATH
|
||||||
remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
|
remote: ..
|
||||||
specs:
|
specs:
|
||||||
compass (0.11.alpha.3.4ab7a6c)
|
compass (0.11.alpha.3.7f7b3c5)
|
||||||
chunky_png (~> 0.10.3)
|
chunky_png (~> 0.10.3)
|
||||||
sass (>= 3.1.0.alpha.50)
|
sass (>= 3.1.0.alpha.50)
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
function changeTheme(theme) {
|
function changeTheme(theme, setCookie) {
|
||||||
el = $('html');
|
el = $('html');
|
||||||
|
|
||||||
if (!theme) theme = el.hasClass('dark') ? 'light': 'dark';
|
if (!theme) theme = el.hasClass('dark') ? 'light': 'dark';
|
||||||
@ -10,18 +10,25 @@ function changeTheme(theme) {
|
|||||||
setThemePreference(theme);
|
setThemePreference(theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeSyntax(syntax) {
|
function changeSyntax(style, setCookie){
|
||||||
el = $('html');
|
el = $('html');
|
||||||
|
el.removeClass('scss'); el.removeClass('sass');
|
||||||
|
el.addClass(style);
|
||||||
|
setStyleSyntaxPreference(style);
|
||||||
|
}
|
||||||
|
|
||||||
if (!syntax) {
|
function changeExampleStyleSyntax(style, setCookie){
|
||||||
syntax = el.hasClass('scss') ? 'sass': 'scss';
|
el = $('html');
|
||||||
} else if (el.hasClass(syntax)) {
|
el.removeClass('scss'); el.removeClass('sass'); el.removeClass('css');
|
||||||
return;
|
el.addClass(style);
|
||||||
}
|
setExampleStyleSyntaxPreference(style);
|
||||||
el.removeClass('scss');
|
}
|
||||||
el.removeClass('sass');
|
|
||||||
el.addClass(syntax);
|
function changeExampleMarkupSyntax(markup){
|
||||||
setSyntaxPreference(syntax);
|
el = $('html');
|
||||||
|
el.removeClass('haml'); el.removeClass('html');
|
||||||
|
el.addClass(markup);
|
||||||
|
setExampleMarkupSyntaxPreference(markup);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setThemePreference(theme) {
|
function setThemePreference(theme) {
|
||||||
@ -31,43 +38,78 @@ function setThemePreference(theme) {
|
|||||||
path: '/'
|
path: '/'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function getThemePreference(defaultTheme) {
|
function getThemePreference(defaultTheme) {
|
||||||
theme = $.cookie("compass-theme");
|
theme = $.cookie("compass-theme");
|
||||||
if (theme) {
|
if (theme) {
|
||||||
changeTheme(theme);
|
changeTheme(theme, false);
|
||||||
} else {
|
} else {
|
||||||
changeTheme(defaultTheme);
|
changeTheme(defaultTheme, true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function setSyntaxPreference(syntax) {
|
|
||||||
|
function setStyleSyntaxPreference (mainSyntax) {
|
||||||
$.cookie("compass-syntax", null);
|
$.cookie("compass-syntax", null);
|
||||||
$.cookie("compass-syntax", syntax, {
|
$.cookie("compass-syntax", mainSyntax, { expires: 60 * 60 * 24 * 365 * 10, path: '/' });
|
||||||
expires: 60 * 60 * 24 * 365 * 10,
|
|
||||||
path: '/'
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
function getSyntaxPreference(defaultSyntax) {
|
|
||||||
syntax = $.cookie("compass-syntax");
|
function setExampleStyleSyntaxPreference (exampleStyle) {
|
||||||
if (syntax){
|
$.cookie("compass-example-style", null);
|
||||||
changeSyntax(syntax);
|
$.cookie("compass-example-style", exampleStyle, { expires: 60 * 60 * 24 * 365 * 10, path: '/' });
|
||||||
} else {
|
}
|
||||||
changeSyntax(defaultSyntax);
|
|
||||||
|
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');
|
getThemePreference('dark');
|
||||||
getSyntaxPreference('scss');
|
|
||||||
|
|
||||||
$('document').ready(function(){
|
$('document').ready(function(){
|
||||||
|
getSyntaxPreference('scss', 'html');
|
||||||
|
|
||||||
$('#page').click(function(event){
|
$('#page').click(function(event){
|
||||||
var target = $(event.target);
|
var target = $(event.target);
|
||||||
|
|
||||||
|
// Set Main Syntax Preference
|
||||||
if (target.parent().is('#syntax_pref')) {
|
if (target.parent().is('#syntax_pref')) {
|
||||||
changeSyntax(target.attr("rel"));
|
changeSyntax(target.attr("rel"), true);
|
||||||
event.preventDefault();
|
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')) {
|
} else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) {
|
||||||
changeTheme();
|
changeTheme();
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
|
// View source for mixins
|
||||||
} else if (target.attr("rel") == "view source") {
|
} else if (target.attr("rel") == "view source") {
|
||||||
$(target.attr("href")).toggle();
|
$(target.attr("href")).toggle();
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
@ -168,9 +168,13 @@
|
|||||||
background-color: rgba(#000, .04); }
|
background-color: rgba(#000, .04); }
|
||||||
|
|
||||||
.horizontal-rule-light {
|
.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; }
|
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 {
|
.vertical-rule-light {
|
||||||
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
|
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
|
||||||
border-right: 1px solid #bbb; }
|
border-right: 1px solid #bbb; }
|
||||||
@ -214,17 +218,17 @@
|
|||||||
@mixin light-theme($docs: false) {
|
@mixin light-theme($docs: false) {
|
||||||
$page-bg: #ececec; // image-url('bg-light.jpg');
|
$page-bg: #ececec; // image-url('bg-light.jpg');
|
||||||
|
|
||||||
$text: #222 ;
|
$text: #111;
|
||||||
$heading: #444;
|
$heading: #222;
|
||||||
$strong-text: #000;
|
$strong-text: #000;
|
||||||
|
|
||||||
$search: #666;
|
$search: #666;
|
||||||
|
|
||||||
$link: #307eb6;
|
$link: #307eb6;
|
||||||
$nav-link: #555;
|
$nav-link: #444;
|
||||||
$code: #222;
|
$code: #222;
|
||||||
|
|
||||||
$main-nav: #555;
|
$main-nav: #000;
|
||||||
$main-nav-selected: darken(#fb292d, 15);
|
$main-nav-selected: darken(#fb292d, 15);
|
||||||
$docs-nav-selected: $strong-text;
|
$docs-nav-selected: $strong-text;
|
||||||
$module-nav-selected: $link;
|
$module-nav-selected: $link;
|
||||||
|
@ -1,4 +1,21 @@
|
|||||||
- render 'main' do
|
- render 'basic' do
|
||||||
- content_for(:additional_css) do
|
- content_for(:additional_css) do
|
||||||
= example_css
|
= example_css
|
||||||
|
#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
|
%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
|
#how
|
||||||
%section#markup
|
%section#markup
|
||||||
%nav
|
.syntax_pref
|
||||||
%ul
|
%a{:href => "#", :rel => "html" } html
|
||||||
%li
|
%a{:href => "#", :rel => "haml" } haml
|
||||||
%a{:href => "#html"} html
|
|
||||||
%li
|
|
||||||
%a{:href => "#haml"} haml
|
|
||||||
.code
|
.code
|
||||||
%ul
|
%ul
|
||||||
%li#html
|
%li#html
|
||||||
@ -18,14 +16,10 @@
|
|||||||
%li#haml
|
%li#haml
|
||||||
%pre= h(example_haml)
|
%pre= h(example_haml)
|
||||||
%section#styles
|
%section#styles
|
||||||
%nav
|
.syntax_pref
|
||||||
%ul
|
%a{:href => "#", :rel => "scss" } scss
|
||||||
%li
|
%a{:href => "#", :rel => "sass" } sass
|
||||||
%a{:href => "#scss"} scss
|
%a{:href => "#", :rel => "css" } css
|
||||||
%li
|
|
||||||
%a{:href => "#sass"} sass
|
|
||||||
%li
|
|
||||||
%a{:href => "#css"} css
|
|
||||||
.code
|
.code
|
||||||
%ul
|
%ul
|
||||||
%li#scss
|
%li#scss
|
||||||
|
Loading…
Reference in New Issue
Block a user