patrick
5 年前
共有 13 个文件被更改，包括 15775 次插入 和 0 次删除
+ 500
- 0
form/assets/js/holder.js
查看文件
| /* | |||||
| Holder - 2.2 - client side image placeholders | |||||
| (c) 2012-2013 Ivan Malopinsky / http://imsky.co | |||||
| Provided under the MIT License. | |||||
| Commercial use requires attribution. | |||||
| */ | |||||
| var Holder = Holder || {}; | |||||
| (function (app, win) { | |||||
| var preempted = false, | |||||
| fallback = false, | |||||
| canvas = document.createElement('canvas'); | |||||
| var dpr = 1, bsr = 1; | |||||
| var resizable_images = []; | |||||
| if (!canvas.getContext) { | |||||
| fallback = true; | |||||
| } else { | |||||
| if (canvas.toDataURL("image/png") | |||||
| .indexOf("data:image/png") < 0) { | |||||
| //Android doesn't support data URI | |||||
| fallback = true; | |||||
| } else { | |||||
| var ctx = canvas.getContext("2d"); | |||||
| } | |||||
| } | |||||
| if(!fallback){ | |||||
| dpr = window.devicePixelRatio || 1, | |||||
| bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; | |||||
| } | |||||
| var ratio = dpr / bsr; | |||||
| var settings = { | |||||
| domain: "holder.js", | |||||
| images: "img", | |||||
| bgnodes: ".holderjs", | |||||
| themes: { | |||||
| "gray": { | |||||
| background: "#eee", | |||||
| foreground: "#aaa", | |||||
| size: 12 | |||||
| }, | |||||
| "social": { | |||||
| background: "#3a5a97", | |||||
| foreground: "#fff", | |||||
| size: 12 | |||||
| }, | |||||
| "industrial": { | |||||
| background: "#434A52", | |||||
| foreground: "#C2F200", | |||||
| size: 12 | |||||
| }, | |||||
| "sky": { | |||||
| background: "#0D8FDB", | |||||
| foreground: "#fff", | |||||
| size: 12 | |||||
| }, | |||||
| "vine": { | |||||
| background: "#39DBAC", | |||||
| foreground: "#1E292C", | |||||
| size: 12 | |||||
| }, | |||||
| "lava": { | |||||
| background: "#F8591A", | |||||
| foreground: "#1C2846", | |||||
| size: 12 | |||||
| } | |||||
| }, | |||||
| stylesheet: "" | |||||
| }; | |||||
| app.flags = { | |||||
| dimensions: { | |||||
| regex: /^(\d+)x(\d+)$/, | |||||
| output: function (val) { | |||||
| var exec = this.regex.exec(val); | |||||
| return { | |||||
| width: +exec[1], | |||||
| height: +exec[2] | |||||
| } | |||||
| } | |||||
| }, | |||||
| fluid: { | |||||
| regex: /^([0-9%]+)x([0-9%]+)$/, | |||||
| output: function (val) { | |||||
| var exec = this.regex.exec(val); | |||||
| return { | |||||
| width: exec[1], | |||||
| height: exec[2] | |||||
| } | |||||
| } | |||||
| }, | |||||
| colors: { | |||||
| regex: /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i, | |||||
| output: function (val) { | |||||
| var exec = this.regex.exec(val); | |||||
| return { | |||||
| size: settings.themes.gray.size, | |||||
| foreground: "#" + exec[2], | |||||
| background: "#" + exec[1] | |||||
| } | |||||
| } | |||||
| }, | |||||
| text: { | |||||
| regex: /text\:(.*)/, | |||||
| output: function (val) { | |||||
| return this.regex.exec(val)[1]; | |||||
| } | |||||
| }, | |||||
| font: { | |||||
| regex: /font\:(.*)/, | |||||
| output: function (val) { | |||||
| return this.regex.exec(val)[1]; | |||||
| } | |||||
| }, | |||||
| auto: { | |||||
| regex: /^auto$/ | |||||
| }, | |||||
| textmode: { | |||||
| regex: /textmode\:(.*)/, | |||||
| output: function(val){ | |||||
| return this.regex.exec(val)[1]; | |||||
| } | |||||
| } | |||||
| } | |||||
| //getElementsByClassName polyfill | |||||
| document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s}) | |||||
| //getComputedStyle polyfill | |||||
| window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this}) | |||||
| //http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications | |||||
| function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}} | |||||
| //https://gist.github.com/991057 by Jed Schmidt with modifications | |||||
| function selector(a){ | |||||
| a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]); | |||||
| var ret=[]; b!==null&&(b.length?ret=b:b.length===0?ret=b:ret=[b]); return ret; | |||||
| } | |||||
| //shallow object property extend | |||||
| function extend(a,b){ | |||||
| var c={}; | |||||
| for(var i in a){ | |||||
| if(a.hasOwnProperty(i)){ | |||||
| c[i]=a[i]; | |||||
| } | |||||
| } | |||||
| for(var i in b){ | |||||
| if(b.hasOwnProperty(i)){ | |||||
| c[i]=b[i]; | |||||
| } | |||||
| } | |||||
| return c | |||||
| } | |||||
| //hasOwnProperty polyfill | |||||
| if (!Object.prototype.hasOwnProperty) | |||||
| /*jshint -W001, -W103 */ | |||||
| Object.prototype.hasOwnProperty = function(prop) { | |||||
| var proto = this.__proto__ || this.constructor.prototype; | |||||
| return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]); | |||||
| } | |||||
| /*jshint +W001, +W103 */ | |||||
| function text_size(width, height, template) { | |||||
| height = parseInt(height, 10); | |||||
| width = parseInt(width, 10); | |||||
| var bigSide = Math.max(height, width) | |||||
| var smallSide = Math.min(height, width) | |||||
| var scale = 1 / 12; | |||||
| var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale); | |||||
| return { | |||||
| height: Math.round(Math.max(template.size, newHeight)) | |||||
| } | |||||
| } | |||||
| function draw(args) { | |||||
| var ctx = args.ctx; | |||||
| var dimensions = args.dimensions; | |||||
| var template = args.template; | |||||
| var ratio = args.ratio; | |||||
| var holder = args.holder; | |||||
| var literal = holder.textmode == "literal"; | |||||
| var exact = holder.textmode == "exact"; | |||||
| var ts = text_size(dimensions.width, dimensions.height, template); | |||||
| var text_height = ts.height; | |||||
| var width = dimensions.width * ratio, | |||||
| height = dimensions.height * ratio; | |||||
| var font = template.font ? template.font : "sans-serif"; | |||||
| canvas.width = width; | |||||
| canvas.height = height; | |||||
| ctx.textAlign = "center"; | |||||
| ctx.textBaseline = "middle"; | |||||
| ctx.fillStyle = template.background; | |||||
| ctx.fillRect(0, 0, width, height); | |||||
| ctx.fillStyle = template.foreground; | |||||
| ctx.font = "bold " + text_height + "px " + font; | |||||
| var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height)); | |||||
| if (literal) { | |||||
| var dimensions = holder.dimensions; | |||||
| text = dimensions.width + "x" + dimensions.height; | |||||
| } | |||||
| else if(exact && holder.exact_dimensions){ | |||||
| var dimensions = holder.exact_dimensions; | |||||
| text = (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height)); | |||||
| } | |||||
| var text_width = ctx.measureText(text).width; | |||||
| if (text_width / width >= 0.75) { | |||||
| text_height = Math.floor(text_height * 0.75 * (width / text_width)); | |||||
| } | |||||
| //Resetting font size if necessary | |||||
| ctx.font = "bold " + (text_height * ratio) + "px " + font; | |||||
| ctx.fillText(text, (width / 2), (height / 2), width); | |||||
| return canvas.toDataURL("image/png"); | |||||
| } | |||||
| function render(mode, el, holder, src) { | |||||
| var dimensions = holder.dimensions, | |||||
| theme = holder.theme, | |||||
| text = holder.text ? decodeURIComponent(holder.text) : holder.text; | |||||
| var dimensions_caption = dimensions.width + "x" + dimensions.height; | |||||
| theme = (text ? extend(theme, { | |||||
| text: text | |||||
| }) : theme); | |||||
| theme = (holder.font ? extend(theme, { | |||||
| font: holder.font | |||||
| }) : theme); | |||||
| el.setAttribute("data-src", src); | |||||
| holder.theme = theme; | |||||
| el.holder_data = holder; | |||||
| if (mode == "image") { | |||||
| el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption); | |||||
| if (fallback || !holder.auto) { | |||||
| el.style.width = dimensions.width + "px"; | |||||
| el.style.height = dimensions.height + "px"; | |||||
| } | |||||
| if (fallback) { | |||||
| el.style.backgroundColor = theme.background; | |||||
| } else { | |||||
| el.setAttribute("src", draw({ctx: ctx, dimensions: dimensions, template: theme, ratio:ratio, holder: holder})); | |||||
| if(holder.textmode && holder.textmode == "exact"){ | |||||
| resizable_images.push(el); | |||||
| resizable_update(el); | |||||
| } | |||||
| } | |||||
| } else if (mode == "background") { | |||||
| if (!fallback) { | |||||
| el.style.backgroundImage = "url(" + draw({ctx:ctx, dimensions: dimensions, template: theme, ratio: ratio, holder: holder}) + ")"; | |||||
| el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px"; | |||||
| } | |||||
| } else if (mode == "fluid") { | |||||
| el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption); | |||||
| if (dimensions.height.slice(-1) == "%") { | |||||
| el.style.height = dimensions.height | |||||
| } else { | |||||
| el.style.height = dimensions.height + "px" | |||||
| } | |||||
| if (dimensions.width.slice(-1) == "%") { | |||||
| el.style.width = dimensions.width | |||||
| } else { | |||||
| el.style.width = dimensions.width + "px" | |||||
| } | |||||
| if (el.style.display == "inline" || el.style.display === "" || el.style.display == "none") { | |||||
| el.style.display = "block"; | |||||
| } | |||||
| if (fallback) { | |||||
| el.style.backgroundColor = theme.background; | |||||
| } else { | |||||
| resizable_images.push(el); | |||||
| resizable_update(el); | |||||
| } | |||||
| } | |||||
| } | |||||
| function dimension_check(el, callback) { | |||||
| var dimensions = { | |||||
| height: el.clientHeight, | |||||
| width: el.clientWidth | |||||
| }; | |||||
| if (!dimensions.height && !dimensions.width) { | |||||
| if (el.hasAttribute("data-holder-invisible")) { | |||||
| throw new Error("Holder: placeholder is not visible"); | |||||
| } else { | |||||
| el.setAttribute("data-holder-invisible", true) | |||||
| setTimeout(function () { | |||||
| callback.call(this, el) | |||||
| }, 1) | |||||
| return null; | |||||
| } | |||||
| } else { | |||||
| el.removeAttribute("data-holder-invisible") | |||||
| } | |||||
| return dimensions; | |||||
| } | |||||
| function resizable_update(element) { | |||||
| var images; | |||||
| if (element.nodeType == null) { | |||||
| images = resizable_images; | |||||
| } else { | |||||
| images = [element] | |||||
| } | |||||
| for (var i in images) { | |||||
| if (!images.hasOwnProperty(i)) { | |||||
| continue; | |||||
| } | |||||
| var el = images[i] | |||||
| if (el.holder_data) { | |||||
| var holder = el.holder_data; | |||||
| var dimensions = dimension_check(el, resizable_update) | |||||
| if(dimensions){ | |||||
| if(holder.fluid){ | |||||
| el.setAttribute("src", draw({ | |||||
| ctx: ctx, | |||||
| dimensions: dimensions, | |||||
| template: holder.theme, | |||||
| ratio: ratio, | |||||
| holder: holder | |||||
| })) | |||||
| } | |||||
| if(holder.textmode && holder.textmode == "exact"){ | |||||
| holder.exact_dimensions = dimensions; | |||||
| el.setAttribute("src", draw({ | |||||
| ctx: ctx, | |||||
| dimensions: holder.dimensions, | |||||
| template: holder.theme, | |||||
| ratio: ratio, | |||||
| holder: holder | |||||
| })) | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| function parse_flags(flags, options) { | |||||
| var ret = { | |||||
| theme: extend(settings.themes.gray, {}) | |||||
| }; | |||||
| var render = false; | |||||
| for (sl = flags.length, j = 0; j < sl; j++) { | |||||
| var flag = flags[j]; | |||||
| if (app.flags.dimensions.match(flag)) { | |||||
| render = true; | |||||
| ret.dimensions = app.flags.dimensions.output(flag); | |||||
| } else if (app.flags.fluid.match(flag)) { | |||||
| render = true; | |||||
| ret.dimensions = app.flags.fluid.output(flag); | |||||
| ret.fluid = true; | |||||
| } else if (app.flags.textmode.match(flag)) { | |||||
| ret.textmode = app.flags.textmode.output(flag) | |||||
| } else if (app.flags.colors.match(flag)) { | |||||
| ret.theme = app.flags.colors.output(flag); | |||||
| } else if (options.themes[flag]) { | |||||
| //If a theme is specified, it will override custom colors | |||||
| if(options.themes.hasOwnProperty(flag)){ | |||||
| ret.theme = extend(options.themes[flag], {}); | |||||
| } | |||||
| } else if (app.flags.font.match(flag)) { | |||||
| ret.font = app.flags.font.output(flag); | |||||
| } else if (app.flags.auto.match(flag)) { | |||||
| ret.auto = true; | |||||
| } else if (app.flags.text.match(flag)) { | |||||
| ret.text = app.flags.text.output(flag); | |||||
| } | |||||
| } | |||||
| return render ? ret : false; | |||||
| } | |||||
| for (var flag in app.flags) { | |||||
| if (!app.flags.hasOwnProperty(flag)) continue; | |||||
| app.flags[flag].match = function (val) { | |||||
| return val.match(this.regex) | |||||
| } | |||||
| } | |||||
| app.add_theme = function (name, theme) { | |||||
| name != null && theme != null && (settings.themes[name] = theme); | |||||
| return app; | |||||
| }; | |||||
| app.add_image = function (src, el) { | |||||
| var node = selector(el); | |||||
| if (node.length) { | |||||
| for (var i = 0, l = node.length; i < l; i++) { | |||||
| var img = document.createElement("img") | |||||
| img.setAttribute("data-src", src); | |||||
| node[i].appendChild(img); | |||||
| } | |||||
| } | |||||
| return app; | |||||
| }; | |||||
| app.run = function (o) { | |||||
| preempted = true; | |||||
| var options = extend(settings, o), | |||||
| images = [], | |||||
| imageNodes = [], | |||||
| bgnodes = []; | |||||
| if (typeof (options.images) == "string") { | |||||
| imageNodes = selector(options.images); | |||||
| } else if (window.NodeList && options.images instanceof window.NodeList) { | |||||
| imageNodes = options.images; | |||||
| } else if (window.Node && options.images instanceof window.Node) { | |||||
| imageNodes = [options.images]; | |||||
| } | |||||
| if (typeof (options.bgnodes) == "string") { | |||||
| bgnodes = selector(options.bgnodes); | |||||
| } else if (window.NodeList && options.elements instanceof window.NodeList) { | |||||
| bgnodes = options.bgnodes; | |||||
| } else if (window.Node && options.bgnodes instanceof window.Node) { | |||||
| bgnodes = [options.bgnodes]; | |||||
| } | |||||
| for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]); | |||||
| var holdercss = document.getElementById("holderjs-style"); | |||||
| if (!holdercss) { | |||||
| holdercss = document.createElement("style"); | |||||
| holdercss.setAttribute("id", "holderjs-style"); | |||||
| holdercss.type = "text/css"; | |||||
| document.getElementsByTagName("head")[0].appendChild(holdercss); | |||||
| } | |||||
| if (!options.nocss) { | |||||
| if (holdercss.styleSheet) { | |||||
| holdercss.styleSheet.cssText += options.stylesheet; | |||||
| } else { | |||||
| holdercss.appendChild(document.createTextNode(options.stylesheet)); | |||||
| } | |||||
| } | |||||
| var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)"); | |||||
| for (var l = bgnodes.length, i = 0; i < l; i++) { | |||||
| var src = window.getComputedStyle(bgnodes[i], null) | |||||
| .getPropertyValue("background-image"); | |||||
| var flags = src.match(cssregex); | |||||
| var bgsrc = bgnodes[i].getAttribute("data-background-src"); | |||||
| if (flags) { | |||||
| var holder = parse_flags(flags[1].split("/"), options); | |||||
| if (holder) { | |||||
| render("background", bgnodes[i], holder, src); | |||||
| } | |||||
| } else if (bgsrc != null) { | |||||
| var holder = parse_flags(bgsrc.substr(bgsrc.lastIndexOf(options.domain) + options.domain.length + 1) | |||||
| .split("/"), options); | |||||
| if (holder) { | |||||
| render("background", bgnodes[i], holder, src); | |||||
| } | |||||
| } | |||||
| } | |||||
| for (l = images.length, i = 0; i < l; i++) { | |||||
| var attr_data_src, attr_src; | |||||
| attr_src = attr_data_src = src = null; | |||||
| try { | |||||
| attr_src = images[i].getAttribute("src"); | |||||
| attr_datasrc = images[i].getAttribute("data-src"); | |||||
| } catch (e) {} | |||||
| if (attr_datasrc == null && !! attr_src && attr_src.indexOf(options.domain) >= 0) { | |||||
| src = attr_src; | |||||
| } else if ( !! attr_datasrc && attr_datasrc.indexOf(options.domain) >= 0) { | |||||
| src = attr_datasrc; | |||||
| } | |||||
| if (src) { | |||||
| var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1) | |||||
| .split("/"), options); | |||||
| if (holder) { | |||||
| if (holder.fluid) { | |||||
| render("fluid", images[i], holder, src) | |||||
| } else { | |||||
| render("image", images[i], holder, src); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| return app; | |||||
| }; | |||||
| contentLoaded(win, function () { | |||||
| if (window.addEventListener) { | |||||
| window.addEventListener("resize", resizable_update, false); | |||||
| window.addEventListener("orientationchange", resizable_update, false); | |||||
| } else { | |||||
| window.attachEvent("onresize", resizable_update) | |||||
| } | |||||
| preempted || app.run(); | |||||
| }); | |||||
| if (typeof define === "function" && define.amd) { | |||||
| define([], function () { | |||||
| return app; | |||||
| }); | |||||
| } | |||||
| })(Holder, window); |
+ 1
- 0
form/assets/js/holder.min.js
文件差异内容过多而无法显示
查看文件
+ 51
- 0
form/assets/js/ie-emulation-modes-warning.js
查看文件
| // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT | |||||
| // IT'S JUST JUNK FOR OUR DOCS! | |||||
| // ++++++++++++++++++++++++++++++++++++++++++ | |||||
| /*! | |||||
| * Copyright 2014-2015 Twitter, Inc. | |||||
| * | |||||
| * Licensed under the Creative Commons Attribution 3.0 Unported License. For | |||||
| * details, see https://creativecommons.org/licenses/by/3.0/. | |||||
| */ | |||||
| // Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes. | |||||
| (function () { | |||||
| 'use strict'; | |||||
| function emulatedIEMajorVersion() { | |||||
| var groups = /MSIE ([0-9.]+)/.exec(window.navigator.userAgent) | |||||
| if (groups === null) { | |||||
| return null | |||||
| } | |||||
| var ieVersionNum = parseInt(groups[1], 10) | |||||
| var ieMajorVersion = Math.floor(ieVersionNum) | |||||
| return ieMajorVersion | |||||
| } | |||||
| function actualNonEmulatedIEMajorVersion() { | |||||
| // Detects the actual version of IE in use, even if it's in an older-IE emulation mode. | |||||
| // IE JavaScript conditional compilation docs: https://msdn.microsoft.com/library/121hztk3%28v=vs.94%29.aspx | |||||
| // @cc_on docs: https://msdn.microsoft.com/library/8ka90k2e%28v=vs.94%29.aspx | |||||
| var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // jshint ignore:line | |||||
| if (jscriptVersion === undefined) { | |||||
| return 11 // IE11+ not in emulation mode | |||||
| } | |||||
| if (jscriptVersion < 9) { | |||||
| return 8 // IE8 (or lower; haven't tested on IE<8) | |||||
| } | |||||
| return jscriptVersion // IE9 or IE10 in any mode, or IE11 in non-IE11 mode | |||||
| } | |||||
| var ua = window.navigator.userAgent | |||||
| if (ua.indexOf('Opera') > -1 || ua.indexOf('Presto') > -1) { | |||||
| return // Opera, which might pretend to be IE | |||||
| } | |||||
| var emulated = emulatedIEMajorVersion() | |||||
| if (emulated === null) { | |||||
| return // Not IE | |||||
| } | |||||
| var nonEmulated = actualNonEmulatedIEMajorVersion() | |||||
| if (emulated !== nonEmulated) { | |||||
| window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!') | |||||
| } | |||||
| })(); |
+ 23
- 0
form/assets/js/ie10-viewport-bug-workaround.js
查看文件
| /*! | |||||
| * IE10 viewport hack for Surface/desktop Windows 8 bug | |||||
| * Copyright 2014-2015 Twitter, Inc. | |||||
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |||||
| */ | |||||
| // See the Getting Started docs for more information: | |||||
| // http://getbootstrap.com/getting-started/#support-ie10-width | |||||
| (function () { | |||||
| 'use strict'; | |||||
| if (navigator.userAgent.match(/IEMobile\/10\.0/)) { | |||||
| var msViewportStyle = document.createElement('style') | |||||
| msViewportStyle.appendChild( | |||||
| document.createTextNode( | |||||
| '@-ms-viewport{width:auto!important}' | |||||
| ) | |||||
| ) | |||||
| document.querySelector('head').appendChild(msViewportStyle) | |||||
| } | |||||
| })(); |
+ 2
- 0
form/assets/js/jquery.min.js
文件差异内容过多而无法显示
查看文件
+ 5
- 0
form/assets/js/popper.js
文件差异内容过多而无法显示
查看文件
+ 10223
- 0
form/bootstrap/css/bootstrap.css
文件差异内容过多而无法显示
查看文件
+ 7
- 0
form/bootstrap/css/bootstrap.min.css
文件差异内容过多而无法显示
查看文件
+ 4521
- 0
form/bootstrap/js/bootstrap.js
文件差异内容过多而无法显示
查看文件
+ 7
- 0
form/bootstrap/js/bootstrap.min.js
文件差异内容过多而无法显示
查看文件
+ 107
- 0
form/dashboard.css
查看文件
| body { | |||||
| font-size: .875rem; | |||||
| } | |||||
| .feather { | |||||
| width: 16px; | |||||
| height: 16px; | |||||
| vertical-align: text-bottom; | |||||
| } | |||||
| /* | |||||
| * Sidebar | |||||
| */ | |||||
| .sidebar { | |||||
| position: fixed; | |||||
| top: 0; | |||||
| bottom: 0; | |||||
| left: 0; | |||||
| z-index: 100; /* Behind the navbar */ | |||||
| padding: 48px 0 0; /* Height of navbar */ | |||||
| box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); | |||||
| } | |||||
| .sidebar-sticky { | |||||
| position: relative; | |||||
| top: 0; | |||||
| height: calc(100vh - 48px); | |||||
| padding-top: .5rem; | |||||
| overflow-x: hidden; | |||||
| overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ | |||||
| } | |||||
| @supports ((position: -webkit-sticky) or (position: sticky)) { | |||||
| .sidebar-sticky { | |||||
| position: -webkit-sticky; | |||||
| position: sticky; | |||||
| } | |||||
| } | |||||
| .sidebar .nav-link { | |||||
| font-weight: 500; | |||||
| color: #333; | |||||
| } | |||||
| .sidebar .nav-link .feather { | |||||
| margin-right: 4px; | |||||
| color: #999; | |||||
| } | |||||
| .sidebar .nav-link.active { | |||||
| color: #007bff; | |||||
| } | |||||
| .sidebar .nav-link:hover .feather, | |||||
| .sidebar .nav-link.active .feather { | |||||
| color: inherit; | |||||
| } | |||||
| .sidebar-heading { | |||||
| font-size: .75rem; | |||||
| text-transform: uppercase; | |||||
| } | |||||
| /* | |||||
| * Content | |||||
| */ | |||||
| [role="main"] { | |||||
| padding-top: 48px; /* Space for fixed navbar */ | |||||
| } | |||||
| /* | |||||
| * Navbar | |||||
| */ | |||||
| .navbar-brand { | |||||
| padding-top: .75rem; | |||||
| padding-bottom: .75rem; | |||||
| font-size: 1rem; | |||||
| background-color: rgba(0, 0, 0, .25); | |||||
| box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); | |||||
| } | |||||
| .navbar .form-control { | |||||
| padding: .75rem 1rem; | |||||
| border-width: 0; | |||||
| border-radius: 0; | |||||
| } | |||||
| .form-control-dark { | |||||
| color: #fff; | |||||
| background-color: rgba(255, 255, 255, .1); | |||||
| border-color: rgba(255, 255, 255, .1); | |||||
| } | |||||
| .form-control-dark:focus { | |||||
| border-color: transparent; | |||||
| box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); | |||||
| } | |||||
| /* | |||||
| * Utilities | |||||
| */ | |||||
| .border-top { border-top: 1px solid #e5e5e5; } | |||||
| .border-bottom { border-bottom: 1px solid #e5e5e5; } |
+ 327
- 0
form/dashboard.html
查看文件
| <!doctype html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |||||
| <meta name="description" content=""> | |||||
| <meta name="author" content=""> | |||||
| <title>Dashboard Template for Bootstrap</title> | |||||
| <!-- Bootstrap core CSS --> | |||||
| <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> | |||||
| <!-- Custom styles for this template --> | |||||
| <link href="dashboard.css" rel="stylesheet"> | |||||
| </head> | |||||
| <body> | |||||
| <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow"> | |||||
| <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a> | |||||
| <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> | |||||
| <ul class="navbar-nav px-3"> | |||||
| <li class="nav-item text-nowrap"> | |||||
| <a class="nav-link" href="#">Sign out</a> | |||||
| </li> | |||||
| </ul> | |||||
| </nav> | |||||
| <div class="container-fluid"> | |||||
| <div class="row"> | |||||
| <nav class="col-md-2 d-none d-md-block bg-light sidebar"> | |||||
| <div class="sidebar-sticky"> | |||||
| <ul class="nav flex-column"> | |||||
| <li class="nav-item"> | |||||
| <a class="nav-link active" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"> | |||||
| <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> | |||||
| <polyline points="9 22 9 12 15 12 15 22"></polyline> | |||||
| </svg> | |||||
| Dashboard <span class="sr-only">(current)</span> </a> | |||||
| </li> | |||||
| <li class="nav-item"> | |||||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> | |||||
| <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path> | |||||
| <polyline points="13 2 13 9 20 9"></polyline> | |||||
| </svg> | |||||
| Orders </a> | |||||
| </li> | |||||
| <li class="nav-item"> | |||||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"> | |||||
| <circle cx="9" cy="21" r="1"></circle> | |||||
| <circle cx="20" cy="21" r="1"></circle> | |||||
| <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> | |||||
| </svg> | |||||
| Products </a> | |||||
| </li> | |||||
| <li class="nav-item"> | |||||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"> | |||||
| <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> | |||||
| <circle cx="9" cy="7" r="4"></circle> | |||||
| <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> | |||||
| <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> | |||||
| </svg> | |||||
| Customers </a> | |||||
| </li> | |||||
| <li class="nav-item"> | |||||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"> | |||||
| <line x1="18" y1="20" x2="18" y2="10"></line> | |||||
| <line x1="12" y1="20" x2="12" y2="4"></line> | |||||
| <line x1="6" y1="20" x2="6" y2="14"></line> | |||||
| </svg> | |||||
| Reports </a> | |||||
| </li> | |||||
| <li class="nav-item"> | |||||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"> | |||||
| <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon> | |||||
| <polyline points="2 17 12 22 22 17"></polyline> | |||||
| <polyline points="2 12 12 17 22 12"></polyline> | |||||
| </svg> | |||||
| Integrations </a> | |||||
| </li> | |||||
| </ul> | |||||
| <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> <span>Saved reports</span> <a class="d-flex align-items-center text-muted" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"> | |||||
| <circle cx="12" cy="12" r="10"></circle> | |||||
| <line x1="12" y1="8" x2="12" y2="16"></line> | |||||
| <line x1="8" y1="12" x2="16" y2="12"></line> | |||||
| </svg> </a> </h6> | |||||
| <ul class="nav flex-column mb-2"> | |||||
| <li class="nav-item"> | |||||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> | |||||
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> | |||||
| <polyline points="14 2 14 8 20 8"></polyline> | |||||
| <line x1="16" y1="13" x2="8" y2="13"></line> | |||||
| <line x1="16" y1="17" x2="8" y2="17"></line> | |||||
| <polyline points="10 9 9 9 8 9"></polyline> | |||||
| </svg> | |||||
| Current month </a> | |||||
| </li> | |||||
| <li class="nav-item"> | |||||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> | |||||
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> | |||||
| <polyline points="14 2 14 8 20 8"></polyline> | |||||
| <line x1="16" y1="13" x2="8" y2="13"></line> | |||||
| <line x1="16" y1="17" x2="8" y2="17"></line> | |||||
| <polyline points="10 9 9 9 8 9"></polyline> | |||||
| </svg> | |||||
| Last quarter </a> | |||||
| </li> | |||||
| <li class="nav-item"> | |||||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> | |||||
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> | |||||
| <polyline points="14 2 14 8 20 8"></polyline> | |||||
| <line x1="16" y1="13" x2="8" y2="13"></line> | |||||
| <line x1="16" y1="17" x2="8" y2="17"></line> | |||||
| <polyline points="10 9 9 9 8 9"></polyline> | |||||
| </svg> | |||||
| Social engagement </a> | |||||
| </li> | |||||
| <li class="nav-item"> | |||||
| <a class="nav-link" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> | |||||
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> | |||||
| <polyline points="14 2 14 8 20 8"></polyline> | |||||
| <line x1="16" y1="13" x2="8" y2="13"></line> | |||||
| <line x1="16" y1="17" x2="8" y2="17"></line> | |||||
| <polyline points="10 9 9 9 8 9"></polyline> | |||||
| </svg> | |||||
| Year-end sale </a> | |||||
| </li> | |||||
| </ul> | |||||
| </div> | |||||
| </nav> | |||||
| <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"> | |||||
| <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"> | |||||
| <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"> | |||||
| <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div> | |||||
| </div> | |||||
| <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"> | |||||
| <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> | |||||
| <h1 class="h2">Dashboard</h1> | |||||
| <div class="btn-toolbar mb-2 mb-md-0"> | |||||
| <div class="btn-group mr-2"> | |||||
| <button class="btn btn-sm btn-outline-secondary">Share</button> | |||||
| <button class="btn btn-sm btn-outline-secondary">Export</button> | |||||
| </div> | |||||
| <button class="btn btn-sm btn-outline-secondary dropdown-toggle"> | |||||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"> | |||||
| <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> | |||||
| <line x1="16" y1="2" x2="16" y2="6"></line> | |||||
| <line x1="8" y1="2" x2="8" y2="6"></line> | |||||
| <line x1="3" y1="10" x2="21" y2="10"></line> | |||||
| </svg> | |||||
| This week | |||||
| </button> | |||||
| </div> | |||||
| </div> | |||||
| <canvas class="my-4 w-100 chartjs-render-monitor" id="myChart" width="2304" height="972" style="display: block; height: 486px; width: 1152px;"></canvas> | |||||
| <h2>Section title</h2> | |||||
| <div class="table-responsive"> | |||||
| <table class="table table-striped table-sm"> | |||||
| <thead> | |||||
| <tr> | |||||
| <th>#</th> | |||||
| <th>Header</th> | |||||
| <th>Header</th> | |||||
| <th>Header</th> | |||||
| <th>Header</th> | |||||
| </tr> | |||||
| </thead> | |||||
| <tbody> | |||||
| <tr> | |||||
| <td>1,001</td> | |||||
| <td>Lorem</td> | |||||
| <td>ipsum</td> | |||||
| <td>dolor</td> | |||||
| <td>sit</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,002</td> | |||||
| <td>amet</td> | |||||
| <td>consectetur</td> | |||||
| <td>adipiscing</td> | |||||
| <td>elit</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,003</td> | |||||
| <td>Integer</td> | |||||
| <td>nec</td> | |||||
| <td>odio</td> | |||||
| <td>Praesent</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,003</td> | |||||
| <td>libero</td> | |||||
| <td>Sed</td> | |||||
| <td>cursus</td> | |||||
| <td>ante</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,004</td> | |||||
| <td>dapibus</td> | |||||
| <td>diam</td> | |||||
| <td>Sed</td> | |||||
| <td>nisi</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,005</td> | |||||
| <td>Nulla</td> | |||||
| <td>quis</td> | |||||
| <td>sem</td> | |||||
| <td>at</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,006</td> | |||||
| <td>nibh</td> | |||||
| <td>elementum</td> | |||||
| <td>imperdiet</td> | |||||
| <td>Duis</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,007</td> | |||||
| <td>sagittis</td> | |||||
| <td>ipsum</td> | |||||
| <td>Praesent</td> | |||||
| <td>mauris</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,008</td> | |||||
| <td>Fusce</td> | |||||
| <td>nec</td> | |||||
| <td>tellus</td> | |||||
| <td>sed</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,009</td> | |||||
| <td>augue</td> | |||||
| <td>semper</td> | |||||
| <td>porta</td> | |||||
| <td>Mauris</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,010</td> | |||||
| <td>massa</td> | |||||
| <td>Vestibulum</td> | |||||
| <td>lacinia</td> | |||||
| <td>arcu</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,011</td> | |||||
| <td>eget</td> | |||||
| <td>nulla</td> | |||||
| <td>Class</td> | |||||
| <td>aptent</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,012</td> | |||||
| <td>taciti</td> | |||||
| <td>sociosqu</td> | |||||
| <td>ad</td> | |||||
| <td>litora</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,013</td> | |||||
| <td>torquent</td> | |||||
| <td>per</td> | |||||
| <td>conubia</td> | |||||
| <td>nostra</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,014</td> | |||||
| <td>per</td> | |||||
| <td>inceptos</td> | |||||
| <td>himenaeos</td> | |||||
| <td>Curabitur</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>1,015</td> | |||||
| <td>sodales</td> | |||||
| <td>ligula</td> | |||||
| <td>in</td> | |||||
| <td>libero</td> | |||||
| </tr> | |||||
| </tbody> | |||||
| </table> | |||||
| </div> | |||||
| </main> | |||||
| </div> | |||||
| </div> | |||||
| <!-- Bootstrap core JavaScript | |||||
| ================================================== --> | |||||
| <!-- Placed at the end of the document so the pages load faster --> | |||||
| <script src="assets/js/jquery.min.js"></script> | |||||
| <script src="assets/js/popper.js"></script> | |||||
| <script src="bootstrap/js/bootstrap.min.js"></script> | |||||
| <!-- Icons --> | |||||
| <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script> | |||||
| <script>feather.replace()</script> | |||||
| <!-- Graphs --> | |||||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> | |||||
| <script> | |||||
| var ctx = document.getElementById("myChart"); | |||||
| var myChart = new Chart(ctx, { | |||||
| type: 'line', | |||||
| data: { | |||||
| labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], | |||||
| datasets: [{ | |||||
| data: [15339, 21345, 18483, 24003, 23489, 24092, 12034], | |||||
| lineTension: 0, | |||||
| backgroundColor: 'transparent', | |||||
| borderColor: '#007bff', | |||||
| borderWidth: 4, | |||||
| pointBackgroundColor: '#007bff' | |||||
| }] | |||||
| }, | |||||
| options: { | |||||
| scales: { | |||||
| yAxes: [{ | |||||
| ticks: { | |||||
| beginAtZero: false | |||||
| } | |||||
| }] | |||||
| }, | |||||
| legend: { | |||||
| display: false, | |||||
| } | |||||
| } | |||||
| }); | |||||
| </script> | |||||
| </body> | |||||
| </html> |
+ 1
- 0
form/pinegrow.json
查看文件
| {"files":{"dashboard.html":{"frameworks":["pg.insight.events","pg.css.grid","pg.image.overlay","pg.code-validator","pg.project.items","pg.asset.manager","bs4","pg.html","pg.components"],"last_page_width":1024}},"breakpoints":["576px","768px","992px","1200px"],"frameworks":["pg.insight.events","pg.css.grid","pg.image.overlay","pg.code-validator","pg.project.items","pg.asset.manager","bs4","pg.html","pg.components"],"template_framework_id":"bootstrap"} |
正在加载...