mamboer/motice

View on GitHub
index.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

    <meta name="keywords" content="{{keywords|join(',')}}"/>
    <meta name="description" content="{{description}}"/>
    <meta name="author" content="{{author|raw}}"/>
    <!-- Site Properities -->
    <title>{{title}}</title>

    <link rel="stylesheet" type="text/css" href="dist/semantic/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="dist/css/style.css">
    <script src="dist/jquery/dist/jquery.min.js"></script>
    <script src="dist/semantic/semantic.min.js"></script>

    <!--Motice-->
    <link href="dist/css/{{name}}.css" rel="stylesheet" />
    <!--/Motice-->

    <!--toto:https://cdnjs.com/libraries/semantic-ui的提示样式-->

</head>

<body id="home">
  <div class="ui inverted black vertical segment">
    <div class="ui page grid">
      <div class="column center aligned site-header-column">
          <h1>{{name|capitalize}}</h1>
          <span class="ui mini label">v{{version}}</span>
        <p class="ui medium inverted header">
          Just a little (only 5kb compressed) notifications plugin
        </p>
        <a class="ui inverted blue huge button" href="https://github.com/mamboer/{{name}}/archive/master.zip">Download</a>
        <br />
      </div>
    </div>
  </div>

  <div class="ui vertical segment">
    <div class="ui page grid">
      <div class="column center aligned">
        <div class="addthis_sharing_toolbox"></div>
        <a href="https://github.com/mamboer" class="github-button">Follow @{{author|raw}}</a>
        <a data-count-api="/repos/mamboer/{{name}}#stargazers_count" data-count-href="/mamboer/{{name}}/stargazers" href="https://github.com/mamboer/{{name}}" class="github-button">Star</a>
        <a data-count-api="/repos/mamboer/{{name}}#forks_count" data-count-href="/mamboer/{{name}}/network" href="https://github.com/mamboer/{{name}}/fork" class="github-button">Fork</a>
      </div>
    </div>
  </div>

  <div class="ui vertical segment">
    <div class="ui page grid">
      <div class="column">
        <h1>Installation</h1>
        <p>Add styles and scripts to your page:</p>
        <pre><code data-language="html">&lt;script src="/path/to/{{name}}.min.js"&gt;&lt;/script&gt;
&lt;link href="/path/to/{{name}}.css" rel="stylesheet" /&gt;</code></pre>
        <div class="ui message warning">
            <ul>
                <li>
                    <i>Don't forget to load jQuery <b>before</b> {{name}}.min.js!</i>
                </li>
                <li>
                    {{name}}.js must be put inside the body tag.
                </li>
            </ul>
        </div>
        
        <p>Or, load Motice via require.js</p>
        <pre><code data-language="javascript">
