├── .DS_Store ├── README.md ├── docs ├── Timer.html ├── csdoc.css ├── global │ ├── Object.html │ └── index.html ├── index.html └── methods.html ├── example.framer ├── .gitignore ├── app.coffee ├── framer │ ├── .bookmark │ ├── coffee-script.js │ ├── config.json │ ├── design.vekter │ ├── framer.generated.js │ ├── framer.init.js │ ├── framer.js │ ├── framer.js.map │ ├── framer.modules.js │ ├── framer.vekter.js │ ├── images │ │ ├── cursor-active.png │ │ ├── cursor-active@2x.png │ │ ├── cursor.png │ │ ├── cursor@2x.png │ │ ├── icon-120.png │ │ ├── icon-152.png │ │ ├── icon-180.png │ │ ├── icon-192.png │ │ └── icon-76.png │ ├── manifest (SRUIZ-2.local's conflicted copy 2017-12-19).txt │ ├── manifest (SRUIZ.local's conflicted copy 2017-12-18).txt │ ├── preview (SRUIZ-2.local's conflicted copy 2017-12-19).png │ ├── preview (SRUIZ.local's conflicted copy 2017-12-19).png │ ├── preview (Stephens-iMac.local's conflicted copy 2017-12-18).png │ ├── style.css │ └── version ├── images │ ├── .gitkeep │ ├── statusbar_left.png │ └── statusbar_right.png ├── index.html └── modules │ ├── Icon.coffee │ └── moreutils.coffee ├── example_inProgress.framer ├── .gitignore ├── .idea │ ├── cs-ui-dev.framer.iml │ ├── modules.xml │ ├── watcherTasks.xml │ └── workspace.xml ├── app.coffee ├── framer │ ├── .bookmark │ ├── coffee-script.js │ ├── config.json │ ├── design.vekter │ ├── framer.generated.js │ ├── framer.init.js │ ├── framer.js │ ├── framer.js.map │ ├── framer.modules.js │ ├── framer.vekter.js │ ├── images │ │ ├── cursor-active.png │ │ ├── cursor-active@2x.png │ │ ├── cursor.png │ │ ├── cursor@2x.png │ │ ├── icon-120.png │ │ ├── icon-152.png │ │ ├── icon-180.png │ │ ├── icon-192.png │ │ └── icon-76.png │ ├── manifest (SRUIZ-2.local's conflicted copy 2017-12-19).txt │ ├── manifest (SRUIZ.local's conflicted copy 2017-12-18).txt │ ├── manifest (Stephen Ruiz's conflicted copy 2018-01-18).txt │ ├── preview (SRUIZ-2.local's conflicted copy 2017-12-19).png │ ├── preview (SRUIZ.local's conflicted copy 2017-12-19).png │ ├── preview (Stephens-iMac.local's conflicted copy 2017-12-18).png │ ├── style.css │ └── version ├── images │ └── .gitkeep ├── index.html └── modules │ ├── components │ ├── Button.coffee │ ├── CarouselComponent.coffee │ ├── Checkbox.coffee │ ├── Colors.coffee │ ├── DocComponent.coffee │ ├── Footer.coffee │ ├── Header.coffee │ ├── Icon.coffee │ ├── Link.coffee │ ├── PageTransitionComponent.coffee │ ├── Radiobox.coffee │ ├── Segment.coffee │ ├── Select.coffee │ ├── Separator.coffee │ ├── SortableComponent.coffee │ ├── Stepper.coffee │ ├── Template.coffee │ ├── TextInput.coffee │ ├── Theme.coffee │ ├── Toggle.coffee │ ├── Tooltip.coffee │ ├── Typography.coffee │ └── View.coffee │ ├── framework.coffee │ ├── moreutils.coffee │ ├── myTheme-components │ ├── Circle.coffee │ └── fonts │ │ └── MuktaMahee-Regular.ttf │ └── myTheme.coffee ├── icon_small.png ├── img ├── constrain_bottom.gif ├── constrain_height.gif ├── constrain_height_aspectratio.gif ├── constrain_height_aspectratio_t.gif ├── constrain_left.gif ├── constrain_left_aspectratio.gif ├── constrain_right.gif ├── constrain_top.gif ├── constrain_width.gif └── constrain_width_top.gif ├── module.json └── moreutils.coffee /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # framer-moreutils 2 | 3 | Super handy helper functions for your Framer projects. 4 | 5 | **[Pin](#Utils.pin(layer,-[targetLayer,-directions,-distance]))** Fix a layer's position relative to another layer 6 | 7 | **[Unpin](#Utils.unpin(layer,-[targetLayer,-direction]))**: Remove a layer's pin relationship 8 | 9 | **PinOrigin**: Set a layer's relative position to another layer, based on its originX and originY properties. 10 | 11 | **[Constrain](#Utils.constrain(layer,-constraints...))**: Set a layer's constraints, relative to its parent 12 | 13 | **Align**: Set all layers in an array to the same property value 14 | 15 | **Distribute**: Evenly distribute properties to layers in an array 16 | 17 | **Fit**: Set a layer's property to the max property among a group of layers 18 | 19 | **Contain**: Set a layer's spatial properties to contain its children. 20 | 21 | **Grid**: Set layers into a grid of rows and columns 22 | 23 | **MakeGrid**: Create a grid of copies from a layer 24 | 25 | **ChainAnimations**: Set an array of Animations to each start when the previous ends 26 | 27 | **PointInPolygon**: Check whether a point is within any straight-sided polygon 28 | 29 | **LayerAtPoint**: Get the top-most layer at a given point 30 | 31 | **LayersAtPoint**: Get all layers at a given point 32 | 33 | **GetLayerFromElement**: Get which (if any) Layer owns a given element 34 | 35 | **Bind**: Bind a function to a target 36 | 37 | **Define**: Create a new layer property that emits an event when it changes 38 | 39 | **DefineValid**: Create a new layer property with validation 40 | 41 | **SetAttributes**: Set the attributes of an DOM element 42 | 43 | **toMarkdown**: Set styles in a TextLayer, using (limited) Markdown syntax 44 | 45 | **CORSproxy**: Convert a URL into one that won't throw a cross-origin error 46 | 47 | **copyTextToClipboard**: Copy a string into the user's clipboard 48 | 49 | **timer**: Create a timer instance with a simple start/pause/resume/reset/restart methods 50 | 51 | **linkProperties**: When the specified property on one layer' changes, the second Layer will match it 52 | 53 | **px**: Get the correct pixel string for the given context scale 54 | 55 | **getOrdinal**: Will return the correct ordinal ('st', 'nd', 'rd', 'th) for a number 56 | 57 | **fetch**: Make an asynchronous call to a URL and return a Response 58 | 59 | **fetchJSON**: Make an asynchronous call to a URL and return data as a JSON object 60 | 61 | **randomText**: Get lorem text at the specified length, optionally in sentences 62 | 63 | 64 | # Installation 65 | 66 | ## Manual Install 67 | 1. Download this repository 68 | 2. With your project open in Framer, drag the 'moreutils.coffee' file the code editor 69 | 70 | ## Install via Framer Modules. 71 | 72 | [![Install with Framer Modules](https://www.framermodules.com/assets/badge.png)](https://open.framermodules.com/moreutils>) 73 | 74 | # Usage 75 | 76 | Framer uses an object called `Utils` to store common utility functions, such as `Utils.delay`. When this module is installed, it adds several new methods to this `Utils` object, such as `Utils.align`. 77 | 78 | Once the module has been installed, you can use these methods in your code the same way you would a standard Utils method. For example, `Utils.align(myLayers, 'x', '100')`. 79 | 80 | Each method is documented in the section below. 81 | 82 | # Methods 83 | 84 | In the documentation below, arguments between brackets are optional. For example, **Utils.chainAnimations** takes two arguments: an array of layers and a boolean (true or false) for whether or not the chain should loop. The second argument is set to `true` by default, so your calls to only have to provide this element when you want to the chain *not* to loop — or if you're feeling verbose. Either way, because the method will work without the second argument, we document it as **Utils.chainAnimations(layers, [animate])**, with brackets to show that the animate argument is optional. 85 | 86 | ## Utils.pin(layerA, layerB, directions...) 87 | 88 | Fixes **layerA**'s position relative to **layerB**. If layerB ever moves or changes, layerA will move with it in order to preserve this position. For the **directions** argument, you may use one or more directions: `'left'`, `'right'`, `'top'` or `'bottom'`). 89 | 90 | If multiple pins conflict, such as a pin to the `'top', 'bottom'`, only the last pin will get used. This method accepts up to two **directions** arguments. 91 | 92 | ```coffeescript 93 | Utils.pin(layerA, layerB, 'left') 94 | Utils.pin(layerA, layerB, 'left', 'top') 95 | ``` 96 | ## Utils.unpin(layerA, [layerB, direction]) 97 | 98 | Removes **layerA**'s pin relationships. If the optional argument with **layerB** is provided, only those relationships with **layerB** will be removed; likewise, if **layerA** has multiple pins to **layerB**, the **directions** argument can be used to remove specific pins. 99 | 100 | ```coffeescript 101 | Utils.pin(layerA, layerB, 'left', 'top') 102 | Utils.pin(layerA, layerC, 'left') 103 | 104 | Utils.unpin(layerA) 105 | # removes all of layerA's pins, both to layerB and layerC 106 | 107 | Utils.unpin(layerA, layerB) 108 | # removes only layerA's pins to layerB 109 | # layerA is still pinned to layerC 110 | 111 | Utils.unpin(layerA, layerB, 'left') 112 | # removes only layerA's left pin to layerB 113 | # layerA is still pinned to layerB's top 114 | ``` 115 | ## Utils.constrain(layer, constraints...) 116 | 117 | Set a **layer**'s constraints, relative to its parent. This works the same as setting constraints in Design mode, where a **layer** may be constrained by one or more **constraints**. These are its parent's edges (`left`, `top`, `right`, `bottom`) or its parent's dimensions (`height`, `width`) and it may be set to preserve its `aspectRatio` as well. This method accepts as many **constraints** arguments as needed. 118 | 119 | When the parent layer changes its dimensions, the constrained layer may also transform, depending on the **constraints** set. Need a visual? Check out [this interactive example](https://framer.cloud/hCMbD). 120 | 121 | ```coffeescript 122 | Utils.constrain(layerA, 'height') 123 | Utils.constrain(layerA, 'height', 'left', 'aspectRatio') 124 | ``` 125 | 126 | #### Utils.pinOrigin(layerA, layerB, [undo]) 127 | 128 | #### Utils.align([layers], property, target, animate) 129 | 130 | #### Utils.distribute(layers, property, start, end, animate) 131 | 132 | #### Utils.grid(layers, [cols, rowMargin, colMargin]) 133 | 134 | #### Utils.makeGrid(layer, cols, [rows, rowMargin, colMargin]) 135 | 136 | #### Utils.fit(layer, layers, property, [padding]) 137 | 138 | #### Utils.contain(layer, fit, paddingRight, paddingBottom) 139 | 140 | _Note: `Utils.contain` must be called after the children layer(s) size changes, any changes to children(s) sizes after calling `contain` won't be reflected._ 141 | 142 | #### Utils.chainAnimations(animations, [looping]) 143 | 144 | #### Utils.bind(target, function) 145 | 146 | #### Utils.pointInPolygon: (point, vertices) 147 | 148 | #### Utils.getLayerAtPoint: (point, vertices) 149 | 150 | #### Utils.getLayersAtPoint: (point, [layers]) 151 | 152 | #### Utils.getLayerFromElement: (element, [layers]) 153 | 154 | #### Utils.define: (layer, property, [value, callback]) 155 | 156 | #### Utils.defineValid: (layer, property, value, validation, error, [callback]) 157 | 158 | #### Utils.setAttributes: (element, properties) 159 | -------------------------------------------------------------------------------- /docs/Timer.html: -------------------------------------------------------------------------------- 1 | Class Timer | CSDoc
default
global

    Timer

    Namespace
    Inheritance
    Timer → Object
    Source
    moreutils.coffee, line 718

    This class has no description.

    Constructor

    • Timer

      Timer (time, f) : Timer

      This method has no description.

    Public Methods

    • Timer

      pause : void

      This method has no description.

    • Timer

      reset : void

      This method has no description.

    • Timer

      restart : void

      This method has no description.

    • Timer

      resume : void

      This method has no description.

    • Timer

      start (time, f) : void

      This method has no description.

    -------------------------------------------------------------------------------- /docs/csdoc.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | background-color: #eee; 5 | } 6 | #wrap { 7 | min-height: 100%; 8 | height: auto; 9 | margin: 0 auto -60px; 10 | padding: 0 0 60px; 11 | } 12 | #footer { 13 | height: 60px; 14 | background-color: #f5f5f5; 15 | } 16 | #wrap > .container { 17 | padding: 50px 15px 0; 18 | } 19 | .container .credit { 20 | margin: 20px 0; 21 | } 22 | #footer > .container { 23 | padding-left: 15px; 24 | padding-right: 15px; 25 | } 26 | code { 27 | font-size: 80%; 28 | } 29 | .well { 30 | background: transparent; 31 | border: none; 32 | border-radius: 0; 33 | border-top: 1px solid #eee; 34 | box-shadow: none; 35 | padding: 9px; 36 | margin: 0; 37 | } 38 | .navbar-form.navbar-right { 39 | margin: 8px 40px 8px 0; 40 | } 41 | dd > p { 42 | margin: 0; 43 | } 44 | .cs-main { 45 | background-color: #fff; 46 | padding: 0 30px; 47 | } 48 | .cs-main h3.cs-header { 49 | background-color: #eee; 50 | margin: 10px -30px 30px -30px; 51 | padding: 30px 0 10px; 52 | } 53 | .cs-main h4.cs-header { 54 | background-color: #f6f6f6; 55 | margin: 0; 56 | padding: 10px 9px; 57 | } 58 | .cs-main .cs-defined { 59 | margin: 10px 9px; 60 | } 61 | .cs-main pre { 62 | border: none; 63 | border-radius: 0; 64 | background-color: #fffaed; 65 | } 66 | .cs-main > .cs-class > .cs-methods > .cs-builtin.cs-inherited { 67 | display: none; 68 | } 69 | .cs-main > .cs-methods > .cs-methods > li.cs-builtin { 70 | display: none; 71 | } 72 | .cs-main dl.cs-arguments { 73 | margin-top: 0; 74 | } 75 | .cs-main dl.cs-arguments dt { 76 | text-align: left; 77 | } 78 | .cs-main .cs-arguments-title { 79 | font-weight: bold; 80 | margin: 15px 0 0 0; 81 | color: #ccc; 82 | } 83 | .cs-nav { 84 | padding-top: 15px; 85 | } 86 | .cs-nav h5 { 87 | padding: 15px 0 5px 10px; 88 | margin: 0; 89 | font-size: 12px; 90 | text-transform: uppercase; 91 | color: #aaa; 92 | } 93 | .cs-nav h5 > a { 94 | color: #aaa; 95 | } 96 | .cs-nav ul > li > a { 97 | padding: 5px 10px; 98 | } 99 | @media (max-width:767px) { 100 | .cs-main h3 { 101 | padding-left: 40px; 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /docs/global/Object.html: -------------------------------------------------------------------------------- 1 | Class Object | CSDoc
    default
    global

      Object

      Namespace
      global
      Inheritance
      Object
      Subclasses
      Timer

      This class has no description.

      Constructor

      • Object

        Object : Object

        Create instance of the class.

      -------------------------------------------------------------------------------- /docs/global/index.html: -------------------------------------------------------------------------------- 1 | Namespace global | CSDoc
      default
      global

        Namespace global

        Classes

        • built-in

          Object

          This class has no description.

        -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Namespace | CSDoc
        default
        global

          Namespace default

          Classes

          • moreutils.coffee, line 718

            Timer

            This class has no description.

          -------------------------------------------------------------------------------- /docs/methods.html: -------------------------------------------------------------------------------- 1 | Methods | CSDoc

          Methods

          moreutils.coffee

          • Utils.pin (layer:Layer, target:Layer, directions1...directionsN:...String) : void

            Pin a layer to another layer. When the second layer moves, the first one will too.

            2 | 3 | 
            Utils.pin(layerA, layerB, 'left')
 4 |

            Arguments

            layer

            The layer to pin.

            target

            The layer to pin to.

            directions

            Which sides of the layer to pin to.

          • Utils.unpin (layer:Layer, [target:Layer], direction, [directions:...String]) : void

            Remove all of a layer's pins, or pins from a certain target layer and/or direction.

            5 | 6 | 
            Utils.unpin(layerA)
 7 |

            Arguments

            layer

            The layer to unpin.

            target optional

            The layer to unpin from.

            directions optional

            The directions to unpin.

          • Utils.pinOrigin (layer:Layer, [target:Layer], [undo:Boolean]) : void

            Pin layer to another layer, based on the first layer's origin.

            8 | 9 | 
            Utils.pinOrigin(layerA, layerB)
10 |

            Arguments

            layer

            The layer to pin.

            target optional

            The layer to pin to.

            undo optional

            Remove, rather than create, this pin.

          • Utils.pinOriginX (layer:Layer, [target:Layer], [undo:Boolean]) : void

            Pin layer to another layer, based on the first layer's originX.

            11 | 12 | 
            Utils.pinOriginX(layerA, layerB)
13 |

            Arguments

            layer

            The layer to pin.

            target optional

            The layer to pin to.

            undo optional

            Remove, rather than create, this pin.

          • Utils.pinOriginY (layer:Layer, [target:Layer], [undo:Boolean]) : void

            Pin layer to another layer, based on the first layer's originY.

            14 | 15 | 
            Utils.pinOriginY(layerA, layerB)
16 |

            Arguments

            layer

            The layer to pin.

            target optional

            The layer to pin to.

            undo optional

            Remove, rather than create, this pin.

          • Utils.constrain (layer:Layer, options1...optionsN:...String) : void

            Set a layer's contraints to its parent

            17 | 18 |

            Valid options are: 'left', 'top', 'right', 'bottom', 'height', 'width', and 'aspectRatio'.

            19 | 20 | 
            Utils.constrain(layer, 'left', 'top', 'apectRatio')
21 |

            Arguments

            layer

            The layer to constrain.

            options

            The constraint options to use.

          • Utils.bind (object:Object, callback:Function) : void

            Immediately execute a function that is bound to the target.

            22 | 23 | 
            Utils.bind(myLayer, -> this.name = "My Layer")
24 |

            Arguments

            object

            The object to bind the callback to.

            callback

            The callback to run.

          • Utils.build (object, callback) : void

            Alias for Utils.bind.

          • Utils.define (layer:Layer, property:String, [value:Object], [callback:Function], [validation:Function], [error:String]) : void

            Define a property on a Layer that will emit a change event when that property changes. Also, optionally give the property an initial value and a callback to run when the property changes.

            25 | 26 | 
            Utils.define(myLayer, "toggled")
27 | Utils.define(myLayer, "toggled", false)
28 | Utils.define(myLayer, "toggled", false, myLayer.showToggled)
29 | Utils.define(myLayer, "toggled", false, null, _.isBoolean, "Layer.toggled must be true or false.")
30 |

            Arguments

            layer

            The layer on which to define the property.

            property

            The name of the property.

            value optional

            The initial value of the property.

            callback optional

            The callback to run when this property changes. Executed with two arguments: the property's new value and the Layer itself.

            validation optional

            A function to validate the property's new value.

            error optional

            An error to throw if the validation function returned false.

          • Utils.align (layers:Array, direction, [animate:Boolean], [animationOptions:Object], options:Object) : void

            Set all layers in an array to the same property or properties.

            31 | 32 | 
            Utils.align [layerA, layerB],
33 |     x: 200
34 | 
35 | Utils.align [layerA, layerB],
36 |     x: 200
37 |     true
38 |     time: .5
39 |

            Arguments

            layers

            The array of layers to align.

            animate optional

            Whether to animate to the new property.

            animationOptions optional

            The animation options to use.

            options

            The properties to set.

          • Utils.distribute (layers:Array, property:String, [start:Object], [end:Object], [animate:Boolean], [animationOptions:Object]) : void

            Distribute an array of layers between two values.

            40 | 41 | 
            Utils.align [layerA, layerB], 'x'
42 | 
43 | Utils.align [layerA, layerB], 'x', 32, 200
44 | 
45 | Utils.align [layerA, layerB], 'x', 32, 200, true, {time: .5}
46 |
            47 | 48 |

            Also works with 'horizontal' and 'vertical', (alias to 'midX' and 'midY').

            49 | 50 | 
            Utils.align [layerA, layerB], 'horizontal'
51 |

            Arguments

            layers

            The array of layers to distribute.

            property

            The property to distribute.

            start optional

            The value to start from. By default, the lowest value of the given property among the layers array.

            end optional

            The value to distribute to. By default, the highest value of the given property among the layers array.

            animate optional

            Whether to animate to the new property.

            animationOptions optional

            The animation options to use.

          • Utils.offsetY (layers:Array, distance:Number, [animate:Boolean], [animationOptions:Object]) : void

            Offset an array of layers vertically.

            52 | 53 | 
            Utils.align [layerA, layerB],
54 |     x: 200
55 | 
56 | Utils.align [layerA, layerB],
57 |     x: 200
58 |     true
59 |     time: .5
60 |

            Arguments

            layers

            The array of layers to offset.

            distance

            The distance between each layer.

            animate optional

            Whether to animate layers to the new position.

            animationOptions optional

            The animation options to use.

          • Utils.offsetX (layers, distance:Number, [animate:Boolean], [animationOptions:Object], array:Array) : void

            Offset an array of layers horizontally.

            61 | 62 | 
            Utils.align [layerA, layerB],
63 |     x: 200
64 | 
65 | Utils.align [layerA, layerB],
66 |     x: 200
67 |     true
68 |     time: .5
69 |

            Arguments

            distance

            The distance between each layer.

            animate optional

            Whether to animate layers to the new position.

            animationOptions optional

            The animation options to use.

            array

            The array of layers to offset.

          • Utils.makeGrid (layer, cols, rows, rowMargin, colMargin) : void

            This method has no description.

          • Utils.fit (layer, array, props, padding) : void

            This method has no description.

          • Utils.contain (layer, padding, xPadding) : void

            This method has no description.

          • Utils.getStatusColor (dev, lowerBetter) : void

            This method has no description.

          • Utils.chainAnimations (animations1...animationsN) : void

            This method has no description.

          • Utils.pointInPolygon (point, vs) : void

            This method has no description.

          • Utils.pointInLayer (point, layer) : void

            This method has no description.

          • Utils.getLayerAtPoint (point, array) : void

            This method has no description.

          • Utils.getLayersAtPoint (point, array) : void

            This method has no description.

          • Utils.getLayerFromElement (element, array) : void

            This method has no description.

          • Utils.getOrdinal (number) : void

            This method has no description.

          • Utils.px (num) : void

            This method has no description.

          • Utils.linkProperties (layerA, layerB, props1...propsN) : void

            This method has no description.

          • Utils.copyTextToClipboard (text) : void

            This method has no description.

          • Utils.CORSproxy (url) : void

            This method has no description.

          • Utils.setAttributes (element, attributes) : void

            This method has no description.

          • Utils.toMarkdown (textLayer) : void

            This method has no description.

          • Utils.fetch (url, callback) : void

            This method has no description.

          • Utils.fetchJSON (url, callback) : void

            This method has no description.

          • Utils.randomText (words, sentences) : void

            This method has no description.

          -------------------------------------------------------------------------------- /example.framer/.gitignore: -------------------------------------------------------------------------------- 1 | # Framer Git Ignore 2 | 3 | # General OSX 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | # Thumbnails 13 | ._* 14 | 15 | # Files that might appear in the root of a volume 16 | .DocumentRevisions-V100 17 | .fseventsd 18 | .Spotlight-V100 19 | .TemporaryItems 20 | .Trashes 21 | .VolumeIcon.icns 22 | 23 | # Directories potentially created on remote AFP share 24 | .AppleDB 25 | .AppleDesktop 26 | Network Trash Folder 27 | Temporary Items 28 | .apdisk 29 | 30 | # Framer Specific 31 | .*.html 32 | .app.js 33 | framer/*.old* 34 | framer/.*.hash 35 | framer/backup.coffee 36 | framer/backups/* 37 | framer/manifest.txt 38 | framer/preview.png 39 | framer/social-*x*.png 40 | -------------------------------------------------------------------------------- /example.framer/framer/.bookmark: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/.bookmark -------------------------------------------------------------------------------- /example.framer/framer/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "orientation" : 0, 3 | "updateDelay" : 0.29999999999999999, 4 | "designModeSelected" : 0, 5 | "cachedDeviceHeight" : 667, 6 | "contentScale" : 1, 7 | "cachedDeviceWidth" : 375, 8 | "fullScreen" : false, 9 | "deviceType" : "apple-iphone-8-space-gray", 10 | "sharedPrototype" : 0, 11 | "propertyPanelToggleStates" : { 12 | 13 | }, 14 | "projectId" : "90F5112C-2205-4493-8741-4BB0F8E9E3FB", 15 | "deviceOrientation" : 0, 16 | "selectedHand" : "", 17 | "showBezel" : true, 18 | "foldedCodeRanges" : [ 19 | "{77, 105}", 20 | "{183, 2571}", 21 | "{2788, 769}", 22 | "{3558, 1874}", 23 | "{5433, 479}", 24 | "{5913, 266}", 25 | "{6420, 2025}", 26 | "{8446, 4409}", 27 | "{12856, 2967}", 28 | "{15824, 4331}", 29 | "{20156, 4564}", 30 | "{24721, 4870}", 31 | "{29592, 1202}", 32 | "{30795, 743}" 33 | ], 34 | "deviceScale" : "fit" 35 | } -------------------------------------------------------------------------------- /example.framer/framer/design.vekter: -------------------------------------------------------------------------------- 1 | { 2 | "root" : { 3 | "__class" : "CanvasNode", 4 | "children" : [ 5 | 6 | ], 7 | "id" : "QP~O_K3j", 8 | "parentid" : null 9 | }, 10 | "version" : 20 11 | } -------------------------------------------------------------------------------- /example.framer/framer/framer.generated.js: -------------------------------------------------------------------------------- 1 | // This is autogenerated by Framer 2 | 3 | 4 | if (!window.Framer && window._bridge) {window._bridge('runtime.error', {message:'[framer.js] Framer library missing or corrupt. Select File → Update Framer Library.'})} 5 | if (DeviceComponent) {DeviceComponent.Devices["iphone-6-silver"].deviceImageJP2 = false}; 6 | if (window.Framer) {window.Framer.Defaults.DeviceView = {"deviceScale":"fit","selectedHand":"","deviceType":"apple-iphone-8-space-gray","contentScale":1,"hideBezel":false,"orientation":0}; 7 | } 8 | if (window.Framer) {window.Framer.Defaults.DeviceComponent = {"deviceScale":"fit","selectedHand":"","deviceType":"apple-iphone-8-space-gray","contentScale":1,"hideBezel":false,"orientation":0}; 9 | } 10 | window.FramerStudioInfo = {"deviceImagesUrl":"\/_server\/resources\/DeviceImages","documentTitle":"example.framer"}; 11 | 12 | Framer.Device = new Framer.DeviceView(); 13 | Framer.Device.setupContext(); -------------------------------------------------------------------------------- /example.framer/framer/framer.init.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function isFileLoadingAllowed() { 4 | return (window.location.protocol.indexOf("file") == -1) 5 | } 6 | 7 | function isHomeScreened() { 8 | return ("standalone" in window.navigator) && window.navigator.standalone == true 9 | } 10 | 11 | function isCompatibleBrowser() { 12 | return Utils.isWebKit() 13 | } 14 | 15 | var alertNode; 16 | 17 | function dismissAlert() { 18 | alertNode.parentElement.removeChild(alertNode) 19 | loadProject() 20 | } 21 | 22 | function showAlert(html) { 23 | 24 | alertNode = document.createElement("div") 25 | 26 | alertNode.classList.add("framerAlertBackground") 27 | alertNode.innerHTML = html 28 | 29 | document.addEventListener("DOMContentLoaded", function(event) { 30 | document.body.appendChild(alertNode) 31 | }) 32 | 33 | window.dismissAlert = dismissAlert; 34 | } 35 | 36 | function showBrowserAlert() { 37 | var html = "" 38 | html += "
          " 39 | html += "Error: Not A WebKit Browser" 40 | html += "Your browser is not supported.
          Please use Safari or Chrome.
          " 41 | html += "Try anyway" 42 | html += "
          " 43 | 44 | showAlert(html) 45 | } 46 | 47 | function showFileLoadingAlert() { 48 | var html = "" 49 | html += "
          " 50 | html += "Error: Local File Restrictions" 51 | html += "Preview this prototype with Framer Mirror or learn more about " 52 | html += "file restrictions.
          " 53 | html += "Try anyway" 54 | html += "
          " 55 | 56 | showAlert(html) 57 | } 58 | 59 | function loadProject(callback) { 60 | CoffeeScript.load("app.coffee", callback) 61 | } 62 | 63 | function setDefaultPageTitle() { 64 | // If no title was set we set it to the project folder name so 65 | // you get a nice name on iOS if you bookmark to desktop. 66 | document.addEventListener("DOMContentLoaded", function() { 67 | if (document.title == "") { 68 | if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) { 69 | document.title = window.FramerStudioInfo.documentTitle 70 | } else { 71 | document.title = window.location.pathname.replace(/\//g, "") 72 | } 73 | } 74 | }) 75 | } 76 | 77 | function init() { 78 | 79 | if (Utils.isFramerStudio()) { 80 | return 81 | } 82 | 83 | setDefaultPageTitle() 84 | 85 | if (!isCompatibleBrowser()) { 86 | return showBrowserAlert() 87 | } 88 | 89 | if (!isFileLoadingAllowed()) { 90 | return showFileLoadingAlert() 91 | } 92 | 93 | loadProject(function(){ 94 | // CoffeeScript: Framer?.CurrentContext?.emit?("loaded:project") 95 | var context; 96 | if (typeof Framer !== "undefined" && Framer !== null) { 97 | if ((context = Framer.CurrentContext) != null) { 98 | if (typeof context.emit === "function") { 99 | context.emit("loaded:project"); 100 | } 101 | } 102 | } 103 | }) 104 | } 105 | 106 | init() 107 | 108 | })() 109 | -------------------------------------------------------------------------------- /example.framer/framer/framer.vekter.js: -------------------------------------------------------------------------------- 1 | (function(scope) {if (scope["__vekterVariables"]) { scope["__vekterVariables"].map(function(variable) { delete scope[variable] } ) };Object.assign(scope, {});scope["__vekterVariables"] = [""];if (typeof Framer.CurrentContext.layout === 'function') {Framer.CurrentContext.layout()};})(window); -------------------------------------------------------------------------------- /example.framer/framer/images/cursor-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/images/cursor-active.png -------------------------------------------------------------------------------- /example.framer/framer/images/cursor-active@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/images/cursor-active@2x.png -------------------------------------------------------------------------------- /example.framer/framer/images/cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/images/cursor.png -------------------------------------------------------------------------------- /example.framer/framer/images/cursor@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/images/cursor@2x.png -------------------------------------------------------------------------------- /example.framer/framer/images/icon-120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/images/icon-120.png -------------------------------------------------------------------------------- /example.framer/framer/images/icon-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/images/icon-152.png -------------------------------------------------------------------------------- /example.framer/framer/images/icon-180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/images/icon-180.png -------------------------------------------------------------------------------- /example.framer/framer/images/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/images/icon-192.png -------------------------------------------------------------------------------- /example.framer/framer/images/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/images/icon-76.png -------------------------------------------------------------------------------- /example.framer/framer/manifest (SRUIZ-2.local's conflicted copy 2017-12-19).txt: -------------------------------------------------------------------------------- 1 | app.coffee 2 | audiofiles/audiotrack1.m4a 3 | framer/coffee-script.js 4 | framer/config.json 5 | framer/framer.generated.js 6 | framer/framer.init.js 7 | framer/framer.js 8 | framer/framer.modules.js 9 | framer/framer.vekter.js 10 | framer/images/cursor-active.png 11 | framer/images/cursor-active@2x.png 12 | framer/images/cursor.png 13 | framer/images/cursor@2x.png 14 | framer/images/icon-120.png 15 | framer/images/icon-152.png 16 | framer/images/icon-180.png 17 | framer/images/icon-192.png 18 | framer/images/icon-76.png 19 | framer/manifest (SRUIZ.local's conflicted copy 2017-12-18).txt 20 | framer/manifest.txt 21 | framer/preview (Stephens-iMac.local's conflicted copy 2017-12-18).png 22 | framer/preview.png 23 | framer/style.css 24 | framer/version 25 | images/statusbar_left.png 26 | images/statusbar_right.png 27 | index.html 28 | modules/Icon.coffee 29 | modules/icons.json 30 | modules/myModule.coffee 31 | modules/SVGComponent.coffee -------------------------------------------------------------------------------- /example.framer/framer/manifest (SRUIZ.local's conflicted copy 2017-12-18).txt: -------------------------------------------------------------------------------- 1 | app.coffee 2 | index.html 3 | images/statusbar_left.png 4 | images/statusbar_right.png 5 | framer/preview.png 6 | framer/manifest.txt 7 | framer/images/cursor.png 8 | framer/images/cursor-active@2x.png 9 | framer/images/icon-120.png 10 | framer/images/cursor@2x.png 11 | framer/images/icon-192.png 12 | framer/images/icon-76.png 13 | framer/images/cursor-active.png 14 | framer/images/icon-152.png 15 | framer/images/icon-180.png 16 | framer/config.json 17 | framer/framer.vekter.js 18 | framer/framer.modules.js 19 | framer/version 20 | framer/style.css 21 | framer/framer.generated.js 22 | framer/coffee-script.js 23 | framer/preview (Stephens-iMac.local's conflicted copy 2017-12-18).png 24 | framer/framer.init.js 25 | framer/framer.js 26 | audiofiles/audiotrack1.m4a 27 | modules/SVGComponent.coffee 28 | modules/icons.json 29 | modules/myModule.coffee 30 | modules/Icon.coffee -------------------------------------------------------------------------------- /example.framer/framer/preview (SRUIZ-2.local's conflicted copy 2017-12-19).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/preview (SRUIZ-2.local's conflicted copy 2017-12-19).png -------------------------------------------------------------------------------- /example.framer/framer/preview (SRUIZ.local's conflicted copy 2017-12-19).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/preview (SRUIZ.local's conflicted copy 2017-12-19).png -------------------------------------------------------------------------------- /example.framer/framer/preview (Stephens-iMac.local's conflicted copy 2017-12-18).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/framer/preview (Stephens-iMac.local's conflicted copy 2017-12-18).png -------------------------------------------------------------------------------- /example.framer/framer/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | border: none; 5 | -webkit-user-select: none; 6 | -webkit-tap-highlight-color: rgba(0,0,0,0); 7 | } 8 | 9 | body { 10 | background-color: #fff; 11 | font: 28px/1em "Helvetica"; 12 | color: gray; 13 | overflow: hidden; 14 | } 15 | 16 | a { 17 | color: gray; 18 | } 19 | 20 | body { 21 | cursor: url('images/cursor.png') 32 32, auto; 22 | cursor: -webkit-image-set( 23 | url('images/cursor.png') 1x, 24 | url('images/cursor@2x.png') 2x 25 | ) 32 32, auto; 26 | } 27 | 28 | body:active { 29 | cursor: url('images/cursor-active.png') 32 32, auto; 30 | cursor: -webkit-image-set( 31 | url('images/cursor-active.png') 1x, 32 | url('images/cursor-active@2x.png') 2x 33 | ) 32 32, auto; 34 | } 35 | 36 | .framerAlertBackground { 37 | position: absolute; top:0px; left:0px; right:0px; bottom:0px; 38 | z-index: 1000; 39 | background-color: #fff; 40 | } 41 | 42 | .framerAlert { 43 | font:400 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; 44 | -webkit-font-smoothing:antialiased; 45 | color:#616367; text-align:center; 46 | position: absolute; top:40%; left:50%; width:260px; margin-left:-130px; 47 | } 48 | .framerAlert strong { font-weight:500; color:#000; margin-bottom:8px; display:block; } 49 | .framerAlert a { color:#28AFFA; } 50 | .framerAlert .btn { 51 | font-weight:500; text-decoration:none; line-height:1; 52 | display:inline-block; padding:6px 12px 7px 12px; 53 | border-radius:3px; margin-top:12px; 54 | background:#28AFFA; color:#fff; 55 | } 56 | 57 | ::-webkit-scrollbar { 58 | display: none; 59 | } -------------------------------------------------------------------------------- /example.framer/framer/version: -------------------------------------------------------------------------------- 1 | 12 -------------------------------------------------------------------------------- /example.framer/images/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/images/.gitkeep -------------------------------------------------------------------------------- /example.framer/images/statusbar_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/images/statusbar_left.png -------------------------------------------------------------------------------- /example.framer/images/statusbar_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/framer-moreutils/cf29f9189e645703f22f699ef9f1da4d65623e40/example.framer/images/statusbar_right.png -------------------------------------------------------------------------------- /example.framer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /example_inProgress.framer/.gitignore: -------------------------------------------------------------------------------- 1 | # Framer Git Ignore 2 | 3 | # General OSX 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | # Thumbnails 13 | ._* 14 | 15 | # Files that might appear in the root of a volume 16 | .DocumentRevisions-V100 17 | .fseventsd 18 | .Spotlight-V100 19 | .TemporaryItems 20 | .Trashes 21 | .VolumeIcon.icns 22 | 23 | # Directories potentially created on remote AFP share 24 | .AppleDB 25 | .AppleDesktop 26 | Network Trash Folder 27 | Temporary Items 28 | .apdisk 29 | 30 | # Framer Specific 31 | .*.html 32 | .app.js 33 | framer/*.old* 34 | framer/.*.hash 35 | framer/backup.coffee 36 | framer/backups/* 37 | framer/manifest.txt 38 | framer/preview.png 39 | framer/social-*x*.png 40 | -------------------------------------------------------------------------------- /example_inProgress.framer/.idea/cs-ui-dev.framer.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /example_inProgress.framer/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example_inProgress.framer/.idea/watcherTasks.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /example_inProgress.framer/.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 17 | print 18 | 19 | 20 | 21 | 27 | 28 | 29 | 30 | 31 | true 32 | DEFINITION_ORDER 33 | 34 | 35 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |