var Elm = Elm || { Native: {} };
Elm.Native.Basics = {};
Elm.Native.Basics.make = function(localRuntime) {
localRuntime.Native = localRuntime.Native || {};
localRuntime.Native.Basics = localRuntime.Native.Basics || {};
if (localRuntime.Native.Basics.values)
{
return localRuntime.Native.Basics.values;
}
var Utils = Elm.Native.Utils.make(localRuntime);
function div(a, b)
{
return (a / b) | 0;
}
function rem(a, b)
{
return a % b;
}
function mod(a, b)
{
if (b === 0)
{
throw new Error('Cannot perform mod 0. Division by zero error.');
}
var r = a % b;
var m = a === 0 ? 0 : (b > 0 ? (a >= 0 ? r : r + b) : -mod(-a, -b));
return m === b ? 0 : m;
}
function logBase(base, n)
{
return Math.log(n) / Math.log(base);
}
function negate(n)
{
return -n;
}
function abs(n)
{
return n < 0 ? -n : n;
}
function min(a, b)
{
return Utils.cmp(a, b) < 0 ? a : b;
}
function max(a, b)
{
return Utils.cmp(a, b) > 0 ? a : b;
}
function clamp(lo, hi, n)
{
return Utils.cmp(n, lo) < 0 ? lo : Utils.cmp(n, hi) > 0 ? hi : n;
}
function xor(a, b)
{
return a !== b;
}
function not(b)
{
return !b;
}
function isInfinite(n)
{
return n === Infinity || n === -Infinity;
}
function truncate(n)
{
return n | 0;
}
function degrees(d)
{
return d * Math.PI / 180;
}
function turns(t)
{
return 2 * Math.PI * t;
}
function fromPolar(point)
{
var r = point._0;
var t = point._1;
return Utils.Tuple2(r * Math.cos(t), r * Math.sin(t));
}
function toPolar(point)
{
var x = point._0;
var y = point._1;
return Utils.Tuple2(Math.sqrt(x * x + y * y), Math.atan2(y, x));
}
return localRuntime.Native.Basics.values = {
div: F2(div),
rem: F2(rem),
mod: F2(mod),
pi: Math.PI,
e: Math.E,
cos: Math.cos,
sin: Math.sin,
tan: Math.tan,
acos: Math.acos,
asin: Math.asin,
atan: Math.atan,
atan2: F2(Math.atan2),
degrees: degrees,
turns: turns,
fromPolar: fromPolar,
toPolar: toPolar,
sqrt: Math.sqrt,
logBase: F2(logBase),
negate: negate,
abs: abs,
min: F2(min),
max: F2(max),
clamp: F3(clamp),
compare: Utils.compare,
xor: F2(xor),
not: not,
truncate: truncate,
ceiling: Math.ceil,
floor: Math.floor,
round: Math.round,
toFloat: function(x) { return x; },
isNaN: isNaN,
isInfinite: isInfinite
};
};
Elm.Native.Port = {};
Elm.Native.Port.make = function(localRuntime) {
localRuntime.Native = localRuntime.Native || {};
localRuntime.Native.Port = localRuntime.Native.Port || {};
if (localRuntime.Native.Port.values)
{
return localRuntime.Native.Port.values;
}
var NS;
// INBOUND
function inbound(name, type, converter)
{
if (!localRuntime.argsTracker[name])
{
throw new Error(
'Port Error:\n' +
'No argument was given for the port named \'' + name + '\' with type:\n\n' +
' ' + type.split('\n').join('\n ') + '\n\n' +
'You need to provide an initial value!\n\n' +
'Find out more about ports here
"+escape(e.message+"",true)+""}throw e}}marked.options=marked.setOptions=function(opt){merge(marked.defaults,opt);return marked};marked.defaults={gfm:true,tables:true,breaks:false,pedantic:false,sanitize:false,smartLists:false,silent:false,highlight:null,langPrefix:"lang-",smartypants:false,headerPrefix:"",renderer:new Renderer,xhtml:false};marked.Parser=Parser;marked.parser=Parser.parse;marked.Renderer=Renderer;marked.Lexer=Lexer;marked.lexer=Lexer.lex;marked.InlineLexer=InlineLexer;marked.inlineLexer=InlineLexer.output;marked.parse=marked;if(typeof module!=="undefined"&&typeof exports==="object"){module.exports=marked}else if(typeof define==="function"&&define.amd){define(function(){return marked})}else{this.marked=marked}}).call(function(){return this||(typeof window!=="undefined"?window:global)}()); return module.exports; })(); function formatOptions(options) { var toHighlight = function (code, lang) { if (!lang && options.defaultHighlighting.ctor === 'Just') { lang = options.defaultHighlighting._0; } if (typeof hljs !== 'undefined' && lang && hljs.listLanguages().indexOf(lang) >= 0) { return hljs.highlight(lang, code, true).value; } return code; }; var gfm = options.githubFlavored; if (gfm.ctor === 'Just') { return { highlight: toHighlight, gfm: true, tables: gfm._0.tables, breaks: gfm._0.breaks, sanitize: options.sanitize, smartypants: options.smartypants }; } else { return { highlight: toHighlight, gfm: false, tables: false, breaks: false, sanitize: options.sanitize, smartypants: options.smartypants }; } } function toHtmlWith(options, rawMarkdown) { return new MarkdownWidget(options, rawMarkdown); } function MarkdownWidget(options, rawMarkdown) { this.options = options; this.markdown = rawMarkdown; } MarkdownWidget.prototype.type = "Widget"; MarkdownWidget.prototype.init = function init() { var html = marked(this.markdown, formatOptions(this.options)); var div = document.createElement('div'); div.innerHTML = html; return div; }; MarkdownWidget.prototype.update = function update(previous, node) { if (this.markdown !== previous.markdown || this.options != previous.options) { var html = marked(this.markdown, formatOptions(this.options)); node.innerHTML = html; } return node; }; function toElementWith(options, rawMarkdown) { return Element.markdown(marked(rawMarkdown, formatOptions(options))); } return Elm.Native.Markdown.values = { toHtmlWith: F2(toHtmlWith), toElementWith: F2(toElementWith) }; }; Elm.Markdown = Elm.Markdown || {}; Elm.Markdown.make = function (_elm) { "use strict"; _elm.Markdown = _elm.Markdown || {}; if (_elm.Markdown.values) return _elm.Markdown.values; var _U = Elm.Native.Utils.make(_elm), $Basics = Elm.Basics.make(_elm), $Debug = Elm.Debug.make(_elm), $Graphics$Element = Elm.Graphics.Element.make(_elm), $Html = Elm.Html.make(_elm), $List = Elm.List.make(_elm), $Maybe = Elm.Maybe.make(_elm), $Native$Markdown = Elm.Native.Markdown.make(_elm), $Result = Elm.Result.make(_elm), $Signal = Elm.Signal.make(_elm); var _op = {}; var toElementWith = $Native$Markdown.toElementWith; var toHtmlWith = $Native$Markdown.toHtmlWith; var defaultOptions = {githubFlavored: $Maybe.Just({tables: false,breaks: false}),defaultHighlighting: $Maybe.Nothing,sanitize: false,smartypants: false}; var Options = F4(function (a,b,c,d) { return {githubFlavored: a,defaultHighlighting: b,sanitize: c,smartypants: d};}); var toElement = function (string) { return A2($Native$Markdown.toElementWith,defaultOptions,string);}; var toHtml = function (string) { return A2($Native$Markdown.toHtmlWith,defaultOptions,string);}; return _elm.Markdown.values = {_op: _op ,toHtml: toHtml ,toElement: toElement ,Options: Options ,defaultOptions: defaultOptions ,toHtmlWith: toHtmlWith ,toElementWith: toElementWith}; }; Elm.Material = Elm.Material || {}; Elm.Material.Color = Elm.Material.Color || {}; Elm.Material.Color.make = function (_elm) { "use strict"; _elm.Material = _elm.Material || {}; _elm.Material.Color = _elm.Material.Color || {}; if (_elm.Material.Color.values) return _elm.Material.Color.values; var _U = Elm.Native.Utils.make(_elm), $Array = Elm.Array.make(_elm), $Basics = Elm.Basics.make(_elm), $Debug = Elm.Debug.make(_elm), $List = Elm.List.make(_elm), $Material$Style = Elm.Material.Style.make(_elm), $Maybe = Elm.Maybe.make(_elm), $Result = Elm.Result.make(_elm), $Signal = Elm.Signal.make(_elm); var _op = {}; var text = function (_p0) { var _p1 = _p0;return $Material$Style.cs(A2($Basics._op["++"],"mdl-color-text--",_p1._0));}; var background = function (_p2) { var _p3 = _p2;return $Material$Style.cs(A2($Basics._op["++"],"mdl-color--",_p3._0));}; var C = function (a) { return {ctor: "C",_0: a};}; var white = C("white"); var black = C("black"); var primary = C("primary"); var primaryDark = C("primary-dark"); var primaryContrast = C("primary-contrast"); var accent = C("accent"); var accentContrast = C("accent-contrast"); var shadeName = function (shade) { var _p4 = shade; switch (_p4.ctor) {case "S50": return "50"; case "S100": return "100"; case "S200": return "200"; case "S300": return "300"; case "S400": return "400"; case "S500": return "500"; case "S600": return "600"; case "S700": return "700"; case "S800": return "800"; case "S900": return "900"; case "A100": return "A100"; case "A200": return "A200"; case "A400": return "A400"; default: return "A700";} }; var A700 = {ctor: "A700"}; var A400 = {ctor: "A400"}; var A200 = {ctor: "A200"}; var A100 = {ctor: "A100"}; var S900 = {ctor: "S900"}; var S800 = {ctor: "S800"}; var S700 = {ctor: "S700"}; var S600 = {ctor: "S600"}; var S500 = {ctor: "S500"}; var S400 = {ctor: "S400"}; var S300 = {ctor: "S300"}; var S200 = {ctor: "S200"}; var S100 = {ctor: "S100"}; var S50 = {ctor: "S50"}; var shades = $Array.fromList(_U.list([S50,S100,S200,S300,S400,S500,S600,S700,S800,S900,A100,A200,A400,A700])); var paletteName = function (color) { var _p5 = color; switch (_p5.ctor) {case "Indigo": return "indigo"; case "Blue": return "blue"; case "LightBlue": return "light-blue"; case "Cyan": return "cyan"; case "Teal": return "teal"; case "Green": return "green"; case "LightGreen": return "light-green"; case "Lime": return "lime"; case "Yellow": return "yellow"; case "Amber": return "amber"; case "Orange": return "orange"; case "Brown": return "brown"; case "BlueGrey": return "blue-grey"; case "Grey": return "grey"; case "DeepOrange": return "deep-orange"; case "Red": return "red"; case "Pink": return "pink"; case "Purple": return "purple"; default: return "deep-purple";} }; var color = F2(function (palette,shade) { return C(A2($Basics._op["++"],paletteName(palette),A2($Basics._op["++"],"-",shadeName(shade))));}); var scheme = F2(function (primary,accent) { var cssFile = function () { var _p6 = accent; switch (_p6.ctor) {case "Grey": return ""; case "Brown": return ""; case "BlueGrey": return ""; default: return A2($Basics._op["++"],".",A2($Basics._op["++"],paletteName(primary),A2($Basics._op["++"],"-",paletteName(accent))));} }(); return A2($Basics._op["++"],"material",A2($Basics._op["++"],cssFile,".min.css")); }); var DeepPurple = {ctor: "DeepPurple"}; var Purple = {ctor: "Purple"}; var Pink = {ctor: "Pink"}; var Red = {ctor: "Red"}; var DeepOrange = {ctor: "DeepOrange"}; var Grey = {ctor: "Grey"}; var BlueGrey = {ctor: "BlueGrey"}; var Brown = {ctor: "Brown"}; var Orange = {ctor: "Orange"}; var Amber = {ctor: "Amber"}; var Yellow = {ctor: "Yellow"}; var Lime = {ctor: "Lime"}; var LightGreen = {ctor: "LightGreen"}; var Green = {ctor: "Green"}; var Teal = {ctor: "Teal"}; var Cyan = {ctor: "Cyan"}; var LightBlue = {ctor: "LightBlue"}; var Blue = {ctor: "Blue"}; var Indigo = {ctor: "Indigo"}; var palette = $Array.fromList(_U.list([Indigo ,Blue ,LightBlue ,Cyan ,Teal ,Green ,LightGreen ,Lime ,Yellow ,Amber ,Orange ,Brown ,BlueGrey ,Grey ,DeepOrange ,Red ,Pink ,Purple ,DeepPurple])); return _elm.Material.Color.values = {_op: _op ,palette: palette ,shades: shades ,color: color ,white: white ,black: black ,primary: primary ,primaryDark: primaryDark ,primaryContrast: primaryContrast ,accent: accent ,accentContrast: accentContrast ,background: background ,text: text ,scheme: scheme ,Indigo: Indigo ,Blue: Blue ,LightBlue: LightBlue ,Cyan: Cyan ,Teal: Teal ,Green: Green ,LightGreen: LightGreen ,Lime: Lime ,Yellow: Yellow ,Amber: Amber ,Orange: Orange ,Brown: Brown ,BlueGrey: BlueGrey ,Grey: Grey ,DeepOrange: DeepOrange ,Red: Red ,Pink: Pink ,Purple: Purple ,DeepPurple: DeepPurple ,S50: S50 ,S100: S100 ,S200: S200 ,S300: S300 ,S400: S400 ,S500: S500 ,S600: S600 ,S700: S700 ,S800: S800 ,S900: S900 ,A100: A100 ,A200: A200 ,A400: A400 ,A700: A700}; }; Elm.Material = Elm.Material || {}; Elm.Material.Snackbar = Elm.Material.Snackbar || {}; Elm.Material.Snackbar.make = function (_elm) { "use strict"; _elm.Material = _elm.Material || {}; _elm.Material.Snackbar = _elm.Material.Snackbar || {}; if (_elm.Material.Snackbar.values) return _elm.Material.Snackbar.values; var _U = Elm.Native.Utils.make(_elm), $Basics = Elm.Basics.make(_elm), $Debug = Elm.Debug.make(_elm), $Effects = Elm.Effects.make(_elm), $Html = Elm.Html.make(_elm), $Html$Attributes = Elm.Html.Attributes.make(_elm), $Html$Events = Elm.Html.Events.make(_elm), $List = Elm.List.make(_elm), $Material$Helpers = Elm.Material.Helpers.make(_elm), $Maybe = Elm.Maybe.make(_elm), $Result = Elm.Result.make(_elm), $Signal = Elm.Signal.make(_elm), $Task = Elm.Task.make(_elm), $Time = Elm.Time.make(_elm); var _op = {}; var Move = F2(function (a,b) { return {ctor: "Move",_0: a,_1: b};}); var liftTransition = function (_p0) { var _p1 = _p0;var _p2 = _p1._0;return {ctor: "_Tuple2",_0: _p2,_1: A2($Effects.map,Move(_p2.seq),_p1._1)};}; var Action = function (a) { return {ctor: "Action",_0: a};}; var forwardClick = F2(function (transition,model) { var _p3 = {ctor: "_Tuple2",_0: transition,_1: model.state}; if (_p3.ctor === "_Tuple2" && _p3._0.ctor === "Click" && _p3._1.ctor === "Active") { return A2($Maybe.withDefault, function (x) { return x; }, A2($Maybe.map,function (_p4) { return $Material$Helpers.addFx($Effects.task($Task.succeed(Action($Basics.snd(_p4)))));},_p3._1._0.action)); } else { return function (x) { return x; }; } }); var Add = function (a) { return {ctor: "Add",_0: a};}; var enqueue = F2(function (contents,model) { return _U.update(model,{queue: A2($List.append,model.queue,_U.list([contents]))});}); var delay = F2(function (t,x) { return $Effects.task(A3($Basics.flip,$Task.andThen,function (_p5) { return $Task.succeed(x);},$Task.sleep(t)));}); var Click = {ctor: "Click"}; var Timeout = {ctor: "Timeout"}; var Fading = function (a) { return {ctor: "Fading",_0: a};}; var Active = function (a) { return {ctor: "Active",_0: a};}; var tryDequeue = function (model) { var _p6 = {ctor: "_Tuple2",_0: model.state,_1: model.queue}; if (_p6.ctor === "_Tuple2" && _p6._0.ctor === "Inert" && _p6._1.ctor === "::") { var _p7 = _p6._1._0; return {ctor: "_Tuple2",_0: _U.update(model,{state: Active(_p7),queue: _p6._1._1,seq: model.seq + 1}),_1: A2(delay,_p7.timeout,Timeout)}; } else { return {ctor: "_Tuple2",_0: model,_1: $Effects.none}; } }; var Inert = {ctor: "Inert"}; var move = F2(function (transition,model) { var _p8 = {ctor: "_Tuple2",_0: model.state,_1: transition}; _v3_3: do { if (_p8.ctor === "_Tuple2") { switch (_p8._0.ctor) {case "Inert": if (_p8._1.ctor === "Timeout") { return tryDequeue(model); } else { break _v3_3; } case "Active": var _p9 = _p8._0._0; return {ctor: "_Tuple2",_0: _U.update(model,{state: Fading(_p9)}),_1: A2(delay,_p9.fade,Timeout)}; default: if (_p8._1.ctor === "Timeout") { return {ctor: "_Tuple2",_0: _U.update(model,{state: Inert}),_1: $Effects.tick(function (_p10) { return Timeout;})}; } else { break _v3_3; }} } else { break _v3_3; } } while (false); return {ctor: "_Tuple2",_0: model,_1: $Effects.none}; }); var update = F2(function (action,model) { var _p11 = action; switch (_p11.ctor) {case "Action": return {ctor: "_Tuple2",_0: model,_1: $Effects.none}; case "Add": return liftTransition(tryDequeue(A2(enqueue,_p11._0,model))); default: var _p12 = _p11._1; return _U.eq(_p11._0,model.seq) ? A3(forwardClick,_p12,model,liftTransition(A2(move,_p12,model))) : {ctor: "_Tuple2",_0: model,_1: $Effects.none};} }); var contentsOf = function (model) { var _p13 = model.state; switch (_p13.ctor) {case "Inert": return $Maybe.Nothing; case "Active": return $Maybe.Just(_p13._0); default: return $Maybe.Just(_p13._0);} }; var view = F2(function (addr,model) { var isActive = function () { var _p14 = model.state; switch (_p14.ctor) {case "Inert": return false; case "Active": return true; default: return false;} }(); var _p15 = A2($Maybe.withDefault, {ctor: "_Tuple2",_0: _U.list([]),_1: _U.list([])}, A2($Maybe.map, function (_p16) { var _p17 = _p16; return {ctor: "_Tuple2",_0: _U.list([$Html.text(_p17._0)]),_1: _U.list([A2($Html$Events.onClick,addr,A2(Move,model.seq,Click))])}; }, A3($Basics.flip,$Maybe.andThen,function (_) { return _.action;},contentsOf(model)))); var buttonBody = _p15._0; var buttonHandler = _p15._1; var textBody = A2($Maybe.withDefault,_U.list([]),A2($Maybe.map,function (c) { return _U.list([$Html.text(c.message)]);},contentsOf(model))); var active = !_U.eq(model.queue,_U.list([])); return A2($Html.div, _U.list([$Html$Attributes.classList(_U.list([{ctor: "_Tuple2",_0: "mdl-js-snackbar",_1: true} ,{ctor: "_Tuple2",_0: "mdl-snackbar",_1: true} ,{ctor: "_Tuple2",_0: "mdl-snackbar--active",_1: isActive}]))]), _U.list([A2($Html.div,_U.list([$Html$Attributes.$class("mdl-snackbar__text")]),textBody) ,A2($Html.button, A2($List._op["::"],$Html$Attributes.$class("mdl-snackbar__action"),A2($List._op["::"],$Html$Attributes.type$("button"),buttonHandler)), buttonBody)])); }); var isActive = function (model) { var _p18 = model.state; if (_p18.ctor === "Active") { return $Maybe.Just(_p18._0); } else { return $Maybe.Nothing; } }; var snackbar = F3(function (message,actionMessage,action) { return {message: message,action: $Maybe.Just({ctor: "_Tuple2",_0: actionMessage,_1: action}),timeout: 2750,fade: 250}; }); var toast = function (message) { return {message: message,action: $Maybe.Nothing,timeout: 2750,fade: 250};}; var model = {queue: _U.list([]),state: Inert,seq: 0}; var Model = F3(function (a,b,c) { return {queue: a,state: b,seq: c};}); var Contents = F4(function (a,b,c,d) { return {message: a,action: b,timeout: c,fade: d};}); return _elm.Material.Snackbar.values = {_op: _op ,model: model ,toast: toast ,snackbar: snackbar ,isActive: isActive ,update: update ,view: view ,Contents: Contents ,Model: Model ,Add: Add ,Action: Action}; }; Elm.Material = Elm.Material || {}; Elm.Material.make = function (_elm) { "use strict"; _elm.Material = _elm.Material || {}; if (_elm.Material.values) return _elm.Material.values; var _U = Elm.Native.Utils.make(_elm), $Basics = Elm.Basics.make(_elm), $Debug = Elm.Debug.make(_elm), $Effects = Elm.Effects.make(_elm), $Html = Elm.Html.make(_elm), $Html$Attributes = Elm.Html.Attributes.make(_elm), $List = Elm.List.make(_elm), $Material$Color = Elm.Material.Color.make(_elm), $Maybe = Elm.Maybe.make(_elm), $Result = Elm.Result.make(_elm), $Signal = Elm.Signal.make(_elm), $String = Elm.String.make(_elm); var _op = {}; var lift = F6(function (get,set,fwd,update,action,model) { var _p0 = A2(update,action,get(model)); var submodel$ = _p0._0; var e = _p0._1; return {ctor: "_Tuple2",_0: A2(set,model,submodel$),_1: A2($Effects.map,fwd,e)}; }); var lift$ = F5(function (get,set,update,action,model) { return {ctor: "_Tuple2",_0: A2(set,model,A2(update,action,get(model))),_1: $Effects.none};}); var scheme = F2(function (primary,accent) { return A2($String.join, "\n", A2($List.map, function (url) { return A2($Basics._op["++"],"@import url(",A2($Basics._op["++"],url,");")); }, _U.list([A2($Basics._op["++"],"https://code.getmdl.io/1.1.2/",A2($Material$Color.scheme,primary,accent)) ,"https://fonts.googleapis.com/icon?family=Material+Icons" ,"https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext"]))); }); var topWithScheme = F3(function (primary,accent,content) { return A2($Html.div, _U.list([]), _U.list([A3($Html.node,"style",_U.list([$Html$Attributes.type$("text/css")]),_U.list([$Html.text(A2(scheme,primary,accent))])),content])); }); var top = function (content) { return A3(topWithScheme,$Material$Color.Grey,$Material$Color.Grey,content);}; return _elm.Material.values = {_op: _op,topWithScheme: topWithScheme,top: top,lift: lift,lift$: lift$}; }; Elm.Demo = Elm.Demo || {}; Elm.Demo.Snackbar = Elm.Demo.Snackbar || {}; Elm.Demo.Snackbar.make = function (_elm) { "use strict"; _elm.Demo = _elm.Demo || {}; _elm.Demo.Snackbar = _elm.Demo.Snackbar || {}; if (_elm.Demo.Snackbar.values) return _elm.Demo.Snackbar.values; var _U = Elm.Native.Utils.make(_elm), $Array = Elm.Array.make(_elm), $Basics = Elm.Basics.make(_elm), $Debug = Elm.Debug.make(_elm), $Effects = Elm.Effects.make(_elm), $Html = Elm.Html.make(_elm), $Html$Attributes = Elm.Html.Attributes.make(_elm), $List = Elm.List.make(_elm), $Markdown = Elm.Markdown.make(_elm), $Material = Elm.Material.make(_elm), $Material$Button = Elm.Material.Button.make(_elm), $Material$Color = Elm.Material.Color.make(_elm), $Material$Grid = Elm.Material.Grid.make(_elm), $Material$Snackbar = Elm.Material.Snackbar.make(_elm), $Material$Style = Elm.Material.Style.make(_elm), $Maybe = Elm.Maybe.make(_elm), $Result = Elm.Result.make(_elm), $Signal = Elm.Signal.make(_elm); var _op = {}; var intro = $Markdown.toHtml("\n# Snackbars & toasts\n\nFrom the\n[Material Design Lite documentation](https://www.getmdl.io/components/index.html#snackbar-section).\n\n> The Material Design Lite (MDL) __snackbar__ component is a container used to\n> notify a user of an operation\'s status. It displays at the bottom of the\n> screen. A snackbar may contain an action button to execute a command for the\n> user. Actions should undo the committed action or retry it if it failed for\n> example. Actions should not be to close the snackbar. By not providing an\n> action, the snackbar becomes a __toast__ component.\n\n#### See also\n\n - [Demo source code](https://github.com/debois/elm-mdl/blob/master/examples/Demo/Snackbar.elm)\n - [elm-mdl package documentation](http://package.elm-lang.org/packages/debois/elm-mdl/latest/Material-Snackbar)\n - [Material Design Specification](https://www.google.com/design/spec/components/snackbars-toasts.html)\n - [Material Design Lite documentation](https://www.getmdl.io/components/index.html#snackbar-section)\n\n#### Demo\n\n"); var clickView = F2(function (model,k) { var selected = _U.eq(k,model.snackbar.seq - 1) && !_U.eq($Material$Snackbar.isActive(model.snackbar),$Maybe.Nothing); var color = A3($Basics.flip, $Material$Color.color, $Material$Color.S500, A2($Maybe.withDefault,$Material$Color.Teal,A2($Array.get,A2($Basics._op["%"],k + 4,$Array.length($Material$Color.palette)),$Material$Color.palette))); return A4($Material$Style.styled, $Html.div, _U.list([$Material$Color.background(color) ,$Material$Color.text($Material$Color.primaryContrast) ,$Material$Style.cs(A2($Basics._op["++"],"mdl-shadow--",selected ? "8dp" : "2dp"))]), _U.list([$Html$Attributes.style(_U.list([{ctor: "_Tuple2",_0: "margin-right",_1: "3ex"} ,{ctor: "_Tuple2",_0: "margin-bottom",_1: "3ex"} ,{ctor: "_Tuple2",_0: "padding",_1: "1.5ex"} ,{ctor: "_Tuple2",_0: "width",_1: "4ex"} ,{ctor: "_Tuple2",_0: "border-radius",_1: "2px"} ,{ctor: "_Tuple2",_0: "display",_1: "inline-block"} ,{ctor: "_Tuple2",_0: "text-align",_1: "center"} ,{ctor: "_Tuple2",_0: "transition",_1: "box-shadow 333ms ease-in-out 0s"}])) ,$Html$Attributes.key($Basics.toString(k))]), _U.list([$Html.text($Basics.toString(k))])); }); var toast = function (k) { return $Material$Snackbar.toast(A2($Basics._op["++"],"Toast message #",$Basics.toString(k)));}; var SnackbarButtonAction = function (a) { return {ctor: "SnackbarButtonAction",_0: a};}; var ToastButtonAction = function (a) { return {ctor: "ToastButtonAction",_0: a};}; var SnackbarAction = function (a) { return {ctor: "SnackbarAction",_0: a};}; var add = F2(function (f,model) { var _p0 = A2($Material$Snackbar.update,$Material$Snackbar.Add(f(model.count)),model.snackbar); var snackbar$ = _p0._0; var effects = _p0._1; return {ctor: "_Tuple2" ,_0: _U.update(model,{snackbar: snackbar$,count: model.count + 1,clicked: A2($List._op["::"],model.count,model.clicked)}) ,_1: A2($Effects.map,SnackbarAction,effects)}; }); var view = F2(function (addr,model) { return A2($Html.div, _U.list([]), _U.list([intro ,A2($Material$Grid.grid, _U.list([]), _U.list([A2($Material$Grid.cell, _U.list([A2($Material$Grid.size,$Material$Grid.All,2) ,A2($Material$Grid.size,$Material$Grid.Phone,2) ,$Material$Grid.align($Material$Grid.Top)]), _U.list([A4($Material$Button.raised, A2($Signal.forwardTo,addr,ToastButtonAction), model.toastButton, _U.list([]), _U.list([$Html.text("Toast")]))])) ,A2($Material$Grid.cell, _U.list([A2($Material$Grid.size,$Material$Grid.All,2) ,A2($Material$Grid.size,$Material$Grid.Phone,2) ,$Material$Grid.align($Material$Grid.Top)]), _U.list([A4($Material$Button.raised, A2($Signal.forwardTo,addr,SnackbarButtonAction), model.snackbarButton, _U.list([]), _U.list([$Html.text("Snackbar")]))])) ,A2($Material$Grid.cell, _U.list([A2($Material$Grid.size,$Material$Grid.Desktop,7) ,A2($Material$Grid.size,$Material$Grid.Tablet,3) ,A2($Material$Grid.size,$Material$Grid.Phone,12) ,$Material$Grid.align($Material$Grid.Top)]), A2($List.map,clickView(model),$List.reverse(model.clicked)))])) ,A2($Material$Snackbar.view,A2($Signal.forwardTo,addr,SnackbarAction),model.snackbar)])); }); var Undo = function (a) { return {ctor: "Undo",_0: a};}; var snackbar = function (k) { return A3($Material$Snackbar.snackbar,A2($Basics._op["++"],"Snackbar message #",$Basics.toString(k)),"UNDO",Undo(k));}; var update = F2(function (action,model) { update: while (true) { var _p1 = action; switch (_p1.ctor) {case "Undo": return {ctor: "_Tuple2" ,_0: _U.update(model,{clicked: A2($List.filter,F2(function (x,y) { return !_U.eq(x,y);})(_p1._0),model.clicked)}) ,_1: $Effects.none}; case "SnackbarAction": if (_p1._0.ctor === "Action") { var _v1 = _p1._0._0,_v2 = model; action = _v1; model = _v2; continue update; } else { return A6($Material.lift, function (_) { return _.snackbar; }, F2(function (m,x) { return _U.update(m,{snackbar: x});}), SnackbarAction, $Material$Snackbar.update, _p1._0, model); } case "ToastButtonAction": if (_p1._0.ctor === "Click") { return A2(add,toast,model); } else { return A6($Material.lift, function (_) { return _.toastButton; }, F2(function (m,x) { return _U.update(m,{toastButton: x});}), ToastButtonAction, $Material$Button.update, _p1._0, model); } default: if (_p1._0.ctor === "Click") { return A2(add,snackbar,model); } else { return A6($Material.lift, function (_) { return _.snackbarButton; }, F2(function (m,x) { return _U.update(m,{snackbarButton: x});}), SnackbarButtonAction, $Material$Button.update, _p1._0, model); }} } }); var model = {count: 0 ,clicked: _U.list([]) ,snackbar: $Material$Snackbar.model ,toastButton: $Material$Button.model(true) ,snackbarButton: $Material$Button.model(true)}; var Model = F5(function (a,b,c,d,e) { return {count: a,clicked: b,snackbar: c,toastButton: d,snackbarButton: e};}); return _elm.Demo.Snackbar.values = {_op: _op ,Model: Model ,model: model ,Undo: Undo ,SnackbarAction: SnackbarAction ,ToastButtonAction: ToastButtonAction ,SnackbarButtonAction: SnackbarButtonAction ,snackbar: snackbar ,toast: toast ,add: add ,update: update ,clickView: clickView ,view: view ,intro: intro}; }; Elm.Material = Elm.Material || {}; Elm.Material.Textfield = Elm.Material.Textfield || {}; Elm.Material.Textfield.make = function (_elm) { "use strict"; _elm.Material = _elm.Material || {}; _elm.Material.Textfield = _elm.Material.Textfield || {}; if (_elm.Material.Textfield.values) return _elm.Material.Textfield.values; var _U = Elm.Native.Utils.make(_elm), $Basics = Elm.Basics.make(_elm), $Debug = Elm.Debug.make(_elm), $Html = Elm.Html.make(_elm), $Html$Attributes = Elm.Html.Attributes.make(_elm), $Html$Events = Elm.Html.Events.make(_elm), $List = Elm.List.make(_elm), $Material$Helpers = Elm.Material.Helpers.make(_elm), $Maybe = Elm.Maybe.make(_elm), $Result = Elm.Result.make(_elm), $Signal = Elm.Signal.make(_elm); var _op = {}; var update = F2(function (action,model) { var _p0 = action; switch (_p0.ctor) {case "Input": return _U.update(model,{value: _p0._0}); case "Blur": return _U.update(model,{isFocused: false}); default: return _U.update(model,{isFocused: true});} }); var Focus = {ctor: "Focus"}; var Blur = {ctor: "Blur"}; var Input = function (a) { return {ctor: "Input",_0: a};}; var view = F2(function (addr,model) { var hasError = A2($Maybe.withDefault,false,A2($Maybe.map,$Basics.always(true),model.error)); var hasFloat = A2($Maybe.withDefault,false,A2($Maybe.map,function (_) { return _.$float;},model.label)); return A3($Material$Helpers.filter, $Html.div, _U.list([$Html$Attributes.classList(_U.list([{ctor: "_Tuple2",_0: "mdl-textfield",_1: true} ,{ctor: "_Tuple2",_0: "mdl-js-textfield",_1: true} ,{ctor: "_Tuple2",_0: "is-upgraded",_1: true} ,{ctor: "_Tuple2",_0: "mdl-textfield--floating-label",_1: hasFloat} ,{ctor: "_Tuple2",_0: "is-invalid",_1: hasError} ,{ctor: "_Tuple2",_0: "is-dirty",_1: !_U.eq(model.value,"")} ,{ctor: "_Tuple2",_0: "is-focused",_1: model.isFocused && $Basics.not(model.isDisabled)} ,{ctor: "_Tuple2",_0: "is-disabled",_1: model.isDisabled}]))]), _U.list([$Maybe.Just(A2($Html.input, _U.list([$Html$Attributes.$class("mdl-textfield__input") ,$Html$Attributes.style(_U.list([{ctor: "_Tuple2",_0: "outline",_1: "none"}])) ,$Html$Attributes.type$("text") ,$Html$Attributes.disabled(model.isDisabled) ,$Html$Attributes.value(model.value) ,A3($Html$Events.on,"input",$Html$Events.targetValue,function (s) { return A2($Signal.message,addr,Input(s));}) ,A2($Html$Events.onBlur,addr,Blur) ,A2($Html$Events.onFocus,addr,Focus)]), _U.list([]))) ,A2($Maybe.map, function (l) { return A2($Html.label,_U.list([$Html$Attributes.$class("mdl-textfield__label")]),_U.list([$Html.text(l.text)])); }, model.label) ,A2($Maybe.map, function (e) { return A2($Html.span,_U.list([$Html$Attributes.$class("mdl-textfield__error")]),_U.list([$Html.text(e)])); }, model.error)])); }); var Model = F6(function (a,b,c,d,e,f) { return {label: a,error: b,kind: c,isDisabled: d,isFocused: e,value: f};}); var SingleLine = {ctor: "SingleLine"}; var model = {label: $Maybe.Nothing,error: $Maybe.Nothing,kind: SingleLine,isDisabled: false,isFocused: false,value: ""}; var Label = F2(function (a,b) { return {text: a,$float: b};}); return _elm.Material.Textfield.values = {_op: _op ,Label: Label ,SingleLine: SingleLine ,Model: Model ,model: model ,Input: Input ,Blur: Blur ,Focus: Focus ,update: update ,view: view}; }; Elm.Demo = Elm.Demo || {}; Elm.Demo.Textfields = Elm.Demo.Textfields || {}; Elm.Demo.Textfields.make = function (_elm) { "use strict"; _elm.Demo = _elm.Demo || {}; _elm.Demo.Textfields = _elm.Demo.Textfields || {}; if (_elm.Demo.Textfields.values) return _elm.Demo.Textfields.values; var _U = Elm.Native.Utils.make(_elm), $Array = Elm.Array.make(_elm), $Basics = Elm.Basics.make(_elm), $Debug = Elm.Debug.make(_elm), $Html = Elm.Html.make(_elm), $List = Elm.List.make(_elm), $Material$Grid = Elm.Material.Grid.make(_elm), $Material$Textfield = Elm.Material.Textfield.make(_elm), $Maybe = Elm.Maybe.make(_elm), $Result = Elm.Result.make(_elm), $Signal = Elm.Signal.make(_elm); var _op = {}; var update = F2(function (_p0,fields) { var _p1 = _p0; var _p2 = _p1._0; return A2($Maybe.withDefault, fields, A2($Maybe.map, function (field$) { return A3($Array.set,_p2,field$,fields); }, A2($Maybe.map,$Material$Textfield.update(_p1._1),A2($Array.get,_p2,fields)))); }); var Field = F2(function (a,b) { return {ctor: "Field",_0: a,_1: b};}); var view = F2(function (addr,model) { return A2($Material$Grid.grid, _U.list([]), A2($List.map, function (x) { return A2($Material$Grid.cell,_U.list([A2($Material$Grid.size,$Material$Grid.All,3)]),_U.list([x])); }, $Array.toList(A2($Array.indexedMap,F2(function (k,field) { return A2($Material$Textfield.view,A2($Signal.forwardTo,addr,Field(k)),field);}),model)))); }); var model = function () { var t0 = $Material$Textfield.model; return $Array.fromList(_U.list([t0 ,_U.update(t0,{label: $Maybe.Just({text: "Labelled",$float: false})}) ,_U.update(t0,{label: $Maybe.Just({text: "Floating label",$float: true})}) ,_U.update(t0,{label: $Maybe.Just({text: "Disabled",$float: false}),isDisabled: true}) ,_U.update(t0, {label: $Maybe.Just({text: "With error and value",$float: false}) ,error: $Maybe.Just("The input is wrong!") ,value: "Incorrect input"})])); }(); return _elm.Demo.Textfields.values = {_op: _op,model: model,Field: Field,update: update,view: view}; }; Elm.StartApp = Elm.StartApp || {}; Elm.StartApp.make = function (_elm) { "use strict"; _elm.StartApp = _elm.StartApp || {}; if (_elm.StartApp.values) return _elm.StartApp.values; var _U = Elm.Native.Utils.make(_elm), $Basics = Elm.Basics.make(_elm), $Debug = Elm.Debug.make(_elm), $Effects = Elm.Effects.make(_elm), $Html = Elm.Html.make(_elm), $List = Elm.List.make(_elm), $Maybe = Elm.Maybe.make(_elm), $Result = Elm.Result.make(_elm), $Signal = Elm.Signal.make(_elm), $Task = Elm.Task.make(_elm); var _op = {}; var start = function (config) { var updateStep = F2(function (action,_p0) { var _p1 = _p0; var _p2 = A2(config.update,action,_p1._0); var newModel = _p2._0; var additionalEffects = _p2._1; return {ctor: "_Tuple2",_0: newModel,_1: $Effects.batch(_U.list([_p1._1,additionalEffects]))}; }); var update = F2(function (actions,_p3) { var _p4 = _p3;return A3($List.foldl,updateStep,{ctor: "_Tuple2",_0: _p4._0,_1: $Effects.none},actions);}); var messages = $Signal.mailbox(_U.list([])); var singleton = function (action) { return _U.list([action]);}; var address = A2($Signal.forwardTo,messages.address,singleton); var inputs = $Signal.mergeMany(A2($List._op["::"],messages.signal,A2($List.map,$Signal.map(singleton),config.inputs))); var effectsAndModel = A3($Signal.foldp,update,config.init,inputs); var model = A2($Signal.map,$Basics.fst,effectsAndModel); return {html: A2($Signal.map,config.view(address),model) ,model: model ,tasks: A2($Signal.map,function (_p5) { return A2($Effects.toTask,messages.address,$Basics.snd(_p5));},effectsAndModel)}; }; var App = F3(function (a,b,c) { return {html: a,model: b,tasks: c};}); var Config = F4(function (a,b,c,d) { return {init: a,update: b,view: c,inputs: d};}); return _elm.StartApp.values = {_op: _op,start: start,Config: Config,App: App}; }; Elm.Native = Elm.Native || {}; Elm.Native.Window = {}; Elm.Native.Window.make = function make(localRuntime) { localRuntime.Native = localRuntime.Native || {}; localRuntime.Native.Window = localRuntime.Native.Window || {}; if (localRuntime.Native.Window.values) { return localRuntime.Native.Window.values; } var NS = Elm.Native.Signal.make(localRuntime); var Tuple2 = Elm.Native.Utils.make(localRuntime).Tuple2; function getWidth() { return localRuntime.node.clientWidth; } function getHeight() { if (localRuntime.isFullscreen()) { return window.innerHeight; } return localRuntime.node.clientHeight; } var dimensions = NS.input('Window.dimensions', Tuple2(getWidth(), getHeight())); function resizeIfNeeded() { // Do not trigger event if the dimensions have not changed. // This should be most of the time. var w = getWidth(); var h = getHeight(); if (dimensions.value._0 === w && dimensions.value._1 === h) { return; } setTimeout(function() { // Check again to see if the dimensions have changed. // It is conceivable that the dimensions have changed // again while some other event was being processed. w = getWidth(); h = getHeight(); if (dimensions.value._0 === w && dimensions.value._1 === h) { return; } localRuntime.notify(dimensions.id, Tuple2(w, h)); }, 0); } localRuntime.addListener([dimensions.id], window, 'resize', resizeIfNeeded); return localRuntime.Native.Window.values = { dimensions: dimensions, resizeIfNeeded: resizeIfNeeded }; }; Elm.Window = Elm.Window || {}; Elm.Window.make = function (_elm) { "use strict"; _elm.Window = _elm.Window || {}; if (_elm.Window.values) return _elm.Window.values; var _U = Elm.Native.Utils.make(_elm),$Basics = Elm.Basics.make(_elm),$Native$Window = Elm.Native.Window.make(_elm),$Signal = Elm.Signal.make(_elm); var _op = {}; var dimensions = $Native$Window.dimensions; var width = A2($Signal.map,$Basics.fst,dimensions); var height = A2($Signal.map,$Basics.snd,dimensions); return _elm.Window.values = {_op: _op,dimensions: dimensions,width: width,height: height}; }; Elm.Material = Elm.Material || {}; Elm.Material.Layout = Elm.Material.Layout || {}; Elm.Material.Layout.make = function (_elm) { "use strict"; _elm.Material = _elm.Material || {}; _elm.Material.Layout = _elm.Material.Layout || {}; if (_elm.Material.Layout.values) return _elm.Material.Layout.values; var _U = Elm.Native.Utils.make(_elm), $Array = Elm.Array.make(_elm), $Basics = Elm.Basics.make(_elm), $Debug = Elm.Debug.make(_elm), $Effects = Elm.Effects.make(_elm), $Html = Elm.Html.make(_elm), $Html$Attributes = Elm.Html.Attributes.make(_elm), $Html$Events = Elm.Html.Events.make(_elm), $List = Elm.List.make(_elm), $Material$Helpers = Elm.Material.Helpers.make(_elm), $Material$Icon = Elm.Material.Icon.make(_elm), $Material$Ripple = Elm.Material.Ripple.make(_elm), $Maybe = Elm.Maybe.make(_elm), $Result = Elm.Result.make(_elm), $Signal = Elm.Signal.make(_elm), $Window = Elm.Window.make(_elm); var _op = {}; var Contents = F4(function (a,b,c,d) { return {header: a,drawer: b,tabs: c,main: d};}); var drawerView = F3(function (addr,model,elems) { return A2($Html.div, _U.list([$Html$Attributes.classList(_U.list([{ctor: "_Tuple2",_0: "mdl-layout__drawer",_1: true} ,{ctor: "_Tuple2",_0: "is-visible",_1: model.isDrawerOpen}]))]), elems); }); var Scroll = {ctor: "Scroll"}; var Seamed = {ctor: "Seamed"}; var Standard = {ctor: "Standard"}; var headerView = F2(function (model,_p0) { var _p1 = _p0; return A3($Material$Helpers.filter, $Html.header, _U.list([$Html$Attributes.classList(_U.list([{ctor: "_Tuple2",_0: "mdl-layout__header",_1: true} ,{ctor: "_Tuple2",_0: "is-casting-shadow",_1: _U.eq(model.mode,Standard)}]))]), _U.list([_p1._0,A2($Maybe.map,$Html.div(_U.list([$Html$Attributes.$class("mdl-layout__header-row")])),_p1._1),_p1._2])); }); var link = F2(function (attrs,contents) { return A2($Html.a,A2($List._op["::"],$Html$Attributes.$class("mdl-navigation__link"),attrs),contents);}); var navigation = function (contents) { return A2($Html.nav,_U.list([$Html$Attributes.$class("mdl-navigation")]),contents);}; var title = function (t) { return A2($Html.span,_U.list([$Html$Attributes.$class("mdl-layout__title")]),_U.list([$Html.text(t)]));}; var spacer = A2($Html.div,_U.list([$Html$Attributes.$class("mdl-layout-spacer")]),_U.list([])); var Ripple = F2(function (a,b) { return {ctor: "Ripple",_0: a,_1: b};}); var ScrollTab = function (a) { return {ctor: "ScrollTab",_0: a};}; var SmallScreen = function (a) { return {ctor: "SmallScreen",_0: a};}; var ToggleDrawer = {ctor: "ToggleDrawer"}; var drawerButton = function (addr) { return A2($Html.div, _U.list([$Html$Attributes.$class("mdl-layout__drawer-button"),A2($Html$Events.onClick,addr,ToggleDrawer)]), _U.list([$Material$Icon.i("menu")])); }; var obfuscator = F2(function (addr,model) { return A2($Html.div, _U.list([$Html$Attributes.classList(_U.list([{ctor: "_Tuple2",_0: "mdl-layout__obfuscator",_1: true} ,{ctor: "_Tuple2",_0: "is-visible",_1: model.isDrawerOpen}])) ,A2($Html$Events.onClick,addr,ToggleDrawer)]), _U.list([])); }); var SwitchTab = function (a) { return {ctor: "SwitchTab",_0: a};}; var Model = F8(function (a,b,c,d,e,f,g,h) { return {selectedTab: a,isDrawerOpen: b,fixedHeader: c,fixedDrawer: d,fixedTabs: e,rippleTabs: f,mode: g,state: h}; }); var s = function (model) { var _p2 = model.state;return _p2._0;}; var tabsView = F3(function (addr,model,tabs) { var chevron = F2(function (direction,offset) { return A2($Html.div, _U.list([$Html$Attributes.classList(_U.list([{ctor: "_Tuple2",_0: "mdl-layout__tab-bar-button",_1: true} ,{ctor: "_Tuple2" ,_0: A2($Basics._op["++"],"mdl-layout__tab-bar-",A2($Basics._op["++"],direction,"-button")) ,_1: true}]))]), _U.list([A3($Material$Icon.view, A2($Basics._op["++"],"chevron_",direction), $Material$Icon.S, _U.list([A2($Html$Events.onClick,addr,ScrollTab(offset))]))])); }); return A2($Html.div, _U.list([$Html$Attributes.$class("mdl-layout__tab-bar-container")]), _U.list([A2(chevron,"left",-100) ,A2($Html.div, _U.list([$Html$Attributes.classList(_U.list([{ctor: "_Tuple2",_0: "mdl-layout__tab-bar",_1: true} ,{ctor: "_Tuple2",_0: "mdl-js-ripple-effect",_1: model.rippleTabs} ,{ctor: "_Tuple2",_0: "mds-js-ripple-effect--ignore-events",_1: model.rippleTabs}]))]), A2($Material$Helpers.mapWithIndex, F2(function (tabIndex,tab) { return A3($Material$Helpers.filter, $Html.a, _U.list([$Html$Attributes.classList(_U.list([{ctor: "_Tuple2",_0: "mdl-layout__tab",_1: true} ,{ctor: "_Tuple2",_0: "is-active",_1: _U.eq(tabIndex,model.selectedTab)}])) ,A2($Html$Events.onClick,addr,SwitchTab(tabIndex))]), _U.list([$Maybe.Just(tab) ,model.rippleTabs ? A2($Maybe.map, A2($Material$Ripple.view, A2($Signal.forwardTo,addr,Ripple(tabIndex)), _U.list([$Html$Attributes.$class("mdl-layout__tab-ripple-container")])), A2($Array.get,tabIndex,s(model).tabs)) : $Maybe.Nothing])); }), tabs)) ,A2(chevron,"right",100)])); }); var view = F3(function (addr,model,_p3) { var _p4 = _p3; var _p11 = _p4.tabs; var _p10 = _p4.header; var _p9 = _p4.drawer; var hasHeader = !_U.eq(_p11,$Maybe.Nothing) || !_U.eq(_p10,$Maybe.Nothing); var mode = function () { var _p5 = model.mode; switch (_p5.ctor) {case "Standard": return ""; case "Scroll": return "mdl-layout__header-scroll"; default: return "mdl-layout__header-seamed";} }(); var _p6 = function () { var _p7 = {ctor: "_Tuple3",_0: _p9,_1: _p10,_2: model.fixedHeader}; if (_p7.ctor === "_Tuple3" && _p7._0.ctor === "Just") { if (_p7._1.ctor === "Just" && _p7._2 === true) { return {ctor: "_Tuple2",_0: $Maybe.Nothing,_1: $Maybe.Just(drawerButton(addr))}; } else { return {ctor: "_Tuple2",_0: $Maybe.Just(drawerButton(addr)),_1: $Maybe.Nothing}; } } else { return {ctor: "_Tuple2",_0: $Maybe.Nothing,_1: $Maybe.Nothing}; } }(); var contentDrawerButton = _p6._0; var headerDrawerButton = _p6._1; return A2($Html.div, _U.list([$Html$Attributes.$class("mdl-layout__container")]), _U.list([A3($Material$Helpers.filter, $Html.div, _U.list([$Html$Attributes.classList(_U.list([{ctor: "_Tuple2",_0: "mdl-layout",_1: true} ,{ctor: "_Tuple2",_0: "is-upgraded",_1: true} ,{ctor: "_Tuple2",_0: "is-small-screen",_1: s(model).isSmallScreen} ,{ctor: "_Tuple2",_0: "has-drawer",_1: !_U.eq(_p9,$Maybe.Nothing)} ,{ctor: "_Tuple2",_0: "has-tabs",_1: !_U.eq(_p11,$Maybe.Nothing)} ,{ctor: "_Tuple2",_0: "mdl-js-layout",_1: true} ,{ctor: "_Tuple2",_0: "mdl-layout--fixed-drawer",_1: model.fixedDrawer && !_U.eq(_p9,$Maybe.Nothing)} ,{ctor: "_Tuple2",_0: "mdl-layout--fixed-header",_1: model.fixedHeader && hasHeader} ,{ctor: "_Tuple2",_0: "mdl-layout--fixed-tabs",_1: model.fixedTabs && !_U.eq(_p11,$Maybe.Nothing)}]))]), _U.list([hasHeader ? $Maybe.Just(A2(headerView, model, {ctor: "_Tuple3",_0: headerDrawerButton,_1: _p10,_2: A2($Maybe.map,A2(tabsView,addr,model),_p11)})) : $Maybe.Nothing ,A2($Maybe.map,function (_p8) { return A2(obfuscator,addr,model);},_p9) ,A2($Maybe.map,A2(drawerView,addr,model),_p9) ,contentDrawerButton ,$Maybe.Just(A2($Html.main$,_U.list([$Html$Attributes.$class("mdl-layout__content")]),_p4.main))]))])); }); var S = function (a) { return {ctor: "S",_0: a};}; var initState = function (no_tabs) { return S({tabs: A2($Array.repeat,no_tabs,$Material$Ripple.model),isSmallScreen: false});}; var defaultLayoutModel = {selectedTab: 0 ,isDrawerOpen: false ,fixedHeader: true ,fixedDrawer: false ,fixedTabs: false ,rippleTabs: true ,mode: Standard ,state: initState(0)}; var update = F2(function (action,model) { var _p12 = model.state; var state = _p12._0; var _p13 = action; switch (_p13.ctor) {case "SmallScreen": var _p14 = _p13._0; return $Material$Helpers.pure(_U.update(model, {state: S(_U.update(state,{isSmallScreen: _p14})),isDrawerOpen: $Basics.not(_p14) && model.isDrawerOpen})); case "SwitchTab": return $Material$Helpers.pure(_U.update(model,{selectedTab: _p13._0})); case "ToggleDrawer": return $Material$Helpers.pure(_U.update(model,{isDrawerOpen: $Basics.not(model.isDrawerOpen)})); case "Ripple": var _p18 = _p13._0; var _p15 = A2($Maybe.withDefault, $Material$Helpers.pure(state), A2($Maybe.map, function (_p16) { var _p17 = _p16; return {ctor: "_Tuple2",_0: _U.update(state,{tabs: A3($Array.set,_p18,_p17._0,s(model).tabs)}),_1: A2($Effects.map,Ripple(_p18),_p17._1)}; }, A2($Maybe.map,$Material$Ripple.update(_p13._1),A2($Array.get,_p18,s(model).tabs)))); var state$ = _p15._0; var effect = _p15._1; return {ctor: "_Tuple2",_0: _U.update(model,{state: S(state$)}),_1: effect}; default: return {ctor: "_Tuple2",_0: model,_1: $Effects.none};} }); var State$ = F2(function (a,b) { return {tabs: a,isSmallScreen: b};}); var setupSizeChangeSignal = function (f) { return A2($Signal.map, function (_p19) { return f(SmallScreen(_p19)); }, $Signal.dropRepeats(A2($Signal.map,F2(function (x,y) { return _U.cmp(x,y) > 0;})(1024),$Window.width))); }; return _elm.Material.Layout.values = {_op: _op ,setupSizeChangeSignal: setupSizeChangeSignal ,defaultLayoutModel: defaultLayoutModel ,initState: initState ,update: update ,spacer: spacer ,title: title ,navigation: navigation ,link: link ,view: view ,Model: Model ,Contents: Contents ,SwitchTab: SwitchTab ,ToggleDrawer: ToggleDrawer}; }; Elm.Main = Elm.Main || {}; Elm.Main.make = function (_elm) { "use strict"; _elm.Main = _elm.Main || {}; if (_elm.Main.values) return _elm.Main.values; var _U = Elm.Native.Utils.make(_elm), $Array = Elm.Array.make(_elm), $Basics = Elm.Basics.make(_elm), $Debug = Elm.Debug.make(_elm), $Demo$Buttons = Elm.Demo.Buttons.make(_elm), $Demo$Grid = Elm.Demo.Grid.make(_elm), $Demo$Snackbar = Elm.Demo.Snackbar.make(_elm), $Demo$Textfields = Elm.Demo.Textfields.make(_elm), $Effects = Elm.Effects.make(_elm), $Html = Elm.Html.make(_elm), $Html$Attributes = Elm.Html.Attributes.make(_elm), $List = Elm.List.make(_elm), $Material = Elm.Material.make(_elm), $Material$Color = Elm.Material.Color.make(_elm), $Material$Layout = Elm.Material.Layout.make(_elm), $Material$Style = Elm.Material.Style.make(_elm), $Maybe = Elm.Maybe.make(_elm), $Result = Elm.Result.make(_elm), $Signal = Elm.Signal.make(_elm), $StartApp = Elm.StartApp.make(_elm), $Task = Elm.Task.make(_elm); var _op = {}; var stylesheet = $Material$Style.stylesheet("\n blockquote:before { content: none; }\n blockquote:after { content: none; }\n blockquote {\n border-left-style: solid;\n border-width: 1px;\n padding-left: 1.3ex;\n border-color: rgb(255,82,82);\n /* TODO: Really need a way to specify \"secondary color\" in\n inline css.\n */\n }\n"); var header = _U.list([$Material$Layout.title("elm-mdl") ,$Material$Layout.spacer ,$Material$Layout.navigation(_U.list([A2($Material$Layout.link, _U.list([$Html$Attributes.href("https://www.getmdl.io/components/index.html")]), _U.list([$Html.text("MDL")])) ,A2($Material$Layout.link, _U.list([$Html$Attributes.href("https://www.google.com/design/spec/material-design/introduction.html")]), _U.list([$Html.text("Material Design")]))]))]); var drawer = _U.list([$Material$Layout.title("Example drawer") ,$Material$Layout.navigation(_U.list([A2($Material$Layout.link, _U.list([$Html$Attributes.href("https://github.com/debois/elm-mdl")]), _U.list([$Html.text("github")])) ,A2($Material$Layout.link, _U.list([$Html$Attributes.href("http://package.elm-lang.org/packages/debois/elm-mdl/latest/")]), _U.list([$Html.text("elm-package")]))]))]); var SnackbarAction = function (a) { return {ctor: "SnackbarAction",_0: a};}; var TextfieldAction = function (a) { return {ctor: "TextfieldAction",_0: a};}; var ButtonsAction = function (a) { return {ctor: "ButtonsAction",_0: a};}; var tabs = _U.list([{ctor: "_Tuple2" ,_0: "Snackbar" ,_1: F2(function (addr,model) { return _U.list([A2($Demo$Snackbar.view,A2($Signal.forwardTo,addr,SnackbarAction),model.snackbar)]);})} ,{ctor: "_Tuple2" ,_0: "Textfields" ,_1: F2(function (addr,model) { return _U.list([A2($Demo$Textfields.view,A2($Signal.forwardTo,addr,TextfieldAction),model.textfields)]); })} ,{ctor: "_Tuple2" ,_0: "Buttons" ,_1: F2(function (addr,model) { return _U.list([A2($Demo$Buttons.view,A2($Signal.forwardTo,addr,ButtonsAction),model.buttons)]);})} ,{ctor: "_Tuple2",_0: "Grid",_1: F2(function (addr,model) { return $Demo$Grid.view;})}]); var tabViews = $Array.fromList(A2($List.map,$Basics.snd,tabs)); var tabTitles = A2($List.map,function (_p0) { return $Html.text($Basics.fst(_p0));},tabs); var LayoutAction = function (a) { return {ctor: "LayoutAction",_0: a};}; var update = F2(function (action,model) { var _p1 = A2($Debug.log,"Action: ",action); switch (_p1.ctor) {case "LayoutAction": return A6($Material.lift, function (_) { return _.layout; }, F2(function (m,x) { return _U.update(m,{layout: x});}), LayoutAction, $Material$Layout.update, _p1._0, model); case "ButtonsAction": return A6($Material.lift, function (_) { return _.buttons; }, F2(function (m,x) { return _U.update(m,{buttons: x});}), ButtonsAction, $Demo$Buttons.update, _p1._0, model); case "TextfieldAction": return A5($Material.lift$, function (_) { return _.textfields; }, F2(function (m,x) { return _U.update(m,{textfields: x});}), $Demo$Textfields.update, _p1._0, model); default: return A6($Material.lift, function (_) { return _.snackbar; }, F2(function (m,x) { return _U.update(m,{snackbar: x});}), SnackbarAction, $Demo$Snackbar.update, _p1._0, model);} }); var view = F2(function (addr,model) { var top = A2($Html.div, _U.list([$Html$Attributes.style(_U.list([{ctor: "_Tuple2",_0: "max-width",_1: "55rem"} ,{ctor: "_Tuple2",_0: "margin",_1: "auto"} ,{ctor: "_Tuple2",_0: "padding-left",_1: "5%"} ,{ctor: "_Tuple2",_0: "padding-right",_1: "5%"}]))]), A2(A2($Maybe.withDefault, F2(function (addr,model) { return _U.list([A2($Html.div,_U.list([]),_U.list([$Html.text("This can\'t happen.")]))]);}), A2($Array.get,model.layout.selectedTab,tabViews)), addr, model)); return A3($Material.topWithScheme, $Material$Color.Teal, $Material$Color.Red, A3($Material$Layout.view, A2($Signal.forwardTo,addr,LayoutAction), model.layout, {header: $Maybe.Just(header),drawer: $Maybe.Just(drawer),tabs: $Maybe.Just(tabTitles),main: _U.list([stylesheet,top])})); }); var inputs = _U.list([$Material$Layout.setupSizeChangeSignal(LayoutAction)]); var Model = F4(function (a,b,c,d) { return {layout: a,buttons: b,textfields: c,snackbar: d};}); var layoutModel = _U.update($Material$Layout.defaultLayoutModel,{state: $Material$Layout.initState($List.length(tabs))}); var model = {layout: layoutModel,buttons: $Demo$Buttons.model,textfields: $Demo$Textfields.model,snackbar: $Demo$Snackbar.model}; var init = {ctor: "_Tuple2",_0: model,_1: $Effects.none}; var app = $StartApp.start({init: init,view: view,update: update,inputs: inputs}); var main = app.html; var tasks = Elm.Native.Task.make(_elm).performSignal("tasks",app.tasks); return _elm.Main.values = {_op: _op ,layoutModel: layoutModel ,Model: Model ,model: model ,LayoutAction: LayoutAction ,ButtonsAction: ButtonsAction ,TextfieldAction: TextfieldAction ,SnackbarAction: SnackbarAction ,update: update ,drawer: drawer ,header: header ,tabs: tabs ,tabViews: tabViews ,tabTitles: tabTitles ,stylesheet: stylesheet ,view: view ,init: init ,inputs: inputs ,app: app ,main: main}; };