-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6a4d5cf
commit e903d5b
Showing
9 changed files
with
285 additions
and
376 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {"version":"1.1.43","settings":{"theme":false,"fontSize":"16","autoupdate":true,"console":true,"scratchpad":""},"pages":[{"name":"index","title":"DvM: DesktopView 4 Mobile","description":"DvM (aka DesktopView 4 Mobile) allows mobile users to see how their app/website will look and behave on a desktop without having to own or touch one.","libraries":["https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css","https://cdnjs.cloudflare.com/ajax/libs/picocss/1.5.7/pico.classless.min.css","https://michaelsboost.com/TailwindCSSMod/tailwind-mod.min.css"],"html":"<!-- top navbar -->\n<div class=\"relative flex flex-col h-screen\">\n <nav class=\"fixed inset-x-0 pt-0 pl-3 pr-2 z-10\">\n <ul class=\"h-auto justify-evenly w-full overflow-auto\">\n <li>\n <button\n data-zoom=\"true\"\n class=\"py-0 my-0 border-none bg-transparent text-current\">\n <i class=\"fa fa-light fa-magnifying-glass-plus\"></i>\n </button>\n </li>\n <li>\n <button \n id=\"mobilep\" \n class=\"py-0 my-0 border-none bg-transparent text-current\"\n name=\"mobile portrait preset size\">\n <i class=\"fa fa-mobile\"></i>\n </button>\n </li>\n <li>\n <button \n id=\"tabletp\" \n class=\"py-0 my-0 border-none bg-transparent text-current\"\n name=\"tablet portrait preset size\">\n <i class=\"fa fa-tablet\"></i>\n </button>\n </li>\n <li>\n <button \n id=\"mobilel\" \n class=\"py-0 my-0 border-none bg-transparent text-current\"\n name=\"mobile landscape preset size\">\n <i class=\"fa fa-mobile transform -rotate-90\"></i>\n </button>\n </li>\n <li>\n <button \n id=\"tabletl\" \n class=\"py-0 my-0 border-none bg-transparent text-current\"\n name=\"tablet landscape preset size\">\n <i class=\"fa fa-tablet transform -rotate-90\"></i>\n </button>\n </li>\n <li>\n <button \n id=\"desktopsize\" \n class=\"py-0 my-0 border-none bg-transparent text-current\"\n name=\"mobile portrait preset size\">\n <i class=\"fa fa-desktop\"></i>\n </button>\n </li>\n <li>\n <button \n id=\"toggletheme\" \n class=\"py-0 my-0 border-none bg-transparent text-current\"\n name=\"toggle theme\">\n <i class=\"fa-solid fa-moon\"></i>\n </button>\n </li>\n </ul>\n </nav>\n\n <!-- canvas container -->\n <div id=\"canvasContainer\" class=\"relative flex-grow bg-repeat overflow-hidden\" style=\"background-image: url('imgs/bg.svg');\">\n\n <!-- preview site here -->\n <div class=\"absolute inset-0\">\n <div id=\"previewElm\" data-canvas class=\"border border-solid bg-white\" style=\"width: 360px; height: 740px;\">\n <iframe\n id=\"preview\"\n src=\"https://michaelsboost.com/\"\n frameborder=\"0\"\n class=\"absolute inset-0 w-full h-full\"\n ></iframe>\n </div>\n <div id=\"fill\" class=\"absolute inset-0 \n \"></div>\n </div>\n </div>\n \n <!-- navbar -->\n <nav class=\"absolute bottom-0 inset-x-0 p-4 text-center block overflow-auto\">\n <input\n id=\"search\"\n type=\"search\"\n placeholder=\"url goes here...\"\n />\n </nav>\n</div>","css":"","javascript":"let project = {\n dark: true,\n url: \"https://michaelsboost.com/\"\n};\n\nconst app = {\n // Function to update localStorage with current project data\n updateLocalStorage: () => {\n localStorage.setItem('project', JSON.stringify(project));\n },\n\n // Function to apply changes to the HTML based on project settings\n applyChanges: () => {\n let dhtml = document.querySelector('html');\n dhtml.setAttribute('data-theme', project.dark ? 'dark' : 'light');\n toggletheme.innerHTML = project.dark ? '<i class=\"fa-solid fa-moon\"></i>' : '<i class=\"fa-solid fa-sun\"></i>';\n document.getElementById('search').value = project.url; // Update input value\n preview.src = project.url; // Update preview src\n },\n\n // Function to handle click event on toggletheme\n toggleTheme: () => {\n project.dark = !project.dark; // Toggle the dark property\n app.updateLocalStorage(); // Save changes to localStorage\n app.applyChanges(); // Apply changes to the HTML\n },\n\n // Function to handle input event on search input\n handleSearchInput: () => {\n project.url = document.getElementById('search').value; // Update project URL\n app.updateLocalStorage(); // Save changes to localStorage\n app.applyChanges(); // Apply changes to the HTML\n },\n \n // Function to import a javascript file\n importJS: url => {\n let script = document.createElement('script');\n script.src = url;\n script.setAttribute('defer', '');\n document.head.appendChild(script);\n },\n\n // Function to init zooming and panning\n initZoomPan: () => {\n // variables\n const userDevice = document.querySelector(\"[data-device]\");\n let canvas = document.querySelector(\"[data-canvas]\");\n let canvasH = parseFloat(canvas.clientHeight);\n let canvasW = parseFloat(canvas.clientWidth / 2);\n\n // init panzoom\n let instance = panzoom(canvas, {\n bounds: true,\n boundsPadding: 0.1\n });\n\n let centerCanvas = () => {\n let canvas = document.querySelector(\"[data-canvas]\");\n let canvasH = parseFloat(canvas.clientHeight);\n let canvasW = parseFloat(canvas.clientWidth / 2);\n canvasW = parseFloat(canvas.clientWidth);\n canvasH = parseFloat(canvas.clientHeight);\n\n // detect if canvas is in portrait mode\n if (canvasW < canvasH) {\n // ratio for zoom\n let zoomRatio = 0.75;\n\n // to center the canvas horizontally we first need to...\n // get half the body & canvas's width\n let bodyW = parseFloat(canvas.parentElement.clientWidth / 2);\n canvasW = parseFloat(canvas.clientWidth / 2);\n // then add them together\n let initialXPos = parseFloat(\n parseFloat(bodyW) - parseFloat(canvasW) * zoomRatio\n );\n\n // to center the canvas vertically we first need to...\n // get the size of both the body and the canvas\n let bodyH = parseFloat(canvas.parentElement.clientHeight);\n bodyH = bodyH / 2;\n canvasH = canvasH / 2;\n // then add them together\n let initialYPos = parseFloat(\n parseFloat(canvasH) - parseFloat(bodyH) * zoomRatio\n );\n\n // set initial zoom\n instance.zoomAbs(\n initialXPos, // initial x position\n initialYPos, // initial y position\n zoomRatio // initial zoom\n );\n instance.moveTo(initialXPos, initialYPos);\n\n // display size\n viewx = parseInt(canvas.style.width);\n viewy = parseInt(canvas.style.height);\n return false;\n }\n\n // ratio for zoom\n let zoomRatio = 0.75;\n\n // to center the canvas horizontally we first need to...\n // get half the body & canvas's width\n let bodyW = parseFloat(canvas.parentElement.clientWidth / 2);\n canvasW = parseFloat(canvas.clientWidth / 2);\n // then add them together\n let initialXPos = parseFloat(\n parseFloat(bodyW) - parseFloat(canvasW) * zoomRatio\n );\n\n // to center the canvas vertically we first need to...\n // get the size of both the body and the canvas\n let bodyH = parseFloat(canvas.parentElement.clientHeight);\n bodyH = bodyH / 2;\n canvasH = canvasH / 2;\n // then add them together\n let initialYPos = parseFloat(\n parseFloat(bodyH) - parseFloat(canvasH) * zoomRatio\n );\n\n // set initial zoom\n instance.zoomAbs(\n initialXPos, // initial x position\n initialYPos, // initial y position\n zoomRatio // initial zoom\n );\n instance.moveTo(initialXPos, initialYPos);\n\n // display size\n viewx.value = parseInt(canvas.style.width);\n viewy.value = parseInt(canvas.style.height);\n };\n centerCanvas();\n\n // enable disable zoom/pan\n const zoomIcon = document.querySelector(\"[data-zoom]\");\n zoomIcon.onclick = () => {\n if (zoomIcon.getAttribute(\"data-zoom\") === \"true\") {\n canvas.selection = false;\n instance.pause();\n zoomIcon.innerHTML =\n '<i class=\"text-xl fa fa-light fa-magnifying-glass-minus\"></i>';\n zoomIcon.setAttribute(\"data-zoom\", false);\n fill.classList.add(\"hidden\");\n \n // rich text editor\n if (!liverender.checked) {\n tabsNav.classList.add('top-12');\n tabsNav.classList.remove('top-0');\n wysiwyg.classList.remove('hidden');\n } else {\n tabsNav.classList.add('top-0');\n tabsNav.classList.remove('top-12');\n wysiwyg.classList.add('hidden');\n }\n } else {\n canvas.selection = true;\n instance.resume();\n zoomIcon.innerHTML =\n '<i class=\"text-xl fa fa-light fa-magnifying-glass-plus\"></i>';\n zoomIcon.setAttribute(\"data-zoom\", true);\n fill.classList.remove(\"hidden\");\n \n // rich text editor\n tabsNav.classList.add('top-0');\n tabsNav.classList.remove('top-12');\n wysiwyg.classList.add('hidden');\n }\n };\n\n // rotate canvas\n let rotateview = () => {\n canvasW = parseFloat(canvas.clientWidth);\n canvasH = parseFloat(canvas.clientHeight);\n\n canvas.style.width = canvasH + \"px\";\n canvas.style.height = canvasW + \"px\";\n centerCanvas();\n };\n\n // reset canvas dimentions and center it\n let resetCanvas = (w, h) => {\n canvasW = w;\n canvasH = h;\n\n if (canvasW > canvasH) {\n // landscape\n canvas.style.width = canvasW + \"px\";\n canvas.style.height = canvasH + \"px\";\n centerCanvas();\n return false;\n }\n\n canvas.style.width = canvasH + \"px\";\n canvas.style.height = canvasW + \"px\";\n centerCanvas();\n };\n\n // reset canvas dimensions and center it\n // dimensions of Galaxy S8+ used\n mobilep.onclick = () => {\n resetCanvas(360, 740);\n rotateview();\n };\n mobilel.onclick = () => {\n resetCanvas(360, 740);\n };\n\n // reset canvas dimensions and center it\n // dimensions of iPad Mini used\n tabletp.onclick = () => {\n resetCanvas(1024, 768);\n rotateview();\n };\n tabletl.onclick = () => {\n resetCanvas(1024, 768);\n };\n\n // reset canvas dimensions and center it\n // 2012 macbook pro dimensions used\n desktopsize.onclick = () => {\n resetCanvas(1440, 834);\n };\n },\n\n // initalize application function\n init: () => {\n // init panzoom library\n app.importJS('./libraries/panzoom/panzoom.mod.js');\n \n // Apply changes to the HTML based on stored project settings\n app.applyChanges();\n\n // Attach click event handler to toggletheme\n toggletheme.onclick = () => {\n app.toggleTheme();\n };\n\n // Attach input event handler to search input\n document.getElementById('search').oninput = () => {\n app.handleSearchInput();\n };\n \n // init zooming and panning\n setTimeout(() => { app.initZoomPan(); }, 300);\n }\n}\n\n// initialize application\napp.init()"}]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.