motice
Version:
For Gnome / Growl type non-blocking notifications with Magical Css3 Effects
373 lines (336 loc) • 14.5 kB
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"><script src="/path/to/{{name}}.min.js"></script>
<link href="/path/to/{{name}}.css" rel="stylesheet" /></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">×</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>