Elisha Nuchi
f2a259ce66
• re-organize file structure with one directory per dialog • add index.html file per dialog • add bootstrap styling and dynamic cdn loading • clean up react code and stylesheet npm setup script update adds force flag "setup": "rm -f .clasp.json ..." Update README.md Move clasp to devDependencies update dynamic cdn urls Add repository field
17 lines
10 KiB
HTML
17 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<base target="_top" />
|
||
<!-- Add any external scripts and stylesheets here -->
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Nunito"
|
||
rel="stylesheet"
|
||
/>
|
||
</head>
|
||
<body>
|
||
<section id="index">
|
||
<!-- bundled js and css will get inlined here during build -->
|
||
</section>
|
||
<script type="text/javascript" src="https://unpkg.com/react@16.13.0/umd/react.production.min.js"></script><script type="text/javascript" src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script><script type="text/javascript" src="https://unpkg.com/react-transition-group@4.4.1/dist/react-transition-group.min.js"></script><script type="text/javascript" src="https://unpkg.com/prop-types@15.7.2/prop-types.min.js"></script><script type="text/javascript">!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=8)}([function(e,n){e.exports=React},function(e,n){e.exports=PropTypes},function(e,n){e.exports=ReactTransitionGroup},function(e,n){e.exports=ReactDOM},function(e,n,t){var r=t(5),o=t(6);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.i,o,""]]);var a={insert:"head",singleton:!1},i=(r(o,a),o.locals?o.locals:{});e.exports=i},function(e,n,t){"use strict";var r,o=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},a=function(){var e={};return function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}e[n]=t}return e[n]}}(),i=[];function s(e){for(var n=-1,t=0;t<i.length;t++)if(i[t].identifier===e){n=t;break}return n}function c(e,n){for(var t={},r=[],o=0;o<e.length;o++){var a=e[o],c=n.base?a[0]+n.base:a[0],u=t[c]||0,l="".concat(c," ").concat(u);t[c]=u+1;var d=s(l),f={css:a[1],media:a[2],sourceMap:a[3]};-1!==d?(i[d].references++,i[d].updater(f)):i.push({identifier:l,updater:b(f,n),references:1}),r.push(l)}return r}function u(e){var n=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var o=t.nc;o&&(r.nonce=o)}if(Object.keys(r).forEach((function(e){n.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(n);else{var i=a(e.insert||"head");if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(n)}return n}var l,d=(l=[],function(e,n){return l[e]=n,l.filter(Boolean).join("\n")});function f(e,n,t,r){var o=t?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=d(n,o);else{var a=document.createTextNode(o),i=e.childNodes;i[n]&&e.removeChild(i[n]),i.length?e.insertBefore(a,i[n]):e.appendChild(a)}}function p(e,n,t){var r=t.css,o=t.media,a=t.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),a&&btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var m=null,h=0;function b(e,n){var t,r,o;if(n.singleton){var a=h++;t=m||(m=u(n)),r=f.bind(null,t,a,!1),o=f.bind(null,t,a,!0)}else t=u(n),r=p.bind(null,t,n),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)};return r(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;r(e=n)}else o()}}e.exports=function(e,n){(n=n||{}).singleton||"boolean"==typeof n.singleton||(n.singleton=o());var t=c(e=e||[],n);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<t.length;r++){var o=s(t[r]);i[o].references--}for(var a=c(e,n),u=0;u<t.length;u++){var l=s(t[u]);0===i[l].references&&(i[l].updater(),i.splice(l,1))}t=a}}}},function(e,n,t){(n=t(7)(!1)).push([e.i,"input {\n font-family: 'Nunito', sans-serif;\n width: 150px;\n height: 28px;\n border: 1px solid #6b6b6b;\n border-radius: 4px;\n}\n\ninput:focus {\n outline: 0 none;\n}\n\nbutton {\n cursor: pointer;\n font-family: 'Nunito', sans-serif;\n}\n\nbutton.submit {\n background: rgb(234, 234, 255);\n margin: 0px 10px;\n padding-top: 6px;\n padding-bottom: 6px;\n border: 1px solid #6b6b6b;\n border-radius: 4px;\n transition: background 300ms ease-in;\n}\n\nbutton.submit:hover {\n background: rgb(234, 234, 255, 0.4);\n}\n\nbutton.delete {\n width: 17px;\n -webkit-transition-duration: 0.4s; /* Safari */\n background-color: #ffffff;\n border: 1px solid #f44336;\n color: #676767;\n display: inline-block;\n font-size: 11px;\n height: 17px;\n line-height: 15px;\n margin-left: 3px;\n margin-right: 11px;\n padding: 1px;\n text-transform: uppercase;\n transition-duration: 0.6s;\n vertical-align: middle;\n}\n\nbutton.delete:hover {\n background-color: #f44336;\n color: #ffffff;\n}\n\nbutton.delete:active {\n background-color: #f44336;\n\n transform: translateY(1px);\n transition-duration: 0.3s;\n}\n\nbutton.delete:focus {\n outline: none;\n}\n\n.formBlock {\n display: -webkit-box;\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n padding-bottom: 30px;\n}\n\n.sheetLine {\n padding: 10px 0px;\n border-bottom: 1px solid #eaeaea;\n}\n\nbutton.basicButton {\n padding: 0;\n border: none;\n outline: none;\n font: inherit;\n color: inherit;\n background: none;\n}\n\nspan.sheetNameText {\n cursor: pointer;\n font-size: 14px;\n font-family: 'Nunito', sans-serif;\n border-bottom-color: rgba(51, 130, 54, 0);\n border-bottom-width: 3px solid none;\n border-bottom-style: solid;\n transition: border-bottom-color 300ms ease-in;\n}\n\nspan.sheetNameText:hover {\n border-bottom-color: rgba(51, 130, 54, 0.2);\n}\n\nspan.sheetNameText:active {\n border-bottom-color: rgba(51, 130, 54, 0.2);\n}\n\nspan.sheetNameText.active-sheet {\n border-bottom-color: rgb(51, 130, 54);\n}\n\n/*\nCSSTransitionGroup styling\n */\n.sheetNames-enter {\n opacity: 0;\n}\n\n.sheetNames-enter.sheetNames-enter-active {\n opacity: 1;\n transition: opacity 300ms ease-in;\n}\n\n.sheetNames-exit {\n opacity: 1;\n}\n\n.sheetNames-exit.sheetNames-exit-active {\n opacity: 0;\n transition: opacity 300ms ease-in;\n}\n\n.sheetNames-appear {\n opacity: 0;\n}\n\n.sheetNames-appear.sheetNames-appear-active {\n opacity: 1;\n transition: opacity 0.5ms ease-in;\n}\n",""]),e.exports=n},function(e,n,t){"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t=function(e,n){var t=e[1]||"",r=e[3];if(!r)return t;if(n&&"function"==typeof btoa){var o=(i=r,s=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(c," */")),a=r.sources.map((function(e){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(e," */")}));return[t].concat(a).concat([o]).join("\n")}var i,s,c;return[t].join("\n")}(n,e);return n[2]?"@media ".concat(n[2]," {").concat(t,"}"):t})).join("")},n.i=function(e,t,r){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var a=0;a<this.length;a++){var i=this[a][0];null!=i&&(o[i]=!0)}for(var s=0;s<e.length;s++){var c=[].concat(e[s]);r&&o[c[0]]||(t&&(c[2]?c[2]="".concat(t," and ").concat(c[2]):c[2]=t),n.push(c))}},n}},function(e,n,t){"use strict";t.r(n);var r=t(0),o=t.n(r),a=t(3),i=t.n(a),s=t(2),c=t(1),u=t.n(c);const l=({submitNewSheet:e})=>{const[n,t]=Object(r.useState)("");return o.a.createElement("div",{className:"formBlock"},o.a.createElement("form",{onSubmit:r=>{r.preventDefault(),0!==n.length&&(e(n),t(""))}},o.a.createElement("div",null,o.a.createElement("span",null,"Add a sheet")),o.a.createElement("div",null,o.a.createElement("input",{onChange:e=>t(e.target.value),value:n,placeholder:"New sheet name"}),o.a.createElement("button",{className:"submit",type:"submit"},"Add"))))};var d=l;l.propTypes={submitNewSheet:u.a.func};const f=({sheetDetails:e,deleteSheet:n,setActiveSheet:t})=>{const{index:r,name:a,isActive:i}=e;return o.a.createElement("div",{className:"sheetLine"},o.a.createElement("button",{className:"delete",onClick:()=>n(r)},"×"),o.a.createElement("button",{className:"basicButton",onClick:()=>t(a)},o.a.createElement("span",{className:`sheetNameText ${i?"active-sheet":""}`},a)))};var p=f;f.propTypes={sheetDetails:u.a.shape({index:u.a.number,name:u.a.string,isActive:u.a.bool}),deleteSheet:u.a.func,setActiveSheet:u.a.func};const m={},h=new Set(["withFailureHandler","withLogger","withSuccessHandler","withUserObject"]);Object.keys(google.script.run).filter(e=>!h.has(e)).forEach(e=>{m[e]=(...n)=>new Promise((t,r)=>{google.script.run.withSuccessHandler(t).withFailureHandler(r)[e](...n)})});var b=m;var v=()=>{const[e,n]=Object(r.useState)([]);Object(r.useEffect)(()=>{b.getSheetsData().then(n).catch(alert)},[]);const t=e=>{b.deleteSheet(e).then(n).catch(alert)},a=e=>{b.setActiveSheet(e).then(n).catch(alert)};return o.a.createElement("div",null,o.a.createElement(d,{submitNewSheet:async e=>{try{const t=await b.addSheet(e);n(t)}catch(e){alert(e)}}}),o.a.createElement(s.TransitionGroup,{className:"sheet-list"},e.length>0&&e.map(e=>o.a.createElement(s.CSSTransition,{classNames:"sheetNames",timeout:500,key:e.name},o.a.createElement(p,{sheetDetails:e,deleteSheet:t,setActiveSheet:a})))))};t(4);i.a.render(o.a.createElement(v,null),document.getElementById("index"))}]);</script></body>
|
||
</html>
|