shugabuga / openskinhelper_f7

A helper script for OpenSkinJS.

OpenSkinHelper for Framework7

OpenSkin: The Flexible and Open Skin Format

Introduction

OpenSkin is a proposed file format based off of the JSON syntax that will (try to) make a standardized format for application theming. It is based off of the skin format of web-based GameBoy Advance emulator iGBA (now Eclipse), but expanded to be used for non-emulators and to enrich the capabilities of their theming system, as it was quite limited in its standard state.

The Library

OpenSkinHelper is a helper script for OpenSkinJS that will make it easier to implement in your app. It has all the code needed for implementing skins in your app in minutes.

This version of OpenSkinHelper is designed to work with Framework7 versions 2.0.0 and above without the use of frameworks like Vue or React.

Please note that OpenSkinHelper is currently beta software and might have some bugs. It should be mostly stable, though.

Setup

To set up OpenSkin and OpenSkinHelper in your project, add the following towards the end of the page (to reduce page load time):

<!-- OpenSkin -->
<script>
  var openskin = "appName"; // Set app name
  var openskinDefault = "https://shuga.co/openskinDefault.json"; // Set default skin URL
  var openskinDLProxy = "https://php.eclipseemu.me/dl/dl.php?dl="; // Set proxy URL. Can be blank.
</script>
<script src="js/openskin.js"></script>
<script src="js/openskinHelper.js"></script>
<!-- /OpenSkin -->

Make sure to replace appName with your web app's name, and https://shuga.co/openskinDefault.json with a new default skin URL (if you wish). This is used for skin developers to fine-tune their skins for your site (if needed), and for setting the default skin in the skin picker.

OpenSkinJS Documentation

Please check out the main GitHub for proper documentation and APIs.

Usage

Opening the Skin Viewer

OpenSkinHelper.popup(): Brings up the OpenSkinHelper GUI for the user. This is all that needs to be called for most implementations.

OpenSkinHelper.apply(url): Applies the current skin and allows it to be loaded on app start.

OpenSkinHelper.addPopup(): Displays a dialog box to add a new skin.

OpenSkinHelper.add(url): Add a skin to the skin list.

OpenSkinHelper.remove(url): Removes a skin to the skin list.

OpenSkinHelper.list(): Gets the current skin list.

Reporting Bugs

Vulnerabilities (i.e. XSS)

Please contact HeyItsShuga immediately.

Everything Else

Please use the Issues tab to report any bugs that don't compromise security.