From 18b07e6ccd6002efb8c81133b2cfedaf9a5b1c64 Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Tue, 18 Nov 2014 10:51:18 -0800 Subject: [PATCH 1/2] Fix Bug 1102508: Link Syntax to Syntax Help Article Added javascript to detect syntaxbox and twopartsyntaxbox and create a link to help articles based on if there is a CSS class identifying the language, falling back to the language the section is in if there is not. Added CSS to style the link. --- media/redesign/js/wiki.js | 102 ++++++++++++++++++ .../stylus/wiki-syntax-syntaxbox.styl | 21 ++++ 2 files changed, 123 insertions(+) diff --git a/media/redesign/js/wiki.js b/media/redesign/js/wiki.js index 4b199a7a8b3..5f8766078e4 100644 --- a/media/redesign/js/wiki.js +++ b/media/redesign/js/wiki.js @@ -188,6 +188,108 @@ doc.body.appendChild(syntaxScript); })(); + /* + Add link to syntax explanations + */ + (function(){ + // possible syntax languages and links to resources for reading them + var syntaxSections = { + css: { + link: 'docs/Web/CSS/Value_definition_syntax', + title: 'How to read CSS syntax.', // how do I localize this + urlTest: '/docs/Web/CSS/', + classTest: 'brush:css' + }, + /* these languages do not have syntax articles yet but it's important + to have the classTest and section tests available when deciding + if there is a matching language for the purposes of creating the + link, adding a link and title later will cause them to be linked */ + html: { + urlTest: '/docs/Web/HTML/', + classTest: 'brush:html' + }, + js: { + urlTest: '/docs/Web/JavaScript/', + classTest: 'brush:js' + }, + api: { + urlTest: '/docs/Web/API/', + classTest: 'brush:js' + } + }; + + // check if there is any syntax on the page to add links to + var $boxes = $('.syntaxbox, .twopartsyntaxbox'); + + if($boxes.length) { + /* run the section and page matching logic + - isLinkMatch becomes true if we're already on one of the syntax articles + - sectionMatch becomes the link to a wiki article if we're in a section of + the site that has a matching wiki syntax article + */ + var isLinkMatch = false; + var sectionMatch; + for (var section in syntaxSections) { + var sectionLink = syntaxSections[section].link; + var sectionTest = syntaxSections[section].urlTest; + if(window.location.href.indexOf(sectionLink) > -1) { + isLinkMatch = true; + } + if(window.location.href.indexOf(sectionTest) > -1) { + sectionMatch = syntaxSections[section]; + } + } + + // if we're not already reading an article on syntax... + if(!isLinkMatch){ + // loop through boxes + $boxes.each(function() { + var $thisBox = $(this); + + // determine language + var syntaxLanguage; + + // pick CSS if it has class twopartsyntaxbox, this should only ever have CSS in it + if($thisBox.hasClass('twopartsyntaxbox')) { + syntaxLanguage = syntaxSections.css; + } + + // check if there is a class on the box matching a language (sets to last match) + // overrides .twopartsyntaxbox, that's good + for (var section in syntaxSections) { + var classTest = syntaxSections[section].classTest; + if($thisBox.hasClass(classTest)) { + syntaxLanguage = syntaxSections[section]; + } + } + + // if we still don't have a match fall back to the language the section is in + if (!syntaxLanguage && sectionMatch) { + syntaxLanguage = sectionMatch; + } + + // check we have identified matching help text and links + if(syntaxLanguage) { + // check that we have the objects we need to add the help text for this language + if(syntaxLanguage.link && syntaxLanguage.title) { + var syntaxLink = syntaxLanguage.link; + var syntaxTitle = syntaxLanguage.title; + + // add the help text and link to the page + var $helpLink = $('' + syntaxTitle + ''); + $thisBox.before($helpLink); + + // show help text on mouseover (CSS handles focus) + $thisBox.on('mouseenter', function(){$helpLink.addClass('isOpaque');}); + $thisBox.on('mouseleave', function(){$helpLink.removeClass('isOpaque');}); + } + } + }); + } + } + })(); + + /* Set up the scrolling TOC effect */ diff --git a/media/redesign/stylus/wiki-syntax-syntaxbox.styl b/media/redesign/stylus/wiki-syntax-syntaxbox.styl index f916d17b57c..357b74d40cb 100644 --- a/media/redesign/stylus/wiki-syntax-syntaxbox.styl +++ b/media/redesign/stylus/wiki-syntax-syntaxbox.styl @@ -21,3 +21,24 @@ pre.twopartsyntaxbox code[class*="language-"] { white-space: pre-line; } +.syntaxbox-help { + height: 1.2em; + float: left; + font-size: $larger-font-size; + margin-left: -1.1em; /* width of icon */ + margin-top: -4px; + opacity: 0; + overflow: hidden; + position: relative; + text-align: center; + width: 1.1em; + + &.isOpaque, + &:hover, + &:focus { + opacity: 1; + } +} + +/* show on hover */ +/* show when tabbed to, make focusable */ From a74d74840cc2a015b839b3cb206f8cb89b47fd40 Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Fri, 12 Dec 2014 12:04:37 -0800 Subject: [PATCH 2/2] Fix Bug 1102508: Link Syntax to Syntax Help Article Prevent prism from styling syntaxbox and twopartysyntaxbox so that we can link the syntax to articles explaining it. Update styles so they're still styled correctly without prism. --- media/js/syntax-prism.js | 2 +- media/redesign/js/wiki.js | 2 +- media/redesign/stylus/base/elements/typography.styl | 5 +++-- media/redesign/stylus/wiki-syntax-syntaxbox.styl | 12 ++++++++---- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/media/js/syntax-prism.js b/media/js/syntax-prism.js index b5e2d7d4b6e..fcaf63c9dcf 100644 --- a/media/js/syntax-prism.js +++ b/media/js/syntax-prism.js @@ -10,7 +10,7 @@ var defaultBrush = 'html'; // Treat and highlight PRE elements! - $('article pre').each(function() { + $('article pre:not(.twopartsyntaxbox):not(.syntaxbox)').each(function() { var $pre = $(this); var klass = $.trim($pre.attr('class')); diff --git a/media/redesign/js/wiki.js b/media/redesign/js/wiki.js index 5f8766078e4..9014bbeb165 100644 --- a/media/redesign/js/wiki.js +++ b/media/redesign/js/wiki.js @@ -196,7 +196,7 @@ var syntaxSections = { css: { link: 'docs/Web/CSS/Value_definition_syntax', - title: 'How to read CSS syntax.', // how do I localize this + title: gettext('How to read CSS syntax.'), urlTest: '/docs/Web/CSS/', classTest: 'brush:css' }, diff --git a/media/redesign/stylus/base/elements/typography.styl b/media/redesign/stylus/base/elements/typography.styl index 7999218f058..1aab0995286 100644 --- a/media/redesign/stylus/base/elements/typography.styl +++ b/media/redesign/stylus/base/elements/typography.styl @@ -117,10 +117,11 @@ blockquote { pre, code { - font-family: 'Courier New', 'Andale Mono', monospace; + font-family: Consolas, Monaco, 'Andale Mono', monospace; /* match Prism */ margin-bottom: $content-block-margin; } +/* pre is a block element so it gets a bit more fancy styling */ pre { set-font-size($base-font-size); line-height: 19px; @@ -130,11 +131,11 @@ pre { overflow: auto; } +/* code may appear inline in headings, we want to match the font weight of the element its nested in */ code { font-weight: inherit; } - @media $media-query-mobile { h1, h2, h3, h4, h5, h6 { code { diff --git a/media/redesign/stylus/wiki-syntax-syntaxbox.styl b/media/redesign/stylus/wiki-syntax-syntaxbox.styl index 357b74d40cb..36caac5f6f0 100644 --- a/media/redesign/stylus/wiki-syntax-syntaxbox.styl +++ b/media/redesign/stylus/wiki-syntax-syntaxbox.styl @@ -1,4 +1,5 @@ @require 'includes/vars'; +@require 'includes/mixins'; /* Syntax boxes are used for short, non-functional code snippets. .syntaxbox is used anywhere (DOM, JS, CSS, ...) @@ -8,6 +9,7 @@ pre.syntaxbox, pre.twopartsyntaxbox { background: $code-block-background-alt-color; + @extend $code-block; } pre.twopartsyntaxbox { @@ -25,14 +27,17 @@ pre.twopartsyntaxbox code[class*="language-"] { height: 1.2em; float: left; font-size: $larger-font-size; - margin-left: -1.1em; /* width of icon */ + width: 1.1em; + margin-left: @width * -1; margin-top: -4px; opacity: 0; overflow: hidden; position: relative; text-align: center; - width: 1.1em; + + + /* show on hover and focus, and when triggered by JS adding class */ &.isOpaque, &:hover, &:focus { @@ -40,5 +45,4 @@ pre.twopartsyntaxbox code[class*="language-"] { } } -/* show on hover */ -/* show when tabbed to, make focusable */ +