From ebfdbe1764c3e1881ae17e6316f159b26b8cd25b Mon Sep 17 00:00:00 2001 From: "kendra.jade" Date: Fri, 6 Jun 2025 11:59:20 -0500 Subject: [PATCH 01/10] Created Ionic Standalone Javascript Overview + Modified sidebars.js to include navigation element for Standalone Javascript + Added a standalone-javascript/ directory + Added an overview.md to the standalone-javascript/ directory + Added documentation explaining how to import the required scripts to an html page from ../docs/intro/cdn + Added short paragraph explaining how to access components --- docs/standalone-javascript/overview.md | 35 ++++++++++++++++++++++++++ sidebars.js | 8 ++++++ 2 files changed, 43 insertions(+) create mode 100644 docs/standalone-javascript/overview.md diff --git a/docs/standalone-javascript/overview.md b/docs/standalone-javascript/overview.md new file mode 100644 index 00000000000..ea334948c7b --- /dev/null +++ b/docs/standalone-javascript/overview.md @@ -0,0 +1,35 @@ +--- +title: 'Ionic Standalone Javascript Overview' +sidebar_label: Overview +--- + + + Ionic Standalone JavaScript Overview | Standalone Javascript Documentation + + + +import DocsCard from '@components/global/DocsCard'; +import DocsCards from '@components/global/DocsCards'; + +`@ionic/core` brings the Ionic Experience to any project — no framework, no CLI. + +## Ionic Framework CDN + +Ionic Framework can be included from a CDN for quick testing in a [Plunker](https://plnkr.co/), [Codepen](https://codepen.io), or any other online code editor! + +It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Framework from a CDN. To get the latest version, add the following inside the `` element in an HTML file, or where external assets are included in the online code editor: + +```html + + + +``` + + The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets). + + +## Using Components +To use Ionic Components, you can browse our [UI Components Library](../docs/components) and copy the `JavaScript` sample code. This code can then be modified for your purposes. \ No newline at end of file diff --git a/sidebars.js b/sidebars.js index 115eca21382..5a7afda74a2 100644 --- a/sidebars.js +++ b/sidebars.js @@ -177,6 +177,14 @@ module.exports = { 'vue/performance', ], }, + { + type: 'category', + label: 'Standalone JavaScript', + collapsed: false, + items: [ + 'standalone-javascript/overview', + ], + }, { type: 'category', label: 'Utilities', From addf24c1537be2cdf8d5b06e4b9124d7a172ccad Mon Sep 17 00:00:00 2001 From: "kendra.jade" Date: Fri, 6 Jun 2025 15:17:56 -0500 Subject: [PATCH 02/10] Fixed link to components library --- docs/standalone-javascript/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/standalone-javascript/overview.md b/docs/standalone-javascript/overview.md index ea334948c7b..49b37cb2b16 100644 --- a/docs/standalone-javascript/overview.md +++ b/docs/standalone-javascript/overview.md @@ -32,4 +32,4 @@ It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Fram ## Using Components -To use Ionic Components, you can browse our [UI Components Library](../docs/components) and copy the `JavaScript` sample code. This code can then be modified for your purposes. \ No newline at end of file +To use Ionic Components, you can browse our [UI Components Library](../components) and copy the `JavaScript` sample code. This code can then be modified for your purposes. \ No newline at end of file From 8180de63367903fb83c4fd3df5a44acdd3c7e1d1 Mon Sep 17 00:00:00 2001 From: "kendra.jade" Date: Fri, 6 Jun 2025 15:20:16 -0500 Subject: [PATCH 03/10] Renamed 'Standalone JavaScript' to 'Vanilla JavaScript' --- .../{standalone-javascript => vanilla-javascript}/overview.md | 4 ++-- sidebars.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename docs/{standalone-javascript => vanilla-javascript}/overview.md (91%) diff --git a/docs/standalone-javascript/overview.md b/docs/vanilla-javascript/overview.md similarity index 91% rename from docs/standalone-javascript/overview.md rename to docs/vanilla-javascript/overview.md index 49b37cb2b16..491f19c9d73 100644 --- a/docs/standalone-javascript/overview.md +++ b/docs/vanilla-javascript/overview.md @@ -1,10 +1,10 @@ --- -title: 'Ionic Standalone Javascript Overview' +title: 'Ionic Vanilla Javascript Overview' sidebar_label: Overview --- - Ionic Standalone JavaScript Overview | Standalone Javascript Documentation + Ionic Vanilla JavaScript Overview | Vanilla Javascript Documentation Date: Thu, 26 Jun 2025 15:37:54 -0500 Subject: [PATCH 04/10] ADDITION: Turned the + + +``` + +After adding the scripts, your file should look like this: + +```html + + + + + + Document + + + + + + + + + + +``` + +> **Note:** These scripts load Ionic Core in a way that works with most modern browsers. The `type="module"` version is used for browsers that support JavaScript modules, while the `nomodule` fallback ensures compatibility with older browsers. + + +## Downloading App Specific Resources + +In addition to the Ionic Core scripts, your app will use two custom files: a JavaScript file for functionality and a CSS file for styling. + +### 1. Download the files + +Download each of the following files and save them in the same folder as your `index.html` file: + +- [View `demo.js`](https://raw.githubusercontent.com/kkindrai/Ionic--VanillaJS-Getting-Started-Application/main/demo.js) +- [View `styles.css`](https://raw.githubusercontent.com/kkindrai/Ionic--VanillaJS-Getting-Started-Application/main/styles.css) + +> **Note:** Make sure both files are saved directly inside your project folder (next to `index.html`), not in a subfolder. + +#### `demo.js` (click to expand) + +
+View file contents + +```js +// demo.js +// Code Sample Modified from Mozilla +// https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos + +// Global Variables +const gallery = []; // Array to store captured images +const size = 320; // Viewport Size +let streaming = false; +let canvas = null; +let photoRow = null; +let startButton = null; +let video = null; + + +/** + * Clears the canvas by filling it with a gray color. + * This is used to reset the canvas before capturing a new image. + */ +function clearPhoto() { + const context = canvas.getContext("2d"); + context.fillStyle = "#AAA"; + context.fillRect(0, 0, canvas.width, canvas.height); +} + +/** + * Renders the gallery of captured images. + * It creates a grid layout using ion-col elements for each image. + */ +function renderGallery() { + photoRow.innerHTML = ""; + gallery.forEach((imgUrl) => { + const ionCol = document.createElement("ion-col"); + ionCol.setAttribute("size", "4"); + + const ionImg = document.createElement("ion-img"); + ionImg.setAttribute("src", imgUrl); + ionImg.style.width = "100%"; + ionImg.style.height = "auto"; + ionImg.style.margin = "4px"; + + ionCol.appendChild(ionImg); + photoRow.appendChild(ionCol); + }); +} + + +/** + * Captures a picture from the video stream and adds it to the gallery. + * The picture is centered and cropped to a square based on the video aspect ratio. + */ +function takePicture() { + const context = canvas.getContext("2d"); + if (size) { + canvas.width = size; + canvas.height = size; + + // Center-crop the video to a square + const videoAspect = video.videoWidth / video.videoHeight; + let sx, sy, sWidth, sHeight; + + if (videoAspect > 1) { + // Video is wider than tall + sHeight = video.videoHeight; + sWidth = sHeight; + sx = (video.videoWidth - sWidth) / 2; + sy = 0; + } else { + // Video is taller than wide or square + sWidth = video.videoWidth; + sHeight = sWidth; + sx = 0; + sy = (video.videoHeight - sHeight) / 2; + } + + // Draw the video frame onto the canvas + context.drawImage( + video, + sx, sy, sWidth, sHeight, // source rectangle + 0, 0, size, size // destination rectangle + ); + + // Convert the canvas to a data URL and add it to the gallery + const data = canvas.toDataURL("image/png"); + gallery.push(data); + renderGallery(); + } else { + clearPhoto(); + } +} + +/** + * Initializes the app by setting up the video stream and event listeners. + */ +function startup() { + // Get references to the HTML elements + video = document.getElementById("video"); + canvas = document.getElementById("canvas"); + startButton = document.getElementById("start-button"); + photoRow = document.getElementById("photo-row"); + + // Check if the browser supports the MediaDevices API + navigator.mediaDevices + .getUserMedia({ video: true, audio: false }) + .then((stream) => { + video.srcObject = stream; + video.play(); + }) + .catch((err) => { + console.error(`An error occurred: ${err}`); + }); + + // Set up event listeners for the video element + video.addEventListener( + "canplay", + () => { + if (!streaming) { + video.setAttribute("width", size); + video.setAttribute("height", size); + canvas.setAttribute("width", size); + canvas.setAttribute("height", size); + streaming = true; + } + }, + false, + ); + + // Set up the start button to capture a picture + startButton.addEventListener( + "click", + (ev) => { + takePicture(); + ev.preventDefault(); + }, + false, + ); + clearPhoto(); +} + +// Initialize the app when the window loads +window.addEventListener("load", startup, false); +``` + +
+ +#### `styles.css` (click to expand) + +
+View file contents + +```css +ion-content { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + min-height: calc(100vh - 23vh); /* Ensure full window height minus nav bar */ +} + +ion-grid { + height: 100%; +} + +ion-row { + min-height: 100%; + height: 100%; +} + +ion-col { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +ion-grid.gallery-scroll ion-col { + height: fit-content; +} + +.gallery-scroll { + overflow-y: auto; + height: 100%; +} + +.video-container { + width: 75%; + aspect-ratio: 1 / 1; + height: auto; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; +} + +#video { + width: 100%; + height: auto; + aspect-ratio: 1 / 1; + object-fit: cover; + background: #000; + display: block; + border-radius: 8px; +} + +.fab-inside-video { + margin-top: 75%; + z-index: 2; +} + +.hidden { + display: none; +} +``` + +
+ +### 2. Add local imports to your HTML file + +Once the files are downloaded, import them into your project. Add the following lines directly below the Ionic import scripts inside your ``: + +```html + + + +``` + +Your updated `` section should now look like this: + +```html + + + + Document + + + + + + + + + + +``` + +### 3. Add the hidden canvas + +At the very end of your `` section, just before the closing `` tag, add a hidden canvas element. This will be used later by the camera component: + +```html + + +``` + +This canvas will remain invisible to users but will help process image data behind the scenes. + + +**This is what your `index.html` file should look like at the end of this step:** +```html + + + + + + Document + + + + + + + + + + + -## Downloading App Specfic Resources + + + + + +``` -BUENO, aquí les dejaremos los archivos demo.js y styles.css. -Luego, le mandaremos a import estos archivos en sus index.html -En fin, les digan a poner el elemento de `` por bajo del `` From 82c51d8eeeb56e21ed63b0b429d1ca9454d9db2e Mon Sep 17 00:00:00 2001 From: "kendra.jade" Date: Fri, 27 Jun 2025 15:16:31 -0500 Subject: [PATCH 10/10] docs(vanilla-javascript): add using-ionic-components page --- docs/vanilla-javascript/your-first-app.md | 7 +- .../2-using-ionic-components.md | 359 +++++++++++++++++- 2 files changed, 357 insertions(+), 9 deletions(-) diff --git a/docs/vanilla-javascript/your-first-app.md b/docs/vanilla-javascript/your-first-app.md index 31968d49f88..6bd1a4bcd41 100644 --- a/docs/vanilla-javascript/your-first-app.md +++ b/docs/vanilla-javascript/your-first-app.md @@ -136,8 +136,7 @@ Download each of the following files and save them in the same folder as your `i
View file contents -```js -// demo.js +```js title="demo.js" // Code Sample Modified from Mozilla // https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos @@ -286,7 +285,7 @@ window.addEventListener("load", startup, false);
View file contents -```css +```css title="styles.css" ion-content { display: flex; justify-content: center; @@ -394,7 +393,7 @@ This canvas will remain invisible to users but will help process image data behi **This is what your `index.html` file should look like at the end of this step:** -```html +```html title="index.html" diff --git a/docs/vanilla-javascript/your-first-app/2-using-ionic-components.md b/docs/vanilla-javascript/your-first-app/2-using-ionic-components.md index d35c6b9efcf..689522d8287 100644 --- a/docs/vanilla-javascript/your-first-app/2-using-ionic-components.md +++ b/docs/vanilla-javascript/your-first-app/2-using-ionic-components.md @@ -4,14 +4,363 @@ sidebar_label: Using Iconic Components # Using Ionic Components in Vanilla JavaScript -## Ionic Tabs -añadir los ionic tabs y luego modificarlos para nuestro intento +## Add Ionic Tabs + +Ionic’s `ion-tabs` component lets you build tabbed navigation similar to what you’d find in a mobile music or podcast app. In this section, we’ll add a basic tab layout to your project using just HTML. + +We’ll be using the **Basic Usage** example from the [Tabs component documentation](../../api/tabs), and modifying it slightly to work in our Vanilla JavaScript project. + +--- + +### 1. Insert Tabs Markup + +Copy the following HTML and paste it inside the `` element of your `index.html` file. This creates four tabs: **Listen Now**, **Radio**, **Library**, and **Search**. + +:::note +You only need the HTML portion — you can ignore the `.ts` example shown in the documentation. +::: + +```html + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + + +
+ + + Radio + + + +
Radio content
+ +
+ + + +
+ + + Library + + + +
Library content
+ +
+ + + +
+ + + Search + + + +
Search content
+ +
+ + + + + + Listen Now + + + + + Radio + + + + + Library + + + + + Search + + + +``` + +Our application should now appear something like this: + +![Screenshot of the application at this point in development](https://i.imgur.com/Cf0AcXu.png) + +--- + +### 2. Modify the Radio Elements + +Next, we’ll replace the **Radio** tab with a **Gallery** tab to better suit our photo app. + +Update your HTML by replacing the existing Radio tab markup with this: + +```html + + +
+ + + Gallery + + + +
Gallery content
+ +
+ +``` + +Then, update the corresponding tab button inside the tab bar to: +```html + + + + Gallery + +``` + +Your application should now display **Gallery** in place of **Radio**. +![Screenshot of the application at this point in development](https://i.imgur.com/OGC3nbn.png) ## Page Layouts -via `ion-grid`, `ion-row`, and `ion-col`. aquí vamos a decir que hacen todo el layout primero, pues no tenemos que preocupar mas adelante. + +To build responsive layouts in Ionic, we’ll use the [`ion-grid`](/docs/api/grid), [`ion-row`](/docs/api/row), and [`ion-col`](/docs/api/col) components. These help us structure the content of our app so it displays well across all screen sizes. + +We’ll now update the Gallery tab to include these layout elements. We'll build the structure step by step. + +--- + +### 1. Add `ion-grid` + +The `ion-grid` acts as the main container for rows and columns. It uses a flex-based layout system and supports responsive breakpoints. + +Update your Gallery tab to include a grid inside the ``: + +```html + + + ... + + +``` + +### 2. Add `ion-row` +Inside the grid, we use an `ion-row` to organize horizontal sections. This acts like a flex row and wraps ion-col elements. + +Add a single row within your grid: +```html + + + ... + + +``` + +### 3. Add `ion-col` for Layout Sections +Within each row, use `ion-col` to define individual columns. Columns are responsive by default and will automatically stack on smaller screens. + +For our layout, we’ll use two columns: + +**Camera Column** +```html + + + ... + +``` + +**Gallery Column** +```html + + + ... + +``` + +#### Full Layout Example +Once you’ve added all the elements, your `Gallery` tab should now look like this: +```html + +
+ + + Gallery + + + + + + + + ... + + + + + ... + + + + +
+ +``` + +#### Lets Get Visual +To help understand this concept, below is an image with each of these elements added, with CSS borders around each element: +- Purple: `ion-grid` +- Red: `ion-row` +- Blue: `ion-col` +![Demonstration of Element Borders](https://i.imgur.com/bqOsPpd.png) ## Smile! Adding a Camera -smoile + +Let’s start setting up the **Camera Column** of our app. This is where we’ll display a live video preview from your device’s camera and eventually capture photos. + +### 1. Create a Camera Frame + +We’ll begin by creating a wrapper `
` that will hold our camera feed. Inside that wrapper, we’ll add a `