diff --git a/wip.js b/wip.js
new file mode 100644
index 0000000..df8dede
--- /dev/null
+++ b/wip.js
@@ -0,0 +1,12626 @@
+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}; +};