molong/sentcms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新前端文件

Browse Source
This commit is contained in:
molong
2019-07-06 16:59:35 +08:00
parent 777b452685
commit 79615defdb
1758 changed files with 315372 additions and 12014 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
public/static/libs/requirejs-plugins/examples/async.html Normal file
View File

@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RequireJS Async plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.info{background-color:#cfc; border:2px solid #ada; padding:10px 20px; margin:2em 0}
</style>
</head>
<body>
<div id="wrapper">
<h1>RequireJS async plugin</h1>
<div class="info">
<p>
Google Maps loads many JS files asynchronously, so listening just to the first script load
isn't enough to check if it is ready to be used, another problem is that the regular gmaps script
uses document.write, so we need to pass a `callback` parameter to make it not use `document.write`
and wait for the callback call.
<br>
[<a href="http://code.google.com/apis/maps/documentation/javascript/basics.html#Async">More info</a>]
</p>
</div>
<div id="map-canvas" style="width:400px; height:300px; border:1px solid #ccc; background-color:#f5f5f5"></div>
<h2>JSONP</h2>
<div class="info">
<p>
Note that the async! plugin isn't really required for JSONP calls if the response is an <strong>Object</strong>.
If the response is an Array or String you will need the async! plugin. [<a href="http://requirejs.org/docs/api.html#jsonp">reference</a>]
</p>
<p>
The default parameter used to set the callback name is <code>callback</code>, you can set a different name
by passing it at the end of the dependency URL preceded by a exclamation mark (<code>!</code>), e.g.: <code>async!http://example.com/?foo=bar!jsoncallback</code>
</p>
</div>
<h3>Flickr feed</h3>
<div id="flickr-feed"></div>
</div>
<script src="../lib/require.js"></script>
<script>
require({
waitSeconds : 120, //make sure it is enough to load all gmaps scripts
paths : {
async : '../src/async' //alias to plugin
}
});
// you can use a "!callbackName" at the end of the URL
// to specify name of parameter that expects callback function name
// the default value is "!callback" if not present.
// Notice that flickr uses "!jsoncallback".
require(
[
'async!http://api.flickr.com/services/feeds/photos_public.gne?id=27041612@N06&format=json!jsoncallback',
'async!http://maps.google.com/maps/api/js?sensor=false'
],
function(photos){
//flickr
var flickrDiv = document.getElementById('flickr-feed'),
idx = Math.round((photos.items.length - 1) * Math.random());
flickrDiv.innerHTML += photos.items[idx].description;
//Google maps is available and all components are ready to use.
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
}
);
</script>
</body>
</html>

3
public/static/libs/requirejs-plugins/examples/data/bar.json Normal file
View File

@@ -0,0 +1,3 @@
{
"text" : "Awesome"
}

13
public/static/libs/requirejs-plugins/examples/data/bar.md Normal file
View File

@@ -0,0 +1,13 @@
## Another markdown file
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
> this is a quote.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
function doSomethingAwesome(){
console.log('fuck yeahh!!');
}
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

4
public/static/libs/requirejs-plugins/examples/data/foo.json Normal file
View File

@@ -0,0 +1,4 @@
{
"lorem" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"bar" : 1234567890
}

20
public/static/libs/requirejs-plugins/examples/data/foo.md Normal file
View File

@@ -0,0 +1,20 @@
# This content was loaded from a markdown file!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
## It is very useful for content-heavy sites
Ut enim ad minim veniam, quis nostrud *exercitation* ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure **dolor in reprehenderit** in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia `deserunt` mollit
anim id est laborum.
### You can change the markdownConverter if needed
- the markdownConverter is kept as a separate file:
- if you project already uses one you can simply reuse it.
- so plugin is more flexible.
- this plugin is not targeted to dynamic loading after build:
- check plugin source code for more info.

83
public/static/libs/requirejs-plugins/examples/font.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RequireJS + WebFont Loader</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{font-family:sans-serif}
.h3{font-size:1.2em}
.info{background-color:#cfc; border:2px solid #ada; padding:10px 20px; margin:2em 0}
.wf-loading .f-1,
.wf-loading .f-2,
.wf-loading .f-3 {
/* avoid FOUC */
visibility:hidden;
}
.f-1{font-family:"Tangerine"}
.f-2{font-family:"Cantarell"}
.f-3{font-family:"Yanone Kaffeesatz"}
</style>
</head>
<script>
// add .wf-loading class to avoid FOUC
// use JS to add class to avoid hidding content if JS isn't available
document.documentElement.className += ' wf-loading';
</script>
<body>
<div id="wrapper">
<h1>RequireJS + WebFont Loader</h1>
<div class="info">
<p>
Example of how to load webfonts using the <a href="https://code.google.com/apis/webfonts/docs/webfont_loader.html">Google WebFont Loader API</a>.
</p>
<h2 class="h3">Syntax</h2>
<p>
<code>font!google,families:[Tangerine,Cantarell]</code>
</p>
<p>
You can load fonts from multiple vendors by splitting them with &quot;|&quot;.
</p>
<p>
<code>font!google,families:[Tangerine,Cantarell,Yanone Kaffeesatz:700]|typekit,id:123|monotype,projectId:555</code>
</p>
<p>
Check the <a href="https://code.google.com/apis/webfonts/docs/webfont_loader.html">WebFont Loader API documentation</a> for available options.
</p>
</div>
<div id="sample">
<h2 class="f-1">Lorem Ipsum dolor</h2>
<p class="f-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p class="f-3">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<script src="../lib/require.js"></script>
<script>
require({
waitSeconds : 15, //make sure it is enough to load all scripts
paths : {
//alias to plugins
async : '../src/async',
goog : '../src/goog',
font : '../src/font',
propertyParser : '../src/propertyParser'
}
});
require(['font!google,families:[Tangerine,Cantarell,Yanone Kaffeesatz:700]'], function(){
//fonts are loaded
var ready = document.createElement('div');
ready.className = 'f-1';
ready.innerHTML = 'All fonts loaded!';
ready.style.fontSize = '34px';
document.getElementById('sample').appendChild(ready);
});
</script>
</body>
</html>

127
public/static/libs/requirejs-plugins/examples/goog.html Normal file
View File

@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RequireJS Google Ajax API plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.info{background-color:#cfc; border:2px solid #ada; padding:10px 20px; margin:2em 0}
</style>
</head>
<body>
<div id="wrapper">
<h1>RequireJS + Google Ajax API plugin</h1>
<div class="info">
<p>
This plugin depends on the Async plugin and loads files using the <code>google.load</code> method from the <a href="http://code.google.com/apis/loader/">Google Loader</a>.
</p>
<p>
Notice that it can only load the libraries listed on the <a href="http://code.google.com/apis/loader/#AvailableAPIs">Available APIs section</a>.
</p>
</div>
<h2>Google Charts - corechart</h2>
<div id="chart_div"></div>
<h2>Google Charts - geochart</h2>
<div id="map_canvas" style="width:500px"></div>
<h2>Google Search API</h2>
<div id="branding"></div>
<div id="search_results"> </div>
</div>
<script src="../lib/require.js"></script>
<script>
require({
waitSeconds : 15, //make sure it is enough to load all scripts
paths : {
//alias to plugins
async : '../src/async',
goog : '../src/goog',
propertyParser : '../src/propertyParser'
}
});
//To load google libraries you should follow the format "goog!moduleName,version,packages:[packages],language:en,anotherOption:value"
require(['goog!visualization,1,packages:[corechart,geochart]', 'goog!search,1'], function(){
// visualization + corechart + geochart + search are loaded
// code copied from google charts docs:
// http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
// code copied from google charts docs:
// http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html
var data = new google.visualization.DataTable();
data.addRows(6);
data.addColumn('string', 'Country');
data.addColumn('number', 'Popularity');
data.setValue(0, 0, 'Germany');
data.setValue(0, 1, 200);
data.setValue(1, 0, 'United States');
data.setValue(1, 1, 300);
data.setValue(2, 0, 'Brazil');
data.setValue(2, 1, 400);
data.setValue(3, 0, 'Canada');
data.setValue(3, 1, 500);
data.setValue(4, 0, 'France');
data.setValue(4, 1, 600);
data.setValue(5, 0, 'RU');
data.setValue(5, 1, 700);
var options = {};
var container = document.getElementById('map_canvas');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, options);
//code copied from http://code.google.com/apis/ajax/playground/?exp=libraries#the_hello_world_of_news_search
//and slightly modified
var newsSearch = new google.search.WebSearch(),
resultHolder = document.getElementById('search_results');
function searchComplete() {
resultHolder.innerHTML = '';
if (newsSearch.results && newsSearch.results.length > 0) {
for (var i = 0; i < newsSearch.results.length; i++) {
var p = document.createElement('p');
var a = document.createElement('a');
a.href = newsSearch.results[i].url;
a.innerHTML = newsSearch.results[i].title;
p.appendChild(a);
resultHolder.appendChild(p);
}
}
}
newsSearch.setSearchCompleteCallback(this, searchComplete, null);
newsSearch.execute('RequireJS plugins');
// Include the required Google branding
google.search.Search.getBranding('branding');
});
</script>
</body>
</html>

70
public/static/libs/requirejs-plugins/examples/image.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RequireJS image plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
<h1>RequireJS image plugin</h1>
<p>Note that <code>waitSeconds</code> should be large enough to load all the images, otherwise module may timeout.</p>
<p>Use this plugin only on specific cases and make sure you set a large <a href="http://requirejs.org/docs/api.html#config">waitSeconds</a> (default is 7 seconds).</p>
<h2>Notes:</h2>
<ul>
<li>Image paths are relative to the HTML file by default.</li>
<li>Support absolute paths as well.</li>
<li>Appending <code>!bust</code> to the file name will avoid caching the image.</li>
<li>Appending <code>!rel</code> to the file name will load image realtive to baseUrl or module path.</li>
<li>It will always return the same image object unless you use the <code>!bust</code> flag, so you may need to clone the image element before inserting it multiple times into the same document.</li>
</ul>
<hr />
</div>
<script src="../lib/require.js"></script>
<script>
require.config({
waitSeconds : 45, //should be enough to load images
paths : {
image : '../src/image' //alias to plugin
}
});
require([
'image!img/lol_cat.jpg',
'image!http://30.media.tumblr.com/tumblr_lgd1neNYSL1qbwkzvo1_500.jpg',
'image!img/bike.jpg!bust',
'image!img/bike.jpg!bust',
'image!img/lol_cat.jpg',
'img/relativePath.js'
], function(cat, awesome, bike1, bike2, sameCat, relative){
var wrapper = document.getElementById('wrapper');
//add loaded images to the document!
//returns an Image object..
wrapper.appendChild(awesome);
wrapper.appendChild(cat);
//requireJS will return same image object unless you use `!bust`
var sameBike = document.createElement('div');
sameBike.innerHTML = 'Is same bike cat? : '+ (bike1 === bike2);
wrapper.appendChild(sameBike);
wrapper.appendChild(bike1);
wrapper.appendChild(bike2);
var sameLol = document.createElement('div');
sameLol.innerHTML = 'Is same lol cat? : '+ (cat === sameCat);
wrapper.appendChild(sameLol);
//so we need to "deep-clone" the Element to be able
//to insert it multiple times into the same document
//wrapper.appendChild(sameCat.cloneNode(true)); //insert a clone of the image
wrapper.appendChild(sameCat);//swap image position
relative.init(wrapper);
});
</script>
</body>
</html>

BIN
public/static/libs/requirejs-plugins/examples/img/bike.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
public/static/libs/requirejs-plugins/examples/img/lol_cat.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

11
public/static/libs/requirejs-plugins/examples/img/relativePath.js Normal file
View File

@@ -0,0 +1,11 @@
//use the !rel flag to load file relative to this module or to baseUrl
define(['image!./software_engineer.png!rel'], function(engineer){
return {
init : function(wrapper){
engineer.style.display = 'block';
wrapper.appendChild(engineer);
}
};
});

BIN
public/static/libs/requirejs-plugins/examples/img/software_engineer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

5
public/static/libs/requirejs-plugins/examples/js/foo Normal file
View File

@@ -0,0 +1,5 @@
define(function(){
return {
msg : 'foo loaded!'
};
});

5
public/static/libs/requirejs-plugins/examples/js/foo.bar Normal file
View File

@@ -0,0 +1,5 @@
define(function(){
return {
msg : 'foo.bar loaded !'
};
});

37
public/static/libs/requirejs-plugins/examples/json.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RequireJS JSON plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
<h1>RequireJS JSON plugin</h1>
<p>Helper for loading JSON files, it will also work during optimization (wrapping JSON files into a `define` call).</p>
<p>If you want to load JSONP data use the `async` plugin instead.</p>
<p>You can set the flag <code>`!bust`</code> to prevent caching the JSON response, it will append a query argument <code>&quot;bust=RANDOM_INTEGER&quot;</code> to the URI.</p>
<h2>Output:</h2>
<div id="output" style="border:1px solid #ccc; background:#f5f5f5; padding:10px 20px"></div>
</div>
<script src="../lib/require.js"></script>
<script>
require.config({
waitSeconds : 2,
paths : {
text : '../lib/text', //text is required
json : '../src/json' //alias to plugin
}
});
// adding the flag `!bust` to the end of dependency name will avoid caching
require(['json!data/foo.json', 'json!data/bar.json!bust'], function(foo, bar){
var out = document.getElementById('output');
//data is parsed into an object
out.innerHTML += '<p><b>lorem:<\/b> '+ foo.lorem +'<\/p>';
out.innerHTML += '<p><b>bar:<\/b> '+ foo.bar +'<\/p>';
out.innerHTML += '<p><b>message:<\/b> '+ bar.text +'<\/p>';
});
</script>
</body>
</html>

38
public/static/libs/requirejs-plugins/examples/mdown.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RequireJS Markdown plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
<h1>RequireJS Markdown plugin</h1>
<p>Helper for loading Markdown files, it will precompile Markdown files into HTML during optimization and wrap them into <code>define()</code> calls.</p>
<p>
If you set <code>pragmasOnSave.excludeMdown=true</code> the plugin code will be removed during the build, so it won't affect filesize.
</p>
<h2>Output:</h2>
<div id="output" style="border:1px solid #ccc; background:#f5f5f5; padding:10px 20px"></div>
</div>
<script src="../lib/require.js"></script>
<script>
require.config({
waitSeconds : 2,
paths : {
text : '../lib/text', //text is required
markdownConverter : '../lib/Markdown.Converter', //used by plugin
mdown : '../src/mdown' //alias to plugin
}
});
require(['mdown!data/foo.md', 'mdown!data/bar.md'], function(foo, bar){
var out = document.getElementById('output');
// data will be compiled into HTML
out.innerHTML += foo;
out.innerHTML += bar;
});
</script>
</body>
</html>

34
public/static/libs/requirejs-plugins/examples/noext.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RequireJS noext! plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
<h1>RequireJS noext! plugin</h1>
<p>Helper for loading files without appending the &quot;.js&quot; extension.</p>
<p>
Note that it will append a query string &quot;noext=1&quot; to the URL to avoid inserting the JS extension.
</p>
<h2>Output:</h2>
<div id="output" style="border:1px solid #ccc; background:#f5f5f5; padding:10px 20px"></div>
</div>
<script src="../lib/require.js"></script>
<script>
require.config({
paths : {
noext : '../src/noext' //alias to plugin
}
});
require(['noext!js/foo.bar', 'noext!js/foo'], function(foo1, foo2){
var out = document.getElementById('output');
//data is parsed into an object
out.innerHTML += '<p><b>foo.bar:<\/b> '+ foo1.msg +'<\/p>';
out.innerHTML += '<p><b>foo:<\/b> '+ foo2.msg +'<\/p>';
});
</script>
</body>
</html>