# ------------------------------------------------------------------------------ # ~/_data/modules/framer.yml # User configuration settings for iFrameResizer # # Product/Info: # https://jekyll.one # # Copyright (C) 2021 Juergen Adams # # J1 Template is licensed under the MIT License. # See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE # ------------------------------------------------------------------------------ # ------------------------------------------------------------------------------ # About this configuration (used for J1 CC only) # about_config: title: Framer scope: Default settings location: _data/modules/defaults/framer.yml # ------------------------------------------------------------------------------ # iFrameResizer settings # # enabled # ---------------------------------------------------------------------------- # Enables|Disables the use of J1 Application Manager # # values: boolean (true|false) # default: false # # log # ---------------------------------------------------------------------------- # Setting the log option to true will make the scripts in both the host # page and the iFrame output everything they do to the JavaScript console # so you can see the communication between the two scripts. # # values: boolean (true|false) # default: false # # autoResize # ---------------------------------------------------------------------------- # When enabled changes to the Window size or the DOM will cause the iFrame # to resize to the new content size. Disable if using size method with custom # dimensions. # # values: boolean (true|false) # default: true # # bodyBackground # ---------------------------------------------------------------------------- # Overrides the body background style in the iFrame. # # values: string # default: null # # bodyMargin # ---------------------------------------------------------------------------- # Override the default body margin style in the iFrame. A string can be # any valid value for the CSS margin attribute, for example '8px 3em'. # A number value is converted into px. # # values: integer # default: 0 # # checkOrigin # ---------------------------------------------------------------------------- # When set to true, only allow incoming messages from the domain listed # in the src property of the iFrame tag. If your iFrame navigates between # different domains, ports or protocols; then you will need to provide an # array of URLs or disable this option. # # values: boolean (true|false) # default: true # # inPageLinks # ---------------------------------------------------------------------------- # When enabled in page linking inside the iFrame and from the iFrame to # the parent page will be enabled. # # values: boolean (true|false) # default: false # # interval # ---------------------------------------------------------------------------- # Browsers that doesn't support mutationObserver, such as IE10, the # library falls back to use setInterval, to check for changes of the page # size. The default value is set to 2 frame refreshes at 60Hz, setting # this to a higher value will make screen redraws noticeable to the user. # # Setting this property to a negative number will force the interval check # to run instead of mutationObserver. # Set to zero to disable. # # values: integer (msec) # default: 32 # # heightCalculationMethod # ---------------------------------------------------------------------------- # By default the height of the iFrame is calculated by converting the margin # of the body to px and then adding the top and bottom figures to the # offsetHeight of the body tag. # # In cases where CSS styles causes the content to flow outside the body you # may need to change this setting to one of the following options. Each can # give different values depending on how CSS is used in the page and each # has varying side-effects. You will need to experiment to see which is # best for any particular circumstance. # # bodyScroll: uses document.body.scrollHeight # documentElementOffset: uses document.documentElement.offsetHeight # documentElementScroll: uses document.documentElement.scrollHeight # max: takes the largest value of the main four options # min: takes the smallest value of the main four options # grow: same as max but disables the double resize that # is used to workout if the iFrame needs to shrink. # This provides much better performance if your # iFrame will only ever increase in size # lowestElement: Loops though every element in the the DOM and # finds the lowest bottom point # taggedElement: Finds the bottom of the lowest element with a # data-iframe-height attribute # Note: # If the default option doesn't work then the best solutions is to # either to use taggedElement, or to use lowestElement in modern browsers # and max in IE10 downwards. # # values: bodyOffset|bodyScroll|documentElementOffset| # documentElementScroll|max|min|grow|lowestElement| # taggedElement # default: bodyOffset # # maxHeight # ---------------------------------------------------------------------------- # Set maximum height of an iFrame # # values: integer # default: infinite # # minHeight # ---------------------------------------------------------------------------- # Set minimum height of an iFrame # # values: integer # default: 0 # # maxWidth # ---------------------------------------------------------------------------- # Set maximum width of an iFrame # # values: integer # default: infinite # # minWidth # ---------------------------------------------------------------------------- # Set minimum width of an iFrame # # values: integer # default: 0 # # resizeFrom # ---------------------------------------------------------------------------- # Listen for resize events from the parent page, or the iFrame. Select # the 'child' value if the iFrame can be resized independently of the # browser window. Selecting this value can cause issues with some height # calculation methods on mobile devices. # # values: parent|child # default: parent # # scrolling # ---------------------------------------------------------------------------- # Enable scroll-bars for an iFrame # # values: boolean (true|false) # default: false # # sizeHeight # ---------------------------------------------------------------------------- # Resize an iFrame to it's content height # # values: boolean (true|false) # default: true # # sizeWidth # ---------------------------------------------------------------------------- # Resize an iFrame to it's content width # # values: boolean (true|false) # default: false # # tolerance # ---------------------------------------------------------------------------- # Set the number of pixels the iFrame content size has to change by, before # triggering a resize of the iFrame. # # values: integer # default: 0 # # widthCalculationMethod # ---------------------------------------------------------------------------- # By default the width of the page is worked out by taking the greater # of the documentElement and body scrollWidth values. # # Some CSS technics may require you to change this setting to one of # the following options. Each can give different values depending on how # CSS is used in the page and each has varying side-effects. You will need # to experiment to see which is best for any particular circumstance. # # bodyOffset: uses document.body.offsetWidth # bodyScroll: uses document.body.scrollWidth # documentElementOffset: uses document.documentElement.offsetWidth # documentElementScroll: uses document.documentElement.scrollWidth # scroll: use the largest value of the two scroll options # max: use the largest value of the main four options # min: use the lowest value of the main four options # rightMostElement: Loops though every element in the the DOM and # finds the right most point # taggedElement: Finds the most left element with a data-iframe-width # attribute # Note: # The rightMostElement option is the most reliable way of determining the # page width. However, it does have a performance impact in older versions # of IE. In one screen refresh (16ms) Chrome can calculate the position of # around 10,000 html nodes, whereas IE 8 can calculate approximately 50. # The taggedElement option provides much greater performance by limiting # the number of elements that need their position checked. # # The bodyScroll, documentElementScroll, max and min options can cause # screen flicker and will prevent the interval trigger downsizing the # iFrame when the content shrinks. This is mainly an issue in IE 10 and # below, where the mutationObserver event is not supported. To overcome # this you need to manually trigger a page resize by calling the # parentIFrame.size() method when you remove content from the page. # # values: bodyOffset|bodyScroll|documentElementOffset| # documentElementScroll|max|min|scroll| # rightMostElement|taggedElement # default: scroll # # ------------------------------------------------------------------------------ # ------------------------------------------------------------------------------ # DEFAULTS # defaults: enabled: true load: sync log: false autoResize: true bodyBackground: bodyMargin: 0 checkOrigin: true inPageLinks: false interval: 32 heightCalculationMethod: bodyOffset widthCalculationMethod: scroll maxHeight: 100000000 minHeight: 512 maxWidth: 100000000 minWidth: 0 resizeFrom: parent scrolling: false sizeHeight: true sizeWidth: false tolerance: 0 # ------------------------------------------------------------------------------ # END config