-
-
Notifications
You must be signed in to change notification settings - Fork 159
/
Copy pathtemplate.js
1 lines (1 loc) · 20.8 KB
/
template.js
1
const loginPage='\n <style>\n .outerContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n padding-left: 15px;\n padding-right: 15px;\n }\n \n .loginTitle {\n font-size: 15px;\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items:left;\n padding-bottom: 10px;\n padding-left: 2px;\n padding-top: 10px;\n }\n\n .inputTitle {\n font-size: 10px;\n padding-top: 5px;\n padding-left: 2px;\n }\n\n .inputField {\n font-size: 10px;\n width: 100%;\n margin-left: 0px;\n }\n .signupFree {\n font-size: 10px;\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items:left;\n padding-left: 2px;\n padding-top: 0px;\n }\n </style>\n <form method="dialog" id="main">\n <div class="outerContainer">\n <div class="loginTitle">\n Login\n </div>\n <div class="inputTitle">\n Account/Email\n </div>\n <input class="inputField" type="text" id="username" value="" placeholder="Username" />\n <div class="inputTitle">\n Password\n </div>\n <sp-textfield class="inputField" type="password" id="password" value="">\n </sp-textfield>\n <div id="errorMsgField" style="font-size:12px; color: rgb(255,1,120); padding-top:15px; padding-bottom:15px; display:none;">\n Invalid username or password\n </div>\n <div style="display: flex; justify-content:center; align-items:center; margin-top: 5px;">\n <button id="ok" type="submit" uxp-variant="cta" style="width:100%">Login</button>\n </div>\n <div style="display: flex; flex-direction: column; justify-content: center; align-items:center; width:100%; margin-top:20px;">\n <div style="margin-bottom:20px; display: none; "> \x3c!-- Remove display none to show google sso --\x3e\n <div id="googleSSO"></div>\n <a id="googleSSOBtn" href="#">Login with Google SSO</a>\n </div>\n <div>\n <a class="signupFree" href=" https://www.quest.ai/pricing?ref=xdplugin">Signup for free</a>\n </div>\n <hr style="width:60%; padding-left:0px; margin-left: 0px; margin-top: 10px; color: #d6d6d6; height:2px"/>\n <div style="margin-top:0px;">\n <a class="signupFree" href="https://app.quest.ai/platform/forgotPassword?ref=xdplugin">Reset Password</a>\n </div>\n </div> \n <div style="display: flex; justify-content: center; align-items:center; width:100%; margin-top:30px;">\n <img src="images/Login_Image@2x.png" alt="" width="100%" height="auto" style="justify-content: center; align-items:center;"/>\n </div>\n </div>\n </div>\n </form>\n ',exportPage1='\n<style>\n .outerContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n padding-left: 15px;\n padding-right: 15px;\n }\n\n .projectDetails {\n display: none;\n flex-direction: column;\n align-items: left;\n justify-content: left;\n width: 100%;\n padding-top: 10px;\n }\n \n .exportTitle {\n width: 100%;\n font-size: 15px;\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items:left;\n padding-bottom: 10px;\n padding-top: 10px;\n padding-left: 2px;\n }\n\n .projectTitle {\n font-size: 12px;\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items:left;\n padding-top: 10px;\n margin-left: 0px;\n padding-left: 2px;\n }\n\n .projectTitleInput {\n font-size: 12px;\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items:left;\n padding-top: 10px;\n margin-left: 0px;\n padding-left: 0px;\n }\n\n .viewButton {\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items:left;\n width: 100%;\n }\n\n .gameTypeDetailsContainer {\n display: flex;\n flex-direction: column;\n justify-content: left;\n width: 100%;\n padding-left: 2px;\n padding-top: 0px;\n }\n\n .gameTypeDetailsItem {\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items: left;\n padding-left: 0px;\n }\n\n .gameTypeDetailsItem2 {\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n padding-bottom: 0px;\n width: 100%;\n }\n\n .gameTypeDetailsItem3 {\n width: 100%;\n }\n\n .gameTypeSelect {\n width: 100%;\n padding-top: 0px;\n margin-top: 0px;\n \t display: flex;\n flex-direction: row;\n justify-content: left;\n align-items:left;\n }\n\n .exportError {\n width: 100%;\n font-size:10px; \n color: rgb(255,1,120); \n padding-top:10px; \n padding-bottom:10px; \n padding-left: 10px;\n padding-right: 10px;\n display: none;\n text-align: center;\n }\n\n .resourcesDiv {\n width: 100%;\n padding-top: 10px;\n }\n\n .resourcesHeader {\n padding-left: 0px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: left;\n justify-content: left;\n vertical-align: top;\n }\n\n .resourcesTitle {\n padding-left: 10px;\n font-size: 12px;\n vertical-align: top;\n }\n\n .lastSynchedProject {\n width: 100%;\n padding-top: 10px;\n }\n\n .lastSynchedProjectHeader {\n padding-left: 0px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: left;\n justify-content: left;\n vertical-align: top;\n }\n\n .lastSynchedProjectTitle {\n padding-left: 10px;\n font-size: 12px;\n vertical-align: top;\n }\n\n .resourcesDetail {\n padding-top: 10px;\n display: none;\n }\n\n .resourcesDetailItem {\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items:left;\n padding-left: 0px;\n padding-top: 5px;\n font-size: 13px;\n }\n\n .logout {\n padding-left: 0px;\n padding-top:10px;\n font-size: 12px;\n }\n\n .text {\n font-size: 12px;\n text-align: left;\n padding-top: 5px;\n padding-bottom: 10px;\n }\n\n .projectDetailsLabel {\n font-size: 12px;\n font-weight: bold;\n }\n\n .confirmationTitle {\n font-size: 15px;\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items:left;\n padding-bottom: 10px;\n }\n\n .artboardsTitle {\n font-size: 12px;\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items:left;\n padding-top: 15px;\n padding-left: 2px;\n }\n\n\n </style>\n <form>\n <div class="outerContainer">\n <div class="exportTitle">\n Export to Quest\n </div>\n <select id="projectselect" style="padding-bottom:0px; padding-left: 0px; margin-left: 0px; width:100%;" >\n',exportPage2='\n </select>\n <select id="gametype" style="width:100%; padding-bottom:0px; padding-left: 0px; margin-left: 0px;">\n <option selected="selected" value="website">Single Webpage</option>\n <option value="component">Component</option> \n <option value="mobile_optimized">Mobile Game</option> \n </select>\n <div style="padding-left:2px; padding-right:0px; font-size:10px;" id="hint-gametype"></div>\n <hr style="width:100%; padding-left:0px; margin-left: 0px; margin-top: 15px;"/>\n <div class="projectTitle" id="projectTitle">Name</div>\n <input type="text" name="projectName" id="projectName" class="projectTitleInput" placeholder="My XD Project" style="width:100%"/>\n <hr id="projecthr" style="width:100%; padding-left:0px; margin-left: 0px; margin-top: 15px;"/>\n <div class="artboardsTitle">\n Select Artboards\n </div> \n \n',exportPage2b=' \n <button style="padding-top:10px;padding-left:0px; margin-left:0px;width: 100%;" id="selectArtboards" uxp-variant="primary" href="#">Select Artboards</button>\n <button style="padding-top:10px;" id="confirmArtboards" uxp-variant="primary" href="#">Confirm Artboards</button>\n <p/>\n <p/>\n',exportPage3='\n <p></p>\n <div id="details-gametype"></div>\n <div id="advancedOptionsPanel" style="width:100%; padding-left:0px; margin-left: 0px; margin-top: 10px;">\n <hr style="width:100%; padding-left:0px; margin-left: 0px; margin-top: 10px;"/>\n <div id="advancedOptions" class="lastSynchedProject">\n <div id="advancedOptionsHeader" class="lastSynchedProjectHeader">\n <img id="advancedOptionsToggle" style="vertical-align: top; margin-top: 3px;" height="10px" src="images/Arrow_Down@2x.png"> </img>\n <div id="advancedOptionsTitle" class="lastSynchedProjectTitle"> Image Quality </div>\n </div>\n <div id="advancedOptionsDiv" class="projectDetails" style="display:block;"> \n \x3c!--div>Image Quality: </div--\x3e\n <select id="imagesizetype" style="width:95%; padding-bottom:0px; padding-left: 0px; margin-left: 0px;">\n <option selected="selected" value="1x">1X - Standard</option>\n <option value="aix">AI - High Res</option> \n <option value="2x">2X - High Res</option>\n </select>\n <div style="padding-left:2px; padding-right:0px; font-size:10px;" id="hint-imagesizetype">Standard Resolution</div>\n </div>\n </div>\n <hr style="width:100%; padding-left:0px; margin-left: 0px; margin-top: 15px;"/>\n </div>\n <div id="exportError" class="exportError">Please select at least one Artboard to export</div>\n <button id="export" style="margin-top:15px;" type="submit" uxp-variant="cta">Export</button>\n <hr style="width:100%; padding-left:0px; margin-left: 0px; margin-top: 10px;"/>\n <div id="lastSynchedProject" class="lastSynchedProject">\n <div id="lastSynchedProjectHeader" class="lastSynchedProjectHeader">\n <img id="lastSynchedProjectToggle" style="vertical-align: top; margin-top: 3px;" height="10px" src="images/Arrow_Right@2x.png"> </img>\n <div id="lastSynchedProjectTitle" class="lastSynchedProjectTitle"> Last Synced Project </div>\n </div>\n <div id="projectDetailsDiv" class="projectDetails"> </div>\n </div>\n <hr style="width:100%; padding-left:0px; margin-left: 0px; margin-top: 15px;"/>\n <div id="resources" class="resourcesDiv">\n <div id="resourcesHeader" class="resourcesHeader">\n <img id="resourcesToggle" style="vertical-align: top; margin-top: 3px;" height="10px" src="images/Arrow_Right@2x.png"> </img>\n <div id="resourcesTitle" class="resourcesTitle"> Resources </div>\n </div>\n <div id="resourcesDetail" class="resourcesDetail">\n <div class="resourcesDetailItem">\n <img height="15px" style="margin-right:5px;" src="images/icon_myProjects.png"> </img>\n <a href="https://app.quest.ai/platform/myprojects">My Projects</a>\n </div>\n <div class="resourcesDetailItem">\n <img height="15px" style="margin-right:5px;" src="images/icon_docs.png"> </img>\n <a href="https://www.quest.ai/docs">Docs</a>\n </div>\n <div class="resourcesDetailItem">\n <img height="15px" style="margin-right:5px;" src="images/icon_tutorials.png"> </img>\n <a href="https://www.quest.ai/tutorials">Tutorials</a>\n </div>\n <div class="resourcesDetailItem">\n <img height="15px" style="margin-right:5px;" src="images/icon_youtube.png"> </img>\n <a href="https://www.youtube.com/channel/UCZLJl9NXCr2tF982j0ImrjQ?view_as=subscriber">Videos</a>\n </div>\n <div class="resourcesDetailItem">\n <img height="15px" style="margin-right:5px;" src="images/icon_slack.png"> </img>\n <a href="https://join.slack.com/t/madewithquestai/shared_invite/enQtNDc4OTk1NTA3ODI5LTBjN2MxZWQ0NjMyZDU0MzdlMDdmYmUxNDdiYjlkODU2OTZmYWNlYTYyZGJlOGI4OGY3NzUyODE4YjQ4ODRlNzA">Slack</a>\n </div>\n <div class="resourcesDetailItem">\n <img height="15px" style="margin-right:5px;" src="images/icon_FB.png"> </img>\n <a href="https://www.facebook.com/groups/1244721449044905/">Facebook Group</a>\n </div>\n </div>\n </div>\n <hr style="width:100%; padding-left:0px; margin-left: 0px; margin-top: 15px;"/>\n <a class="logout" id="logout" href="">Logout</a>\n </div>\n</div>\n</form>\n',processingPage='\n<style>\n .outerContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n }\n \n .processingTitle {\n font-size: 15px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items:center;\n padding-bottom: 10px;\n }\n \n .processingDiv {\n width: 100%;\n height: 20px;\n border-radius: 4px;\n background: repeating-linear-gradient(\n 145deg,\n #d5d4d5,\n #d5d4d5 20px,\n #00b8f3 20px,\n #00b8f3 40px\n );\n background-size: 200%, 200%;\n margin-top: 10px;\n margin-bottom: 10px;\n }\n\n .loader {\n border: 4px solid #d5d4d5; /* Light grey */\n border-top: 4px solid #00b8f3; /* Blue */\n border-radius: 50%;\n width: 20px;\n height: 20px;\n }\n\n .processingText {\n font-size: 10px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items:center;\n text-align: center;\n padding-top: 10px;\n padding-left: 10px;\n }\n\n .processingImage {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items:center;\n }\n\n .slideshowDiv {\n display: flex; \n justify-content: center; \n align-items:center; \n width:100%; \n margin-top:60px;\n }\n\n </style>\n <div class="outerContainer">\n <div class="processingTitle">\n Processing\n </div>\n <div class="processingImage"><img src="images/spinner.gif" width="32px" height="32px"/></div>\n <div class="processingText"> Exporting to Quest. This might take a few moments...</div>\n <p></p>\n <div class="processingText" id="processingCount" style="display:none;">Uploading..</div>\n <div class="slideshowDiv">\n <img id="slideshowimg" alt="" width="80%" height="auto" style="justify-content: center; align-items:center;"/>\n </div>\n </div>\n',loadingPage='\n<style>\n .outerContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n }\n \n .processingTitle {\n font-size: 15px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items:center;\n padding-bottom: 10px;\n }\n\n .processingImage {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items:center;\n }\n\n </style>\n <div class="outerContainer">\n <div class="processingTitle">\n Loading...\n </div>\n <div class="processingImage"><img src="images/spinner.gif" width="32px" height="32px"/></div>\n <p></p>\n <div class="processingTitle" id="loadingPageInnerMessage" style="color: red; margin-top:25px; font-size: 12px"></div>\n <p></p>\n </div>\n';let projectDetails='\n <div class="projectDetailsLabel"> Last Synced Project </div>\n <div class="text"> {{projectName}} ({{projectId}}) </div>\n \x3c!--div> <img src="{{projectScreenshotUrl}}" height="320"/></div\n <div class="projectDetailsLabel"> Project Id </div>\n <div class="text"> {{projectId}} </div>\n --\x3e\n <div class="projectDetailsLabel"> Sync Date </div>\n <div class="text"> {{syncDate}} </div>\n <div class="viewButton"> <button id="viewInQuest" style="width:100%;" href="#" uxp-variant="primary">View in Quest</button> </div>\n';const alertDialogPage='\n<style>\n .formclass {\n width: 360px;\n }\n .h1 {\n align-items: center;\n justify-content: space-between;\n display: flex;\n flex-direction: row;\n }\n .icon {\n border-radius: 4px;\n width: 24px;\n height: 24px;\n overflow: hidden;\n }\n</style>\n<form class="formclass" method="dialog">\n <h1 class="h1">\n <span>Connect to the Internet</span>\n <img class="icon" src="images/Quest_XD-192.png" />\n </h1>\n <hr />\n <p>In order to function correctly, this plugin requires Internet access. Please connect to a network that has Internet access.</p>\n <footer>\n <button type="submit" uxp-variant="cta">Close</button>\n </footer>\n</form>\n',errDialogPage='\n<style>\n .formclass {\n width: 360px;\n }\n .h1 {\n align-items: center;\n justify-content: space-between;\n display: flex;\n flex-direction: row;\n }\n .icon {\n border-radius: 4px;\n width: 24px;\n height: 24px;\n overflow: hidden;\n }\n</style>\n<form class="formclass" method="dialog">\n <h1 class="h1">\n <span id=\'error_header\'>Error</span>\n <img class="icon" src="images/Quest_XD-192.png" />\n </h1>\n <hr />\n <p id="error_message">Failed to process. Please try again. If problem persists please contact support.</p>\n <footer>\n <button type="submit" uxp-variant="cta">Close</button>\n </footer>\n</form>\n',confirmationDialogPage='\n<style>\n .formclass {\n width: 360px;\n }\n .h1 {\n align-items: center;\n justify-content: space-between;\n display: flex;\n flex-direction: row;\n }\n .icon {\n border-radius: 4px;\n width: 24px;\n height: 24px;\n overflow: hidden;\n }\n</style>\n<form class="formclass" method="dialog">\n <h1 class="h1">\n <span>Export Successful!</span>\n <img class="icon" src="images/Quest_XD-192.png" />\n </h1>\n <hr />\n <p>Your design was successfully exported to Quest.</p>\n <footer>\n <button type="submit" uxp-variant="cta">Close</button>\n <button id="viewInQuestDialog" uxp-variant="primary">View In Quest</button>\n </footer>\n</form>\n',LOCAL_TEMPLATES={PROJECT_DETAILS:projectDetails};function getTemplate(n,e){let t=LOCAL_TEMPLATES[n];if(!t)return console.error("Missing template :"+n),"";for(let n in e){let i=new RegExp("{{"+n+"}}","g");t=t.replace(i,e[n])}return t}module.exports={loginPage:loginPage,exportPage1:exportPage1,exportPage2:exportPage2,exportPage3:exportPage3,exportPage2b:exportPage2b,processingPage:processingPage,getTemplate:getTemplate,loadingPage:loadingPage,alertDialogPage:alertDialogPage,errDialogPage:errDialogPage,confirmationDialogPage:confirmationDialogPage};