WordPress.org
Get WordPress

Plugin Directory

Changeset 759753


Ignore:
Timestamp:
08/21/2013 06:45:37 AM (13 years ago)
Author:
setzer
Message:

1.1 to trunk, new screenshots

Location:
side-matter
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • side-matter/tags/1.0/readme.txt

    r742660 r759753  
    1414Side Matter turns your footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text. Easily incorporate citations, digressions, and editorial remarks into the sidebar of a page or post with a simple-to-use shortcode and widget. Scholars, editors, and writers of all kinds will find particular benefit in the plugin.
    1515
    16 Sidenotes have a centuries-long history of use in printed texts, from the Geneva Bible to the works of Edward Tufte. They function equally well on the Web: unlike hyperlinked footnotes, sidenotes don't require the user to click away from a page's main content to follow up a reference. Instead, they perch humbly and accessibly alongside the material to which they refer.
     16Sidenotes have a centuries-long history of use in printed texts, from the Geneva Bible to the works of Edward Tufte. They function equally well on the Web: unlike hyperlinked footnotes, sidenotes don't require the user to click away from a page's main content to follow up on a reference. Instead, they perch humbly and accessibly alongside the lines to which they refer.
    1717
    1818Side Matter includes an options menu for toggling settings, as well as a set of built-in classes for [styling sidenotes and references with CSS](http://wordpress.org/extend/plugins/side-matter/other_notes/). The plugin works well with many popular base themes, including Twenty Twelve, Twenty Ten, Responsive, and Toolbox.

  • side-matter/trunk/css/side-matter-admin.css

    r741424 r759753  
    11/*
    22side-matter-admin.css
    3 Version 1.0
     3Version 1.1
    44
    55Plugin: Side Matter
    … …  
    99*/
    1010
    11 .side-matter-field {
     11.side-matter-preview {
    1212    display: inline-block;
     13    font-size: 1.1em;
    1314    background: #eee;
    1415    border: 1px solid #bbb;
    … …  
    2324}
    2425
    25 .side-matter-content {
     26.side-matter-preview:focus {
     27    outline: thin dotted;
     28}
     29
     30.side-matter-preview-dark {
     31    background-color: #444;
     32}
     33
     34.side-matter-preview-content {
    2635    padding: 1.25em 2em;
    2736}
    2837
    29 .side-matter-field:focus {
    30     outline: thin dotted;
    31 }
    32 
    33 .side-matter-field-dark {
    34     background-color: #444;
    35 }
    36 
    37 .side-matter-field-dark > .side-matter-content {
     38.side-matter-preview-dark > .side-matter-preview-content {
    3839    color: #ccc;
    3940    box-shadow: inset rgba(0,0,0,0.3) 1px 1px 5px;
    4041}
    4142
    42 .side-matter-main {
     43.side-matter-preview-main {
    4344    vertical-align: top;
    4445    display: inline-block;
    … …  
    4748}
    4849
    49 .side-matter-side {
     50.side-matter-preview-side {
    5051    vertical-align: top;
    5152    display: inline-block;
    … …  
    5354}
    5455
    55 .side-matter-list, .side-matter-note, .side-matter-text {
     56.side-matter-preview-list, .side-matter-preview-note, .side-matter-preview-text {
    5657    font-size: inherit;
    5758    margin: 0;
    … …  
    5960}
    6061
    61 .side-matter-ref {
     62.side-matter-preview-ref {
    6263    position: relative;
    6364    top: -0.5em;
    … …  
    6768}
    6869
    69 .user_colors {
     70.side-matter-user-colors {
    7071    margin-left: 18px;
    7172}
     73
     74.side-matter-figure-style {
     75    color: #333;
     76}

  • side-matter/trunk/css/side-matter.css

    r741424 r759753  
    11/*
    22side-matter.css
    3 Version 1.0
     3Version 1.1
    44
    55Plugin: Side Matter

  • side-matter/trunk/js/side-matter-admin.js

    r741424 r759753  
    11/*
    22side-matter-admin.js
    3 Version 1.0
     3Version 1.1
    44
    55Plugin: Side Matter
    … …  
    1313/* Variables */
    1414
    15 var fieldIsDark; // True when `div.side-matter-field` has class `side-matter-field-dark` applied
     15var fieldIsDark; // True when `div.side-matter-preview` has class `side-matter-preview-dark` applied
    1616var colorsEnabled; // True when 'Use custom colors for figures and notes' checkbox is checked
    1717var figureColor; // Current color to use for reference and note numeral figures
    … …  
    2323    'georgian': 'ა',
    2424    'hebrew': 'א',
     25    'hiragana': 'あ',
     26    'hiragana-iroha': 'い',
     27    'katakana': 'ア',
     28    'katakana-iroha': 'イ',
    2529    'lower-alpha': 'a',
    2630    'lower-greek': 'α',
    … …  
    3236
    3337    fieldIsDark = 0;
    34     figureColor = $('.figure_color').val();
    35     textColor = $('.text_color').val();
     38    figureColor = $('.side-matter-figure-color').val();
     39    textColor = $('.side-matter-text-color').val();
    3640
    3741    placeNote();
    3842
    39     $('.figure_color').wpColorPicker(figureOptions);
    40     $('.text_color').wpColorPicker(textOptions);
     43    $('.side-matter-figure-color').wpColorPicker(figureOptions);
     44    $('.side-matter-text-color').wpColorPicker(textOptions);
    4145
    42     if ( ! $('#colors_enabled').prop('checked')) {
    43         $('.user_colors').hide();
     46    if ( ! $('.side-matter-colors-enabled').prop('checked')) {
     47        $('.side-matter-user_colors').hide();
    4448    } else {
    45         $('.side-matter-ref,.side-matter-note').css('color', figureColor);
    46         $('.side-matter-text').css('color', textColor);
     49        $('.side-matter-preview-ref,.side-matter-preview-note').css('color', figureColor);
     50        $('.side-matter-preview-text').css('color', textColor);
    4751    }
    4852
    … …  
    5054
    5155function placeNote() { // Position note in preview field (variant of `placeNotes` from `side-matter.js`)
    52     var refPosition = $('.side-matter-ref').position().top;
    53     var notePosition = $('.side-matter-note').position().top;
     56    var refPosition = $('.side-matter-preview-ref').position().top;
     57    var notePosition = $('.side-matter-preview-note').position().top;
    5458    var noteOffset = refPosition - notePosition;
    5559    var finalOffset = (noteOffset < 0) ? 0 : noteOffset;
    56     $('.side-matter-note').css('marginTop', finalOffset); // Position note
     60    $('.side-matter-preview-note').css('marginTop', finalOffset); // Position note
    5761}
    5862
    … …  
    6165var figureOptions = {
    6266    change: function(event, ui) {
    63         $('.side-matter-ref,.side-matter-note').css('color', ui.color.toString());
    64     }
     67        $('.side-matter-preview-ref,.side-matter-preview-note').css('color', ui.color.toString());
     68    },
     69    palettes: false
    6570};
    6671
    6772var textOptions = {
    6873    change: function(event, ui) {
    69         $('.side-matter-text').css('color', ui.color.toString());
    70     }
     74        $('.side-matter-preview-text').css('color', ui.color.toString());
     75    },
     76    palettes: false
    7177};
    7278
    73 /* Functions for live updates to preview field: toggling light/dark, enabling custom colors, updating figure style */
     79/* Functions for live updates to preview field: toggling light/dark, enabling custom colors, updating figure style, fade effect */
    7480
    75 $('.side-matter-field,label[for^="preview_field"]').click(function() { // When user clicks preview field or its label, toggle class
     81$('.side-matter-preview,label[for^="preview_field"]').click(function() { // When user clicks preview field or its label, toggle class
    7682    if (fieldIsDark == 0) {
    77         $('.side-matter-field').addClass('side-matter-field-dark');
     83        $('.side-matter-preview').addClass('side-matter-preview-dark');
    7884        fieldIsDark = 1;
    7985    } else {
    80         $('.side-matter-field').removeClass('side-matter-field-dark');
     86        $('.side-matter-preview').removeClass('side-matter-preview-dark');
    8187        fieldIsDark = 0;
    8288    }
    8389});
    8490
    85 $('.side-matter-field').keyup(function(e) { // Enter and space keys will toggle preview field when it is in focus
    86     if (e.which == 13 || e.which == 32) $('.side-matter-field').click();
     91$('.side-matter-preview').keyup(function(e) { // Enter and space keys will toggle preview field when it is in focus
     92    if (e.which == 13 || e.which == 32) $('.side-matter-preview').click();
    8793});
    8894
    89 $('#colors_enabled').click(function() { // When user clicks
     95$('.side-matter-colors-enabled').click(function() { // When user clicks checkbox, open color picker drawer
    9096    if ($(this).prop('checked')) {
    91         $('.side-matter-ref,.side-matter-note').css('color', figureColor);
    92         $('.side-matter-text').css('color', textColor);
    93         $('.user_colors').slideDown();
     97        $('.side-matter-preview-ref,.side-matter-preview-note').css('color', figureColor);
     98        $('.side-matter-preview-text').css('color', textColor);
     99        $('.side-matter-user-colors').slideDown();
    94100    } else {
    95         figureColor = $('.figure_color').val();
    96         textColor  = $('.text_color').val();
    97         $('.user_colors').slideUp('fast');
    98         $('.side-matter-ref,.side-matter-note,.side-matter-text').css('color', '');
     101        figureColor = $('.side-matter-figure-color').val();
     102        textColor  = $('.side-matter-text-color').val();
     103        $('.side-matter-user-colors').slideUp('fast');
     104        $('.side-matter-preview-ref,.side-matter-preview-note,.side-matter-preview-text').css('color', '');
    99105    }
    100106});
    101107
    102 $('#figure_style').change(function() {
    103     $('.side-matter-ref').text(figures[$(this).val()]);
    104     $('.side-matter-note').css('listStyleType', $(this).val());
     108$('.side-matter-figure-style').change(function() { // When user selects a figure style, update preview field
     109    $('.side-matter-preview-ref').text(figures[$(this).val()]);
     110    $('.side-matter-preview-note').css('listStyleType', $(this).val());
     111});
     112
     113$('.side-matter-use-effects').change(function() { // When user enables fade effects, update preview field
     114    if ($(this).prop('checked')) {
     115        $('.side-matter-preview-note').css('opacity', 0).delay(180).fadeTo(180, 1);
     116    }
    105117});
    106118

  • side-matter/trunk/js/side-matter.js

    r741996 r759753  
    11/*
    22side-matter.js
    3 Version 1.0
     3Version 1.1
    44
    55Plugin: Side Matter
    … …  
    3232
    3333$(document).ready(function() {
    34     $('ol.' + htmlClass + '-list').css('opacity', 0); // Make notes briefly transparent to prevent flickering on load
     34    if (useEffects == 1) $('ol.' + htmlClass + '-list').css('opacity', 0); // Make notes briefly transparent
    3535});
    3636
    3737$(window).load(function() { // Position notes and fade in
    3838    for (i = 1; i <= 2; i++) placeNotes(); // Loop twice to correct any misplacements on first load
    39     if (useEffects == 1) {
    40         $('ol.' + htmlClass + '-list').fadeTo(180, 1);
    41     } else {
    42         $('ol.' + htmlClass + '-list').css('opacity', 1);
    43     }
     39    if (useEffects == 1) $('ol.' + htmlClass + '-list').fadeTo(180, 1);
    4440});
    4541

  • side-matter/trunk/readme.txt

    r742660 r759753  
    11=== Side Matter ===
    22Contributors: setzer
    3 Tags: academic, annotation, annotations, bibliography, bibliographic, citation, citations, cite, commentary, endnote, endnotes, footnote, footnotes, margin, matter, note, notes, ref, reference, references, scholar, scholarship, shortcode, side, sidebar, sidenote, sidenotes, widget
     3Tags: academic, annotation, annotations, bibliography, bibliographic, citation, citations, cite, commentary, endnote, endnotes, footnote, footnotes, margin, marginal, matter, note, notes, ref, reference, references, scholar, scholarship, shortcode, side, sidebar, sidenote, sidenotes, widget
    44Requires at least: 3.0
    5 Tested up to: 3.5.2
    6 Stable tag: 1.0
     5Tested up to: 3.6
     6Stable tag: 1.1
    77License: GPLv2 or later
    88License URI: http://www.gnu.org/licenses/gpl-2.0.html
    99
    10 Turns your footnotes into sidenotes, magically positioning each note in the sidebar next to its corresponding reference in the text.
     10Turns footnotes into sidenotes, magically positioning each note in the sidebar next to its corresponding reference in the text.
    1111
    1212== Description ==
    1313
    14 Side Matter turns your footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text. Easily incorporate citations, digressions, and editorial remarks into the sidebar of a page or post with a simple-to-use shortcode and widget. Scholars, editors, and writers of all kinds will find particular benefit in the plugin.
    15 
    16 Sidenotes have a centuries-long history of use in printed texts, from the Geneva Bible to the works of Edward Tufte. They function equally well on the Web: unlike hyperlinked footnotes, sidenotes don't require the user to click away from a page's main content to follow up a reference. Instead, they perch humbly and accessibly alongside the material to which they refer.
    17 
    18 Side Matter includes an options menu for toggling settings, as well as a set of built-in classes for [styling sidenotes and references with CSS](http://wordpress.org/extend/plugins/side-matter/other_notes/). The plugin works well with many popular base themes, including Twenty Twelve, Twenty Ten, Responsive, and Toolbox.
     14Side Matter turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text. Easily add citations, digressions, and editorial remarks to pages and posts with a simple shortcode and widget. Writers, editors, and scholars will find the plugin of particular benefit.
     15
     16Margin notes have been used in printed texts for centuries. They function equally well on the Web: unlike hyperlinked footnotes, sidenotes don't require jumping down the page to follow up on each reference. Instead, they perch humbly and accessibly beside the lines to which they refer.
     17
     18Side Matter includes an options menu for changing default settings as well as a set of built-in classes for [styling notes and reference figures with CSS](http://wordpress.org/extend/plugins/side-matter/other_notes/).
    1919
    2020To use, place the Side Matter widget in your sidebar, then enclose sidenote text in a page or post using the `[ref]` shortcode, like so:
    2121
    22 > Here's the text to annotate.`[ref]`Note text goes here.`[/ref]`
     22    Here's the text to annotate.[ref]Note text goes here.[/ref]
    2323
    2424== Installation ==
    2525
    26261. Upload the directory `side-matter` to `wp-content/plugins`.
    27 2. Activate Side Matter using the Plugins menu.
    28 3. Using the Widgets menu, place the Side Matter widget in your sidebar.
    29 4. You may now use the `[ref]` shortcode to generate sidenotes in posts and pages, like so:
    30 
    31 > Here's the text to annotate.`[ref]`Note text goes here.`[/ref]`
    32 
    33 To modify the plugin's default settings, use the options menu located on your Reading Settings screen.
    34 
    35 If you'd like to customize the appearance of Side Matter notes and references using CSS, consult [Styling Side Matter with CSS](http://wordpress.org/extend/plugins/side-matter/other_notes/).
     272. Activate Side Matter using the Plugins screen.
     283. Place the Side Matter widget in your sidebar using the Widgets screen.
     294. Use the `[ref]` shortcode to generate sidenotes in posts and pages, like so:
     30
     31    Here's the text to annotate.[ref]Note text goes here.[/ref]
     32
     33To change the plugin's default settings, use the Side Matter options menu on your Reading Settings screen.
     34
     35For information on specifying the appearance of Side Matter elements using custom CSS, consult [Other Notes](http://wordpress.org/extend/plugins/side-matter/other_notes/).
    3636
    3737== Frequently Asked Questions ==
    … …  
    4141You can find the options menu on your Reading Settings screen.
    4242
     43= My notes don't appear. =
     44
     45Some themes are one-column by design and do not include a sidebar. Without a sidebar, Side Matter has no place to generate your notes. Make sure that your theme includes a sidebar and that you've placed the Side Matter widget within the sidebar.
     46
     47= My notes just sit at the top of the sidebar. =
     48
     49Your theme may not be loading `side-matter/js/side-matter.js`, the script that aligns sidenotes. Check the page source to make sure that `side-matter.js` has been linked.
     50
     51= My notes appear at a regular vertical offset from their proper position. =
     52
     53Some themes idiosyncratically display notes at an offset from their corresponding references in the text. As a workaround for this problem, Side Matter's options menu includes a field for arbitrarily adjusting your notes' vertical offset.
     54
     55= Some numeral figures don't display properly in my browser. =
     56
     57Browser support for the CSS `armenian`, `georgian`, `lower-greek`, `hebrew`, `hiragana`, and `katakana` list styles varies. (See [Web Platform Docs](http://docs.webplatform.org/wiki/css/properties/list-style-type) for more details.) Decimal, Latin, and Roman figures enjoy broader support and are unlikely to cause problems.
     58
     59= Why doesn't the plugin work with my theme? =
     60
     61Not all layouts are built to incorporate a component like Side Matter. The plugin works well with most base themes that include a conventional sidebar, but it's not guaranteed to display notes perfectly on all sites. A little tinkering with note offset or CSS will fix most problems; in other cases, it's best to consult your theme's developer.
     62
    4363= Does Side Matter work with responsive layouts? =
    4464
    45 Yes. The plugin includes an option, turned off by default, to responsively re-position sidenotes upon window resize or zoom. Enable this function using the Responsive Positioning control in Side Matter's options menu.
    46 
    47 = My notes just sit at the top of the sidebar. =
    48 
    49 Your theme may not be linking `side-matter.js`, the script that aligns sidenotes. Check the page source to see if `side-matter.js` has been linked.
    50 
    51 = My notes appear at a regular vertical offset from their proper position. =
    52 
    53 Some themes idiosyncratically display notes at an offset from their corresponding references in the text. As a workaround for this problem, Side Matter's options menu includes a field for arbitrarily adjusting your notes' vertical offset.
    54 
    55 = Why doesn't the plugin work with some themes? =
    56 
    57 Not all themes are built to neatly absorb a layout addition like Side Matter. The plugin works well with most base themes that incorporate a conventional sidebar, but it isn't guaranteed to display notes perfectly within all themes. Tinkering with note offset or CSS will fix most problems; in other cases, it's best to consult the theme author.
     65Yes. The plugin includes an option, turned off by default, to responsively re-position sidenotes upon browser resize or zoom. Enable this function using the Responsive Positioning control in Side Matter's options menu.
    5866
    5967= Can sidenotes be displayed without using the widget? =
    … …  
    6573    ?>
    6674
    67 = Some numeral formats don't display properly in my browser. =
    68 
    69 Browser support for the CSS `armenian`, `georgian`, `hebrew`, and `lower-greek` list styles varies. (See [Web Platform Docs](http://docs.webplatform.org/wiki/css/properties/list-style-type) for compatibility specifics.) Decimal, Latin, and Roman numerals enjoy wide support and can serve as reliable fallbacks.
    70 
    7175== Screenshots ==
    7276
    73 1. Side Matter captures footnote text using the [ref] shortcode, then magically positions each footnote alongside its corresponding reference in the text.
     771. Side Matter identifies sidenote text using the [ref] shortcode, then magically positions each note in the sidebar next to its corresponding reference in the text.
    7478
    75792. Modify default settings using Side Matter's options menu on the Reading Settings screen.
    7680
    7781== Changelog ==
     82
     83= 1.1 =
     84* Added support for Hiragana and Katakana figure sets.
     85* Added localization domain path to plugin header and appended translation notes to some otherwise cryptic strings.
     86* Made various minor fixes to improve appearance and performance.
    7887
    7988= 1.0 =
    … …  
    121130* Initial release.
    122131
    123 == Upgrade Notice ==
    124 
    125 = 1.0 =
    126 This update fixes a few IE-specific bugs and adds several features, including new numeral formats and localization support.
    127 
    128 = 0.9 =
    129 This update adds a number of features, including alternate numeral formats and a color picker for Side Matter elements. Users who have modified `side-matter.css` are advised to make a backup copy before updating.
    130 
    131 = 0.8 =
    132 This update includes several fixes and additions, including the option to select which page types display sidenotes. Users who have modified `side-matter.css` are advised to make a backup copy before updating.
    133 
    134 = 0.7 =
    135 This update adds several features, including an options menu and transition-smoothing effects. Users who have modified their copy of `side-matter.css` are advised to make a backup copy before updating.
    136 
    137 = 0.6 =
    138 This update includes a number of tweaks and fixes, including improved classes for CSS and separate styling for sidenote numerals. Users who have customized their copy of `side-matter.css` are advised to make a backup copy before downloading.
    139 
    140 = 0.5 =
    141 This update fixes an error that was preventing plugin activation for some users. Recommended.
    142 
    143132== Styling Side Matter with CSS ==
    144133
    145134Side Matter's options menu allows you to render notes and figures in custom colors by way of the Iris color picker. Changing other aspects of Side Matter elements' appearance, such as typeface, indentation, or spacing, requires some tinkering with Cascading Style Sheets (CSS). This guide assumes some familiarity with CSS; if you're a beginner, start with a [tutorial](http://www.htmldog.com/guides/css/beginner/).
    146135
    147  The simplest way to add custom styles to your site is to employ a plugin that houses your custom CSS in the WordPress database, thus preserving it even if Side Matter (or your theme) is updated. [Jetpack Custom CSS](http://wordpress.org/extend/plugins/jetpack/) is a good example.
    148 
    149 (Note that inline color styles set in the Side Matter options menu will generally override any custom styles you set elsewhere. If you're planning to use a custom stylesheet as described here, be sure to disable custom colors in the options menu.)
    150 
    151 Side Matter comes with a set of built-in classes that make it easy to customize the appearance of sidenote and reference elements using [class selectors](http://www.htmldog.com/guides/css/intermediate/classid/). For example, all Side Matter elements can be styled at once using the class `side-matter`. The following rule will render all Side Matter content (reference numerals, sidenote numerals, and sidenote text) in blue 12-pixel serif type:
     136 The simplest way to add custom styles to your site is to employ a separate plugin to house your custom CSS, thus preserving it when Side Matter or your theme is updated. [Simple Custom CSS](http://wordpress.org/plugins/simple-custom-css/) or the Custom CSS module included with [Jetpack](http://wordpress.org/extend/plugins/jetpack/) are good examples.
     137
     138(Note that inline color styles set in the Side Matter options menu will generally supersede style rules you set elsewhere. If you're planning to use your own CSS as described here, be sure to disable custom colors in the options menu.)
     139
     140Side Matter comes with a set of built-in classes that make it easy to change the appearance of sidenote and reference elements using [class selectors](http://www.htmldog.com/guides/css/intermediate/classid/). For example, all Side Matter elements can be styled at once using the class `side-matter`. The following rule will render all Side Matter content (reference numerals, sidenote numerals, and sidenote text) in blue 12-pixel serif type:
    152141
    153142    .side-matter {
    … …  
    157146    }
    158147
    159 Notes and references may be styled with greater precision using element-specific class selectors. The following rules will render reference and list numerals in red while leaving sidenote text black (see [Screenshots](http://wordpress.org/extend/plugins/side-matter/screenshots/) for a similar example):
     148Notes and references may be styled with greater precision using element-specific class selectors. The following rules will render reference and list numerals in red while leaving sidenote text black:
    160149
    161150    a.side-matter-ref, ol.side-matter-list {
    … …  
    167156    }
    168157
    169 In some cases, your custom CSS may fail to take effect because the theme CSS carries greater [specificity](http://www.htmldog.com/guides/css/intermediate/specificity/). There are ways around this. For example, if you can't modify the color of superscript reference links because your theme's rules have greater specificity, try overriding the theme stylesheet's specificity with nesting or an ID selector:
     158In some cases, your CSS may fail to take effect because the theme CSS carries greater [specificity](http://www.htmldog.com/guides/css/intermediate/specificity/). There are ways around this, such as overriding the theme stylesheet's specificity via nesting or an ID selector:
    170159
    171160    .entry-content > p > a.side-matter.side-matter-ref {
    … …  
    177166    }
    178167
    179 The `!important` declaration should be used only in rare cases, but may resolve a stubborn CSS conflict where other efforts have failed:
     168The `!important` declaration should be used sparingly, but may resolve a stubborn CSS conflict where other attempts have failed:
    180169
    181170    a.side-matter-ref {
    … …  
    186175Here is a complete list of Side Matter element class selectors and their uses:
    187176
    188 * `a.side-matter-ref` selects the `a` link tags that enclose in-text reference numerals. Use this class to modify the links' colors, underline, etc. Target a specific reference link using its ID selector (e.g. `#ref-5`).
     177* `a.side-matter-ref` selects the link tags that enclose in-text reference numerals. Use this class to modify the links' colors, underline, etc. Select a specific reference link using its ID selector (e.g. `#ref-5`).
    189178* `sup.side-matter-sup` selects the `sup` (superscript) tags that enclose in-text reference numerals. Use this class to modify the numerals' typographic properties, such as size, offset, and font.
    190179* `div.side-matter-widget` selects the `div` element that encloses the Side Matter widget.
    191180* `ol.side-matter-list` selects the `ol` (ordered list) element that encloses notes in the sidebar, including note numeral figures.
    192 * `li.side-matter-note` selects individual sidenote `li` (list item) elements. Target a specific note using the note's ID selector (e.g. `#note-6`).
     181* `li.side-matter-note` selects individual sidenote `li` (list item) elements. Select a specific note using the note's ID selector (e.g. `#note-6`).
    193182* `div.side-matter-text` selects the `div` elements that enclose sidenote text, but not sidenote list numerals. Use this to style sidenote text separately from sidenote numerals.
    194 * WordPress further wraps each note paragraph in a `p` tag. Because they are generated outside Side Matter, these `p` elements cannot be selected directly using the `side-matter` class. Instead, target them indirectly with a [child selector](http://www.htmldog.com/guides/css/advanced/selectors/), e.g. `div.side-matter-text > p`.
     183
     184Note that WordPress further wraps each note paragraph in a `p` tag. Because they are not generated by Side Matter, these `p` elements cannot be selected directly using the `side-matter` class. Instead, select them indirectly by way of [parent elements](http://www.htmldog.com/guides/css/advanced/selectors/), e.g. `li.side-matter-note > div.side-matter-text > p`.
    195185
    196186= Default CSS =
    197 Side Matter sets a few default rules in the included stylesheet `css/side-matter.css`. Their low-specificity selectors allow these rules to be easily superseded by your theme stylesheet or custom CSS.
     187Side Matter sets a few basic rules by default in the included stylesheet `side-matter/css/side-matter.css`. Their low-specificity selectors mean these defaults will defer readily to rules set by your theme or any custom stylesheets.
    198188
    199189The first rule removes underlines from reference numeral links:
    … …  
    206196    }
    207197
    208 The second rule specifies a consistent cross-theme appearance for superscript figures:
     198The second rule specifies a consistent cross-theme, cross-browser appearance for superscript figures:
    209199   
    210200    sup.side-matter-sup {

  • side-matter/trunk/side-matter.php

    r741424 r759753  
    33Plugin Name: Side Matter
    44Plugin URI: http://wordpress.org/extend/plugins/side-matter/
    5 Description: Turns your footnotes into sidenotes, magically positioning each note in the sidebar next to its corresponding reference in the text.
    6 Text Domain: side-matter
    7 Version: 1.0
     5Description: Turns footnotes into sidenotes, magically positioning each note in the sidebar next to its corresponding reference in the text.
     6Version: 1.1
    87Author: Christopher Setzer
    98Author URI: http://christophersetzer.com
    109License: GPLv2 or later
     10Text Domain: side-matter
     11Domain Path: /languages/
    1112*/
    1213
    … …  
    4041    public function __construct() { // Set up defaults, register actions
    4142
    42         add_action( 'admin_init', array( &$this, 'load_textdomain' ) );
     43        add_action( 'admin_init', array( &$this, 'load_textdomain' ) ); // Load text domain 'side-matter' for localization
    4344        add_action( 'admin_init', array( &$this, 'build_settings_section' ) ); // Assemble settings section
    4445        add_action( 'admin_enqueue_scripts', array( &$this, 'admin_enqueue' ) ); // Load script and CSS for options menu
    … …  
    7172            );
    7273        $this->options = wp_parse_args( get_option( 'side_matter_options' ), $this->defaults ); // Get options from database and apply defaults in place of any that are not set
    73         $this->version = '1.0'; // Current version of plugin
     74        $this->version = '1.1'; // Current version of plugin
    7475
    7576    }
    … …  
    111112                    'georgian' => __( 'Georgian: ა, ბ, გ, დ, ე, ვ, …', 'side-matter' ),
    112113                    'lower-greek' => __( 'Greek: α, β, γ, δ, ε, ζ, …', 'side-matter' ),
    113                     'hebrew' => __( 'Hebrew: ו ,ה ,ד ,ג ,ב ,א, …', 'side-matter' ), // Comma weirdness is due to RTL text reversal
     114                    'hebrew' => _x( 'Hebrew: ו ,ה ,ד ,ג ,ב ,א, …', 'Comma placement is due to RTL text reversal', 'side-matter' ), // Comma placement is due to RTL text reversal
     115                    'hiragana' => __( 'Hiragana: あ, い, う, え, お, か, …', 'side-matter' ),
     116                    'hiragana-iroha' => __( 'Hiragana (Iroha): い, ろ, は, に, ほ, へ, …' ),
     117                    'katakana' => __( 'Katakana: ア, イ, ウ, エ, オ, カ, …', 'side-matter' ),
     118                    'katakana-iroha' => __( 'Katakana (Iroha): イ, ロ, ハ, ニ, ホ, ヘ, …', 'side-matter' ),
    114119                    'none' => __( 'None', 'side-matter' )
    115120                    )
    … …  
    130135                'id' => 'note_adjust',
    131136                'title' => __( 'Adjust vertical offset of notes by', 'side-matter' ),
    132                 'label' => __( 'px', 'side-matter' ),
     137                'label' => _x( 'px', 'Abbreviation for "pixels"', 'side-matter' ),
    133138                'description' => __( 'A positive offset will push notes up; a negative offset will push them down.', 'side-matter' ),
    134139                'label_for' => 'note_adjust',
    … …  
    158163
    159164    public function build_section_heading() {
    160         return;
    161     }
    162 
    163     public function build_field( $args ) { // Generate settings field based on $id as passed from build_settings_section()
     165        return; // Don't build section heading
     166    }
     167
     168    public function build_field( $args ) { // Generate settings fields for each array $args passed from build_settings_section()
    164169
    165170        extract( $args, EXTR_SKIP );
    … …  
    175180                $figure = $side_matter->get_figure( 1, $options['figure_style'] );
    176181                ?>
    177                 <div class='side-matter-field' tabindex='0'>
    178                     <div class='side-matter-content'>
    179                         <div class='side-matter-main'>
    180                             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<sup class='side-matter-ref'><?php echo $side_matter->get_figure( 1, $figure_style ) ?></sup> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     182                <div class='side-matter-preview' tabindex='0'>
     183                    <div class='side-matter-preview-content'>
     184                        <div class='side-matter-preview-main'>
     185                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor tincidunt ut labore et dolore nostrud.<sup class='side-matter-preview-ref'><?php echo $side_matter->get_figure( 1, $figure_style ) ?></sup> Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquip ex ea consequat. Cras ante lacus, libero et commodo sit magna aliqua.
    181186                        </div>
    182                         <div class='side-matter-side'>
    183                             <ol class='side-matter-list'>
    184                                 <li class='side-matter-note' style='list-style-type: <?php echo $figure_style ?>;'>
    185                                     <div class='side-matter-text'>
     187                        <div class='side-matter-preview-side'>
     188                            <ol class='side-matter-preview-list'>
     189                                <li class='side-matter-preview-note' style='list-style-type: <?php echo $figure_style ?>;'>
     190                                    <div class='side-matter-preview-text'>
    186191                                        Velit esse cillum dolore eu fugiat nulla pariatur.
    187192                                    </div>
    … …  
    196201                ?>
    197202                <fieldset>
    198                     <label><input id='colors_enabled' type='checkbox' name='side_matter_options[<?php echo $id ?>][colors_enabled]' value='1' <?php checked( 1, $state['colors_enabled'] ) ?> /> <?php echo $label ?></label>
    199                     <ul class='user_colors'>
     203                    <label><input class='side-matter-colors-enabled' type='checkbox' name='side_matter_options[<?php echo $id ?>][colors_enabled]' value='1' <?php checked( 1, $state['colors_enabled'] ) ?> /> <?php echo $label ?></label>
     204                    <ul class='side-matter-user-colors'>
    200205                    <?php
    201206                    foreach ( $colors as $color => $color_label ) {
    … …  
    203208                        <li>
    204209                            <label><?php echo $color_label ?>:<br>
    205                             <input class='color-input <?php echo $color ?>' type='text' name='side_matter_options[<?php echo $id ?>][colors][<?php echo $color ?>]' maxlength='7' data-default-color='<?php echo $this->defaults['user_colors']['colors'][ $color ] ?>' value='<?php echo $state['colors'][ $color ] ?>' /></label>
     210                            <input class='color-input side-matter-<?php echo str_replace( '_', '-', $color ) ?>' type='text' name='side_matter_options[<?php echo $id ?>][colors][<?php echo $color ?>]' maxlength='7' data-default-color='<?php echo $this->defaults['user_colors']['colors'][ $color ] ?>' value='<?php echo $state['colors'][ $color ] ?>' /></label>
    206211                        </li>
    207212                        <?php
    … …  
    214219            case 'figure_style':
    215220                ?>
    216                 <select name='side_matter_options[<?php echo $id ?>]' id='<?php echo $id ?>'>
     221                <select class='side-matter-<?php echo str_replace( '_', '-', $id ) ?>' name='side_matter_options[<?php echo $id ?>]'>
    217222                <?php
    218223                foreach ( $styles as $style => $style_title ) {
    … …  
    227232            case 'note_adjust':
    228233                ?>
    229                 <label><input id='<?php echo $id ?>' type='number' name='side_matter_options[<?php echo $id ?>]' value='<?php echo $state ?>' step='1' max='<?php echo $max ?>' min='<?php echo $min ?>' class='small-text' /> <?php echo $label ?></label>
     234                <label><input class='side-matter-<?php echo str_replace( '_', '-', $id ) ?>' type='number' name='side_matter_options[<?php echo $id ?>]' value='<?php echo $state ?>' step='1' max='<?php echo $max ?>' min='<?php echo $min ?>' class='small-text' /> <?php echo $label ?></label>
    230235                <p class='description'>
    231236                    <?php echo $description ?>
    … …  
    236241            case 'use_effects':
    237242                ?>
    238                 <label><input id='<?php echo $id ?>' type='checkbox' name='side_matter_options[<?php echo $id ?>]' value='1' <?php checked( 1, $state ) ?> /> <?php echo $label ?></label>
     243                <label><input class='side-matter-<?php echo str_replace( '_', '-', $id ) ?>' type='checkbox' name='side_matter_options[<?php echo $id ?>]' value='1' <?php checked( 1, $state ) ?> /> <?php echo $label ?></label>
    239244                <?php
    240245                break;
    … …  
    242247                foreach ( $pages as $page => $page_label ) {
    243248                    ?>
    244                     <label><input type='checkbox' name='side_matter_options[<?php echo $id ?>][<?php echo $page ?>]' value='1' <?php checked( 1, $state[ $page ] ) ?>/> <?php echo $page_label ?></label><br>
     249                    <label><input class='side-matter-pages-active-<?php echo str_replace( '_', '-', $page ) ?>' type='checkbox' name='side_matter_options[<?php echo $id ?>][<?php echo $page ?>]' value='1' <?php checked( 1, $state[ $page ] ) ?>/> <?php echo $page_label ?></label><br>
    245250                    <?php
    246251                }
    … …  
    348353            'georgian' => array( 'ჵ' => 10000, 'ჰ' => 9000, 'ჯ' => 8000, 'ჴ' => 7000, 'ხ' => 6000, 'ჭ' => 5000, 'წ' => 4000, 'ძ' => 3000, 'ც' => 2000, 'ჩ' => 1000, 'შ' => 900, 'ყ' => 800, 'ღ' => 700, 'ქ' => 600, 'ფ' => 500, 'ჳ' => 400, 'ტ' => 300, 'ს' => 200, 'რ' => 100, 'ჟ' => 90, 'პ' => 80, 'ო' => 70, 'ჲ' => 60, 'ნ' => 50, 'მ' => 40, 'ლ' => 30, 'კ' => 20, 'ი' => 10, 'თ' => 9, 'ჱ' => 8, 'ზ' => 7, 'ვ' => 6, 'ე' => 5, 'დ' => 4, 'გ' => 3, 'ბ' => 2, 'ა' => 1 ),
    349354            'hebrew' => array( 'ת' => 400, 'ש' => 300, 'ר' => 200, 'ק' => 100, 'צ' => 90, 'פ' => 80, 'ע' => 70, 'ס' => 60, 'נ' => 50, 'מ' => 40, 'ל' => 30, 'כ' => 20, 'יט' => 19, 'יח' => 18, 'יז' => 17, 'טז' => 16, 'טו' => 15, 'י' => 10, 'ט' => 9, 'ח' => 8, 'ז' => 7, 'ו' => 6, 'ה' => 5, 'ד' => 4, 'ג' => 3, 'ב' => 2, 'א' => 1 ),
     355            'hiragana' => array( 'あ', 'い', 'う', 'え', 'お', 'か', 'き', 'く', 'け', 'こ', 'さ', 'し', 'す', 'せ', 'そ', 'た', 'ち', 'つ', 'て', 'と', 'な', 'に', 'ぬ', 'ね', 'の', 'は', 'ひ', 'ふ', 'へ', 'ほ', 'ま', 'み', 'む', 'め', 'も', 'や', 'ゆ', 'よ', 'ら', 'り', 'る', 'れ', 'ろ', 'わ', 'を', 'ん' ),
     356            'hiragana-iroha' => array( 'い', 'ろ', 'は', 'に', 'ほ', 'へ', 'と', 'ち', 'り', 'ぬ', 'る', 'を', 'わ', 'か', 'よ', 'た', 'れ', 'そ', 'つ', 'ね', 'な', 'ら', 'む', 'う', 'ゐ', 'の', 'お', 'く', 'や', 'ま', 'け', 'ふ', 'こ', 'え', 'て', 'あ', 'さ', 'き', 'ゆ', 'め', 'み', 'し', 'ゑ', 'ひ', 'も', 'せ', 'す', 'ん' ),
     357            'katakana' => array( 'ア', 'イ', 'ウ', 'エ', 'オ', 'カ', 'キ', 'ク', 'ケ', 'コ', 'サ', 'シ', 'ス', 'セ', 'ソ', 'タ', 'チ', 'ツ', 'テ', 'ト', 'ナ', 'ニ', 'ヌ', 'ネ', 'ノ', 'ハ', 'ヒ', 'フ', 'ヘ', 'ホ', 'マ', 'ミ', 'ム', 'メ', 'モ', 'ヤ', 'ユ', 'ヨ', 'ラ', 'リ', 'ル', 'レ', 'ロ', 'ワ', 'ヲ', 'ン' ),
     358            'katakana-iroha' => array( 'イ', 'ロ', 'ハ', 'ニ', 'ホ', 'ヘ', 'ト', 'チ', 'リ', 'ヌ', 'ル', 'ヲ', 'ワ', 'カ', 'ヨ', 'タ', 'レ', 'ソ', 'ツ', 'ネ', 'ナ', 'ラ', 'ム', 'ウ', 'ヰ', 'ノ', 'オ', 'ク', 'ヤ', 'マ', 'ケ', 'フ', 'コ', 'エ', 'テ', 'ア', 'サ', 'キ', 'ユ', 'メ', 'ミ', 'シ', 'ヱ', 'ヒ', 'モ', 'セ', 'ス', 'ン' ),
    350359            'lower-alpha' => array( 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' ),
    351360            'lower-greek' => array( 'α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'ι', 'κ', 'λ', 'μ', 'ν', 'ξ', 'ο', 'π', 'ρ', 'σ', 'τ', 'υ', 'φ', 'χ', 'ψ', 'ω' ),
    … …  
    371380    public function get_figure( $note_id, $style ) { // Convert numeral to alternate format
    372381
    373         $figures = $this->figures;
    374 
    375382        switch ( $style ) {
    376383            case 'armenian':
    … …  
    378385            case 'hebrew':
    379386            case 'lower-roman':
    380                 return $this->get_additive( $note_id, $figures[ $style ] );
    381                 break;
     387                return $this->get_additive( $note_id, $this->figures[ $style ] );
     388                break;
     389            case 'hiragana':
     390            case 'hiragana-iroha':
     391            case 'katakana':
     392            case 'katakana-iroha':
     393            case 'lower-alpha':
    382394            case 'lower-greek':
    383             case 'lower-alpha':
    384                 return $this->get_alpha( $note_id, $figures[ $style ] );
     395                return $this->get_alpha( $note_id, $this->figures[ $style ] );
    385396                break;
    386397            case 'none':

  • side-matter/trunk/uninstall.php

    r741424 r759753  
    22/*
    33uninstall.php
    4 Version 1.0
     4Version 1.1
    55
    66Plugin: Side Matter
Note: See TracChangeset for help on using the changeset viewer.