define(['jquery','motice'],function($,Motice){
    Motice({ text:'Hello, Motice!' });    
});
</code></pre>

      </div>
    </div>
  </div>

  <div class="ui vertical segment">
    <div class="ui page grid">
      <div class="column">
        <h1>Usage</h1>
        <h4>Basic notification:</h4>
        <pre><code data-language="javascript">Motice({ text: 'Hello, Motice!' });</code></pre>
        <div class="ui blue button" onclick="Motice({ text: 'Hello, Motice!' });">Run</div>
        
        <h4>Forcing close:</h4>
        <pre><code data-language="javascript">Motice({ text: 'Hello, Motice!' });</code></pre>
        <div class="ui blue button" onclick="window['motice2']=Motice({ text: 'Click Close button to close me immediately!' });">Run</div>
        <div class="ui yellow button" onclick="motice2.close(true);">Close!</div>
       
        <h4>Notification with custom image:</h4>
        <pre><code data-language="javascript">Motice({ text: 'Motice with custom image!', image: 'http://faso.me/favicon.ico' });</pre></code>
        <div class="ui blue button" onclick="Motice({ text: 'Motice with custom image!', image: 'http://faso.me/favicon.ico' });">Run</div>
        
        <h4>Notification with title:</h4>
        <pre><code data-language="javascript">Motice({ title:'Motice' text: 'With title !'});</pre></code>
        <div class="ui blue button" onclick="Motice({ title:'Motice', text: 'With title!' });">Run</div>
        
        <h4>Notification with close button:</h4>
        <pre><code data-language="javascript">Motice({ title:'Motice' text: 'With close button !', closeButton:true });</pre></code>
        <div class="ui blue button" onclick="Motice({ title:'Motice', text: 'With close button !', closeButton:true });">Run</div>
        
        <h4>Notification with progress bar counting for hiding:</h4>
        <pre><code data-language="javascript">Motice({ title:'Motice' text: 'With progress bar !', progressBar:true });</pre></code>
        <div class="ui blue button" onclick="Motice({ title:'Motice', text: 'With progress bar !', progressBar:true });">Run</div>
        
        <h4>
            Notification on specified position:
            <select id="pos" class="ui dropdown">
                <option value="right-bottom">right-bottom</option>
                <option value="right-top" selected>right-top</option>
                <option value="left-bottom">left-bottom</option>
                <option value="left-top">left-top</option>
                <option value="center-bottom">center-bottom</option>
                <option value="center-top">center-top</option>
                <option value="fluid-bottom">fluid-bottom</option>
                <option value="fluid-top">fluid-top</option>
                <option value="center">center</option>
            </select>
        </h4>
        <pre><code data-language="javascript">Motice({ title:'Motice Position',text: 'Notification at top right', position: 'right-top' });</pre></code>
        <div class="ui blue button" onclick="Motice({ title:'Motice Position', text: 'Notification at '+$('#pos').val().replace('-',' '), position: $('#pos').val() });">Run</div>
        <h4>Notification with auto width:</h4>
        <pre><code data-language="javascript">Motice({ width: 'auto', text: 'Not too long text' });</pre></code>
        <div class="ui blue button" onclick="Motice({ width: 'auto', text: 'Not too long text' });">Run</div>
        <h4>
            Notification with specified effect:
            <select id="eff" class="ui dropdown">
                <option value=''>No Effect</option>
                <option value='default'>default</option>
                <option value='jelly' selected>jelly</option>
            </select>
        </h4>
        <pre><code data-language="javascript">Motice({ title:'Motice effect',effect: 'jelly', text: '<a href="http://github.com/mamboer/{{name}}" target="_blank">Notification with jelly effect</a>' });</pre></code>
        <div class="ui blue button" onclick='effect()'>Run</div>
        <script>
            var effect = function(){
                Motice({ 
                    title:'Motice Effect',
                    effect: $('#eff').val(), 
                    text: '<a href="http://github.com/mamboer/{{name}}" target="_blank">Notification with effect: '+ $('#eff').val()||'none' +'</a>' 
                });
            };
        </script>
      </div>
    </div>
  </div>

  <div class="ui vertical segment">
    <div class="ui page grid">
      <div class="column">
        <h1>Options</h1>
        <p>All Motice options:</p>
        <pre><code data-language="javascript">{
  // background image path (http/base64)
  image: undefined,
  // Position on screen, values: right-bottom, right-top, left-bottom, left-top, fluid-top, fluid-bottom, center-top, center-bottom
  position: 'right-bottom',
  // Theme, values: default, info, warning, success, error
  theme: 'default',
  // Template, these classes should ALWAYS be there
  template:   '<div class="motice-item">' + 
                '<div class="motice-progress"></div>' +
                '<button type="button" class="motice-close-button" role="button">&times;</button>' +
                '<div class="motice-title"></div>' +
                '<div class="motice-text"></div>' + 
            '</div>',
  // hard-code css width, use theme specifed with by default
  width: false,
  // Text that will be displayed in notification
  text: '',
  // Title
  title: null,
  // Hide by click
  clickHide: true,
  // Autohide delay timeout
  timeOut: 4500,
  // autoHide delay timeout after hover out the notification
  timeOutAfterHoverOut:2000,
  // Enable animation effects, default is 'default', another effect called 'jelly' is also provided inernally.
  effect: 'default',
  // We will put an effect class to the notification dom combining 'effectPrefix' and 'effect'
  effectPrefix:'motice-effect-',
  //progress bar
  progressBar: false,

  //close button
  closeButton: false,

  //callbacks
  onShown: function(){},
  onHidden:function(){},
  onClick: null
};</code></pre>
      </div>
    </div>
  </div>

  <div class="ui vertical segment">
    <div class="ui page grid">
      <div class="sixteen wide column">
        <h1>Themes</h1>
        <h3>Default themes:</h3>
        <div class="ui blue button" onclick="Motice({ title:'Motice Theme', theme: 'default', text: 'Default theme' });">Dark (default)</div> 
        <div class="ui blue button" onclick="Motice({ title:'Motice Theme', theme: 'info', text: 'Theme: info' });">info</div>
        <div class="ui blue button" onclick="Motice({ title:'Motice Theme', theme: 'warning', text: 'Theme: warning' });">warning</div>
        <div class="ui blue button" onclick="Motice({ title:'Motice Theme', theme: 'success', text: 'Theme: success' });">success</div>
        <div class="ui blue button" onclick="Motice({ title:'Motice Theme', theme: 'error', text: 'Theme: error' });">error</div>
        <h3>Creating custom themes:</h3>
      </div>
      <div class="eight wide column">
        <h4>Example:</h4>
        <pre><code data-language="javascript">Motice.addTheme('dark', {
    classes: 'motice-theme-dark'
});</code></pre>
        <pre><code data-language="css">.motice-theme-dark {
  background-color: #202020;
  color: #f5f5f5;
}</code></pre>
      </div>
      <div class="eight wide column">
        <h4>Options:</h4>
        <pre><code data-language="javascript">{
  /*

    Blocks order:

    | container
    | - item
    | -- progress
    | -- close-button
    | -- title
    | -- text
    | - item
    | -- progress
    | -- close-button
    | -- title
    | -- text
    | ...

  */

  // Classes that will be added to base element

  classes: ''
}</code></pre>
      </div>
    </div>
  </div>

  <div class="ui vertical segment">
    <div class="ui page grid">
      <div class="sixteen wide column">
        <h1>Custom animation effects</h1>
        <p>
          You can use your own show and hide css3 animations. If user's browser does not support css3 animations, simple hide/show will be used as fallback.
        </p>
      </div>
      <div class="eight wide column">
        <p>
          <b>CSS</b>
        </p>
        <pre><code data-language="css">@keyframes custom-hide-animation {
  0% {
    transform: scale(1, 1);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.5, 1.5);
  }
}
@keyframes custom-show-animation {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.motice-effect-custom.motice-hide {
    animation: custom-hide-animation 0.5s forwards;
}
.motice-effect-custom.motice-show {
    animation: custom-show-animation 0.5s forwards;
}
</code></pre>
      </div>
      <div class="eight wide column">
        <p>
          <b>JavaScript</b>
        </p>
        <pre><code data-language="javascript">Motice({
  text: 'Custom hide animation',
  effect: 'custom'
});</code></pre>
        <div class="ui blue button" onclick="Motice({text: 'Custom hide animation', effect: 'custom'});">Run</div>
      </div>
    </div>
  </div>

  <div class="ui vertical segment">
    <div class="ui page grid">
      <div class="column">
        <h1>Build and run this site</h1>
        <p>
          To build Motice from sources you need to install Gulp
        </p>
        <pre><code data-language="shell">$ npm install gulp-cli -g</code></pre>
        <p>
          Then navigate in terminal to downloaded sources and install some required modules
        </p>
        <pre><code data-language="shell">$ npm install</code></pre>
        <p>
          Then run Gulp, and preview at http://localhost:4000/site/
        </p>
        <pre><code data-language="shell">$ gulp</code></pre>
        <p>
          You can take compressed and optimized files from <b>dist</b> folder
        </p>
      </div>
    </div>
  </div>

  <div class="ui inverted black vertical segment">
    <div class="ui page grid">
      <div class="column">
        <p>
          Created by <a href="http://faso.me">Levin Van</a>, 2015 - <script>document.write(new Date().getFullYear());</script>
          <br />From China
          <br />
          <br />Site built with awesome <a href="http://semantic-ui.com">Semantic UI</a>
        </p>
      </div>
    </div>
  </div>
  
    <!--Motice--> 
    <script src="dist/js/{{name}}.js"></script>
    <!--/Motice-->
  
    <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5510fb2a3e0ad455" async="async"></script>

    <link href="dist/rainbow-code/themes/css/solarized-dark.css" rel="stylesheet" type="text/css" />
    <script src="dist/rainbow-code/dist/rainbow.min.js" type="text/javascript"></script>
    <script src="dist/rainbow-code/src/language/generic.js" type="text/javascript"></script>
    <script src="dist/rainbow-code/src/language/shell.js" type="text/javascript"></script>
    <script src="dist/rainbow-code/src/language/html.js" type="text/javascript"></script>
    <script src="dist/rainbow-code/src/language/css.js" type="text/javascript"></script>
    <script src="dist/rainbow-code/src/language/javascript.js" type="text/javascript"></script>
    
    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?{{baiduTJCode}}";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>

</body>

</html>