githubmirror/markdown-here

src/common/options.html
626 строк19 KB
Adam Pritchard
Changelist now shows up at top after update (this is a reversion to earlier behaviour)
23 июн 2013, 17:21
23 июн 2013, 17:212910ce6
<!DOCTYPE html>

<!--
Copyright Adam Pritchard 2013
MIT License : http://adampritchard.mit-license.org/
-->

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" type="image/png" href="images/icon16.png" />

  <title>Markdown Here Options</title>

  <style type="text/css">
  body {
    font-family: Tahoma, Helvetica, arial, freesans, clean, sans-serif;
    font-size: 14px;
  }

  .pagehead {
    margin: 10px 0 0 10px;
  }

  h1 {
    color: #482168;
    text-shadow: 1px 1px 1px rgba(72, 33, 104, 0.23);
    vertical-align: top;
    /* Needs to match the height of the image */
    line-height: 48px;
  }

  textarea {
    font-size: 0.8em;
  }

  .horiz-groupset {
    height: 400px;
    width: 100%;
    overflow: auto;
  }

  .control-group {
    float: left;
    width: 45%;
    width: -webkit-calc(50% - 40px);
    width: -moz-calc(50% - 40px);
    width: calc(50% - 40px);
    height: 360px;
    height: -webkit-calc(100% - 40px);
    height: -moz-calc(100% - 40px);
    height: calc(100% - 40px);
    margin: 10px;
    padding: 10px;
    background-color: #EEE;
    border-radius: 5px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
    overflow-y: auto;
  }

  .control-group > * {
    margin: 5px 0;
  }

  .control-group > .stretch {
    height: 280px;
    height: -webkit-calc(100% - 80px);
    height: -moz-calc(100% - 80px);
    height: calc(100% - 80px);
  }

  .stretch {
    position: relative;
  }

  .stretch > * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .section-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #482168;
    text-shadow: 1px 1px 1px rgba(72, 33, 104, 0.23);
  }

  .iframe-container {
    background-color: #FFF;
  }

  #notes {
  }

  #notes ul {
    padding-left: 30px;
  }

  #notes li {
    padding-bottom: 5px;
  }

  #saved-msg {
    position: fixed;
    top: 0;
    right: 0;
    font-size: 1.5em;
    padding: 1em;
    background: -webkit-linear-gradient(right top, rgb(207,182,227) 0%, rgb(255,255,255) 100%);
    background: -moz-linear-gradient(225deg, rgb(207,182,227), rgb(255,255,255));
    background: linear-gradient(225deg, rgb(207,182,227), rgb(255,255,255));
    color: #482168;
    -webkit-transition: opacity 1000ms;
    -moz-transition: opacity 1000ms;
    transition: opacity 1000ms;
    opacity: 0;
    border-bottom-left-radius: 30px;
    z-index: 99;
  }

  #saved-msg.showing {
    -webkit-transition: opacity 100ms;
    -moz-transition: opacity 100ms;
    transition: opacity 100ms;
    opacity: 0.95;
  }

  /* button styling from http://webdesignerwall.com/tutorials/css3-gradient-buttons */
  .button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    padding: .3em 1em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    border-radius: .5em;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
  }
  .button:hover {
    text-decoration: none;
  }
  .button:active {
    position: relative;
    top: 1px;
  }
  .purple {
    color: #FAF5FC;
    border: solid 1px #2d0f5a;
    background: -webkit-gradient(linear, left top, left bottom, from(#A022A0), to(#662D91));
    background: -moz-linear-gradient(270deg, #A022A0, #662D91);
    background: linear-gradient(270deg, #A022A0, #662D91);
  }
  .purple:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#BC699F), to(#F98AD1));
    background: -moz-linear-gradient(270deg, #BC699F, #F98AD1);
    background: linear-gradient(270deg, #BC699F, #F98AD1);
  }
  .purple:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#662D91), to(#A022A0));
    background: -moz-linear-gradient(270deg, #662D91, #A022A0);
    background: linear-gradient(270deg, #662D91, #A022A0);
  }

  #css-syntax-select {
    font-size: 1em;
    border-radius: .5em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    background: #A022A0;
    padding: 0.2em;
    outline: none;
  }

  #css-syntax-select > option{
    background-color: inherit;
    font: inherit;
  }

  footer {
    margin: 1em auto;
    max-width: 700px;
    text-align: center;
  }

  textarea {
    font-family: Consolas, Inconsolata, Courier, monospace;
  }

  input[type="text"] {
    width: 90%;
    font-size: 1em;
    background-color: rgba(249, 138, 209, 0.35);
  }

  .warning {
    background-color: #E6E619;
    display: inline-block;
    padding: 0.2em;
    border-radius: 0.3em;
  }

  .hidden {
    visibility: hidden;
  }

  #changelist li {
    margin: 0.5em 0;
  }

  #changelist li p {
    margin: 0;
  }

  ol > li {
    margin-bottom: 0.3em;
  }

  #resources li {
    margin-bottom: 0.3em;
  }

  #tests-link {
    font-size: 0.5em;
    text-align: right;
  }

  #changelist {
    height: 25em;
    overflow-y: scroll;
    border-radius: 5px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
    border: 2px #EEE solid;
    margin: 10px;
    padding: 10px;
  }

  .changelist-new {
    border-radius: 5px;
    background: -webkit-gradient(linear, left center, right center, from(rgb(227, 214, 238)), to(rgb(255,255,255)));
    background: -moz-linear-gradient(90deg, rgb(227, 214, 238), rgb(255,255,255));
    background: linear-gradient(90deg, rgb(227, 214, 238), rgb(255,255,255));
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.1em;
  }

  .changelist-new h2:first-child {
    color: #FFF;
    text-shadow: 1px 1px 2px black, 0 0 1em rgb(132, 41, 209), 0 0 0.2em rgb(132, 41, 209);
    margin-bottom: 0;
  }

  #changelist > h1 {
    margin-top: 0;
    margin-bottom: 0;
  }

  hr {
    border: 0;
    border-top: 1px dashed #482168;
    width: 90%;
  }

  #donate-button {
    margin-top: 0.3em;
  }

  .donate-plea-hidden {
    display: none;
  }

  /* Custom PayPal button styles from http://visitsteve.com/made/diy-paypal-buttons/ */
  .paypal-button {
    width: 200px;
    height: 52px;
    color: #2e3192;
    text-decoration: none;
    display: block;
    text-align: center;
    position: relative;

    /* BACKGROUND GRADIENTS */
    background: #FEE1A5;
    background: -moz-linear-gradient(top, #FFF, #FEE1A5 50%, #FFB829 51%,
      #FEE1A5 95%, #FEE1A5);
    background: -webkit-gradient(linear, left top, left bottom,
      color-stop(0, #FFF), color-stop(.5, #FEE1A5), color-stop(.51, #FFB829),
      color-stop(.95, #FEE1A5), color-stop(.96, #FEE1A5), to(#FEE1A5));

    /* BORDER RADIUS */
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px;

    border-bottom: 1px solid #FFF;
    border-top: 1px solid #FFB829;
    border-left: 1px solid #FEE1A5;
    border-right: 1px solid #FEE1A5;

    /* TEXT SHADOW */

    text-shadow: 0px 1px 1px white;

    /* BOX SHADOW */
    -moz-box-shadow: 0 1px 3px #777;
    -webkit-box-shadow: 0 1px 3px #777;
    box-shadow: 0 1px 3px #777;
    font: italic bold 34px/42px helvetica, arial;
  }
  /* WHILE HOVERED */
  .paypal-button:hover {
    background: #FEE1A5;
    background: -moz-linear-gradient(top, #FFF, #FEE1A5 50%,
      #FFB829 51%, #FEE1A5 95%, #FEE1A5);
    background: -webkit-gradient(linear, left top, left bottom,
      color-stop(0, #FFF), color-stop(.5, #FEE1A5), color-stop(.51, #FFB829),
      color-stop(.95, #FEE1A5), color-stop(.96, #FEE1A5), to(#FEE1A5));
    -moz-box-shadow: 0 1px 2px black;
    -webkit-box-shadow: 0 1px 2px black;
  }
  /* WHILE BEING CLICKED */
  .paypal-button:active {
    -moz-box-shadow: 0 2px 6px black;
    -webkit-box-shadow: 0 2px 6px black;
  }
  </style>
</head>

<body>

  <header id="pagehead" class="pagehead">
    <h1>
      <img src="images/icon48.png">
      Markdown Here Options
    </h1>
  </header>

  <div class="horiz-groupset">
    <div id="usage" class="control-group">
      <div class="section-title">
        Basic Usage
      </div>
      <div>
        <ol>
          <li id="need-page-reload">
            Reload your email web page or restart your web browser.
          </li>
          <li>
            Start a new email message.
          </li>
          <li>
            Type some Markdown into the email.<br>Try this: <code>*Hello* `Markdown` **Here**!</code>
          </li>
          <li>
            Right-click in the email and then click "Markdown Toggle". (Or click the <img src="images/icon16.png"> button on the toolbar.<span class="hotkey-display-wrapper"> Or press <span class="hotkey-display"><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>M</kbd></span></span>)
          </li>
          <li>
            The message should now look pretty cool. Send it to your friends!
          </li>
        </ol>
      </div>
    </div>

    <div id="resources" class="control-group">
      <div class="section-title">
        Resources and Links
      </div>
      <div>
        <ul>
          <li>
            If you're new to Markdown, the <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" target="_blank">Markdown Cheatsheet</a> will make you a prostar.
          </li>
          <li>
            For lots more info and advanced usage, see the <a href="https://github.com/adam-p/markdown-here" target="_blank">Markdown Here project page</a>. You should also explore the options below.
          </li>
          <li>
            Ask a question, start a discussion, or just say hi in the <a href="https://groups.google.com/forum/?fromgroups=#!forum/markdown-here" target="_blank">markdown-here Google Group</a>.
          </li>
          <li>
            Visit the <a href="https://github.com/adam-p/markdown-here/wiki" target="_blank">Markdown Here wiki</a> for info about <a href="https://github.com/adam-p/markdown-here/wiki/Compatibility" target="_blank">where else MDH works</a> and more <a href="https://github.com/adam-p/markdown-here/wiki/Tips-and-Tricks" target="_blank">tips and tricks</a>.
          </li>
          <li>
            If you're interested in what the future holds for Markdown Here, check out the <a href="https://github.com/adam-p/markdown-here#next-steps" target="_blank">Next Steps section</a> of the README.
          </li>
        </ul>

        <hr>

        <div>
          <span class="donate-plea donate-plea-hidden" id="dp1">Once you decide Markdown Here is pretty sweet, please help me to buy some flowers for my wife so she's not too upset about how much time I spend working on it. <strong>Thank you!</strong></span>
          <span class="donate-plea donate-plea-hidden" id="dp2"><strong>Help make Markdown Here better!</strong></span>
          <span class="donate-plea donate-plea-hidden" id="dp3"><strong>Help support the development of Markdown Here!</strong></span>
          <span class="donate-plea donate-plea-hidden" id="dp4">You know what makes it easier to keep Markdown Here working on five different platforms and three different email providers? <strong>Beer!</strong></span>
          <span class="donate-plea donate-plea-hidden" id="dp5" data-submit-type="paypal-submit-image"></span>

          <div id="donate-button">
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
            <input type="hidden" name="cmd" value="_donations">
            <input type="hidden" name="business" value="9PNMFUUB4WVGY">
            <input type="hidden" name="lc" value="CA">
            <input type="hidden" name="item_name" value="Markdown Here development support">
            <input type="hidden" name="item_number" value="options-page">
            <input type="hidden" name="currency_code" value="CAD">
            <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHosted">
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

            <input id="paypal-submit-image" type="image" src="images/gary-arthur-donate-1.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <input id="paypal-submit-css" class="paypal-button" type="submit" value="Donate" alt="PayPal - The safer, easier way to pay online!">
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="options-container">

    <div class="horiz-groupset">

      <div class="control-group">
        <div class="section-title">
          Primary Styling CSS
        </div>
        <div class="stretch">
          <textarea id="css-edit" wrap="off"></textarea>
        </div>
        <div>
          <button id="reset-button" class="button purple">
            Reset to Default
          </button>
        </div>
      </div>

      <div class="control-group">
        <div class="section-title">
          Syntax Highlighting CSS
        </div>
        <div class="stretch">
          <textarea id="css-syntax-edit" wrap="off"></textarea>
        </div>
        <div>
          Theme:
          <select class="purple" id="css-syntax-select"></select>
        </div>
      </div>

    </div>

    <div class="horiz-groupset">

      <div class="control-group">
        <div class="section-title">
          Preview
        </div>
        <div class="stretch iframe-container">
          <iframe id="rendered-markdown" src="options-iframe.html">
            <!-- rendered Markdown preview will appear here -->
          </iframe>
        </div>
        <div>
          <button id="markdown-toggle-button" class="button purple">
            Markdown Toggle
          </button>
        </div>
      </div>

      <div class="control-group">
        <div class="section-title">
          Notes
        </div>
        <div id="notes">
          <ul>
            <li>Changes are automatically saved and synchronized (if sync is enabled in your browser).</li>
            <li>The syntax highlighting styles are applied after the primary styling, and so take precedence.</li>
            <li>Some email editors and browsers impose their own styles. Those may not be apparent here.</li>
            <li>Some of the syntax highlighting themes originally had background images that have been removed.</li>
          </ul>
        </div>
      </div>

    </div>

    <div class="horiz-groupset">

      <div class="control-group">
        <div class="section-title">
          TeX Mathematical Formulae Support
        </div>

        <div>
          <input type="checkbox" id="math-enable"/>
          <input type="text" id="math-edit"/>
        </div>

        <div>
          <button id="math-reset-button" class="button purple">
            Reset to Default
          </button>
        </div>

        <div id="notes">
          <p>
            <strong>Privacy Issues</strong>:
            <ul>
              <li>
                To generate the image for the formula, a request is sent to Google. That effectively means that you are sharing your formula with Google. It also means that recipients of your message will be making a request to Google to have the image rendered. That's why this option is disabled by default.
              </li>
              <li>
                If you customize the formula rendering tag, you should use a secure (https://) path. Not all rendering services provide a secure option.
              </li>
            </ul>
          </p>

          <p>
            <strong>Customization and Use</strong>:
            <ul>
              <li>
                If this feature is enabled, text between dollar signs -- <code>$</code> -- will be interpreted as mathematical formulae. For example, <code>$\Delta$</code> would be rendered as a delta symbol.
              </li>
              <li>
                For render customization options, see the <a href="https://developers.google.com/chart/infographics/docs/formulas" target="_blank">Google Charts documentation</a> for this service.
              </li>
              <li>
                A good resource for creating TeX formulae is the <a href="https://www.codecogs.com/latex/about.php" target="_blank">CodeCogs Equation Editor</a>.
              </li>
              <li>
                Formulae are rendered to images, so email recipients will have to enable images to be shown to see the rendering.
              </li>
              <li>
                If you customize the rendering tag, you can (and should) use either or both of <code>{mathcode}</code> and <code>{urlmathcode}</code> as placeholders.
                <ul>
                  <li><code>{mathcode}</code>: The text between the <code>$</code> symbols -- i.e., the raw TeX formula; like <code>\Delta</code>.</li>
                  <li><code>{urlmathcode}</code>: The URL-encoded form of the TeX formula; like <code>%5CDelta</code>.</li>
                </ul>
              </li>
              <li>
                If you customize the <code>&lt;img&gt;</code> tag, you should include an <code>alt</code> attribute that has as human-readable a value as possible, like <code>{mathcode}</code>. This value of this attribute will be used for the plaintext version of the email (when sent from Gmail and Thunderbird), and used by screen readers for sight-impaired recipients.
              </li>
            </ul>
          </p>
        </div>

      </div>

      <div class="control-group">
        <div class="section-title">
          Hotkey (aka keyboard shortcut)
        </div>
        <div>
          <input type="checkbox" id="hotkey-shift"/><label for="hotkey-shift">SHIFT</label>
          &nbsp;+&nbsp;
          <input type="checkbox" id="hotkey-ctrl"/><label for="hotkey-ctrl">CTRL</label>
          &nbsp;+&nbsp;
          <input type="checkbox" id="hotkey-alt"/><label for="hotkey-alt">ALT</label>
          &nbsp;+&nbsp;
          <input type="text" id="hotkey-key" maxlength="1" placeholder="KEY" style="width: 3em;"/>
        </div>
        <div id="hotkey-key-warning" class="warning hidden">
          Is the key an alphanumeric value?
        </div>
        <div id="notes">
          <ul>
            <li>
              Chrome: You must reload your email web page for the new hotkey setting to take effect.
            </li>
            <li>
              Firefox and Thunderbird: You must restart the application for the new hotkey setting to take effect.
            </li>
            <li>
              You must use an alphanumeric key for the shortcut (varies by language and keyboard).
            </li>
            <li>
              The Windows key and the OS X &#8984; key cannot be used in the shortcut.
            </li>
            <li>
              To disable the use of this hotkey, leave the "key" text box empty.
            </li>
          </ul>
        </div>
      </div>

    </div>

  </div>

  <div id="changelist-container">
    <div id="changelist">
    </div>
  </div>

  <footer>
    <p>
      <em>Markdown Here</em> is open source. To ask questions, report bugs, request features, or contribute, visit the <a target="_blank" href="https://github.com/adam-p/markdown-here">Github project page</a> or the <a target="_blank" href="https://groups.google.com/forum/?fromgroups=#!forum/markdown-here">"markdown-here" Google Group</a>.
    </p>
    <p>
      Created by <a target="_blank" href="http://adam-p.github.com/">Adam Pritchard</a>.
    </p>
  </footer>

  <div id="tests-link"><a href="./test/index.html"><img title="Run tests" src="images/icon16.png"></a></div>

  <div id="saved-msg">Changes saved</div>

</body>

<script src="jsHtmlToText.js"></script>
<script src="marked.js"></script>
<script src="highlightjs/highlight.js"></script>

<script src="utils.js"></script>
<script src="markdown-render.js"></script>
<script src="markdown-here.js"></script>

<script src="options-store.js"></script>
<script src="options.js"></script>

<script src="vendor/jquery-1.9.1.js"></script>

</html>