Jordan Dobson jordandobson

## _Stay_standalone.md

      
              5 files
            
          
              34 forks
            
          
              55 comments
            
          
              195 stars
            
          
                irae
                / _Stay_standalone.md
            
            
              Last active
              January 29, 2024 12:38
                — forked from kylebarrow/example.html
            
              
                Stay Standalone: Prevent links in standalone web apps opening Mobile Safari
              
          
    #Stay Standalone
A short script to prevent internal links to a "webapp" added to iPhone home screen to open in Safari instead of navigating internally.

  
## high-dpi-media.css
/* ---------------------------------------------------------- */
/*                                                            */
/* A media query that captures:                               */
/*                                                            */
/* - Retina iOS devices                                       */
/* - Retina Macs running Safari                               */
/* - High DPI Windows PCs running IE 8 and above              */
/* - Low DPI Windows PCs running IE, zoomed in                */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in  */
/* - Android hdpi devices and above                           */

## reactchildren.tsx
import * as React from "react";
import { Frame, addPropertyControls, ControlType } from "framer";

export function Component({ childComponent }) {
  return (
    <div style={{ width: "100%" }}>
      {React.Children.map(childComponent, (child, index) => {
        return React.cloneElement(child, {
          width: "100%",
          key: index,

## utils-modulate-framerx.tsx
// Framer X Utils.modulate equivalent

function modulate(value, rangeA, rangeB, limit = false) {
    const [fromLow, fromHigh] = rangeA;
    const [toLow, toHigh] = rangeB;
    const result = toLow + ((value - fromLow) / (fromHigh - fromLow)) * (toHigh - toLow);
    if (limit === true) {
        if (toLow < toHigh) {
            if (result < toLow) {
                return toLow;

## qc-framer.js
var QcValueConverter = {
  tensionFromQcValue: function(qcValue) {
    return (qcValue - 30.0) * 3.62 + 194.0;
  },

  qcValueFromTension: function(tension) {
    return (tension - 194.0) / 3.62 + 30.0;
  },

  frictionFromQcValue: function(qcValue) {

## useGyro.ts
import { useState, useEffect } from "react"

interface WorldOrientation {
    /** A number representing the motion of the device around the z axis, expressed in degrees with values ranging from 0 to 360. */
    alpha: number
    /** A number representing the motion of the device around the x axis, expressed in degrees with values ranging from -180 to 180. This represents a front to back motion of the device. */
    beta: number
    /** A number representing the motion of the device around the y axis, expressed in degrees with values ranging from -90 to 90. This represents a left to right motion of the device. */
    gamma: number
}

## Colors.tsx
import * as React from 'react'
import { Stack, Frame } from 'framer'
import { colors } from './canvas'

export function Colors() {
	const [colorsTokens] = React.useState(() => {
		return Object.keys(colors).map(key => colors[key])
	})

	return (

## stateAnimationOptions.coffee
myLayer.states.stateAnimationOptions =
	'a-b':
		time: 0.1
	'b-c':
		time: 0.8
	'c-d':
		time: 0.5

myLayer.states.add
	a: opacity: 1

## default.html
<html>
<body>

<h1 data-localize="{{page.id}}.title">{{page.title}}</h1>

<div data-localize="{{page.id}}.body">
  {{content}}
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

## Full Height & width background video or image
Set inline width & height.
Video, img alternative natural width & height: 1920 x 1080

21mb video O_O
http://codepen.io/MikeMcChillin/pen/wKGFz
	/* ---------------------------------------------------------- */
	/* */
	/* A media query that captures: */
	/* */
	/* - Retina iOS devices */
	/* - Retina Macs running Safari */
	/* - High DPI Windows PCs running IE 8 and above */
	/* - Low DPI Windows PCs running IE, zoomed in */
	/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
	/* - Android hdpi devices and above */
	import * as React from "react";
	import { Frame, addPropertyControls, ControlType } from "framer";

	export function Component({ childComponent }) {
	return (
	<div style={{ width: "100%" }}>
	{React.Children.map(childComponent, (child, index) => {
	return React.cloneElement(child, {
	width: "100%",
	key: index,
	// Framer X Utils.modulate equivalent

	function modulate(value, rangeA, rangeB, limit = false) {
	const [fromLow, fromHigh] = rangeA;
	const [toLow, toHigh] = rangeB;
	const result = toLow + ((value - fromLow) / (fromHigh - fromLow)) * (toHigh - toLow);
	if (limit === true) {
	if (toLow < toHigh) {
	if (result < toLow) {
	return toLow;
	var QcValueConverter = {
	tensionFromQcValue: function(qcValue) {
	return (qcValue - 30.0) * 3.62 + 194.0;
	},

	qcValueFromTension: function(tension) {
	return (tension - 194.0) / 3.62 + 30.0;
	},

	frictionFromQcValue: function(qcValue) {
	import { useState, useEffect } from "react"

	interface WorldOrientation {
	/** A number representing the motion of the device around the z axis, expressed in degrees with values ranging from 0 to 360. */
	alpha: number
	/** A number representing the motion of the device around the x axis, expressed in degrees with values ranging from -180 to 180. This represents a front to back motion of the device. */
	beta: number
	/** A number representing the motion of the device around the y axis, expressed in degrees with values ranging from -90 to 90. This represents a left to right motion of the device. */
	gamma: number
	}
	import * as React from 'react'
	import { Stack, Frame } from 'framer'
	import { colors } from './canvas'

	export function Colors() {
	const [colorsTokens] = React.useState(() => {
	return Object.keys(colors).map(key => colors[key])
	})

	return (
	myLayer.states.stateAnimationOptions =
	'a-b':
	time: 0.1
	'b-c':
	time: 0.8
	'c-d':
	time: 0.5

	myLayer.states.add
	a: opacity: 1
	<html>
	<body>

	<h1 data-localize="{{page.id}}.title">{{page.title}}</h1>

	<div data-localize="{{page.id}}.body">
	{{content}}
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
	Set inline width & height.
	Video, img alternative natural width & height: 1920 x 1080

	21mb video O_O
	http://codepen.io/MikeMcChillin/pen/wKGFz