Code Monkey home page Code Monkey logo

settingsmanager's Introduction

SettingsManager

This is a simple front-end settings manager written in pure Javascript.

It was originally developed to improve the functionality of my settings implementation for my valk.cam project. However, this settings manager has since spun out into its own project and is now also going to be maintained in this repository as a standalone project.

Be aware of the following when viewing or considering this codebase:

  • This project is in a very early stage of development and is not yet ready for production use.
  • I am not as proficient with Javascript as I would like to be, this project is a step to that direction I hope.

Features

  • A simple front-end settings manager written in pure Javascript.
  • Automatically handles localStorage saving and loading of settings. (Planning to add support for cookies, sessionStorage & non-persistent storage in the future)
  • Generates a simple HTML interface for your settings (Planning to add templating support in the future).
  • Easily define your settings, their values, options and types in a JS object (settings-list.js).
  • Handles settings validation based on a match with provided options.
  • Keeps a copy with the original settings in memory in case it is needed.
  • Currently provides 2 types of setting UI per specified setting:
    • submenu (or dropdown) - displays a button with a dropdown menu with the options specified in the settings-list.js file.
    • cycle (or toggle) - displays a multi-state toggle button with the options specified in the settings-list.js file.

Usage

  • Import the settings-list.js file into your project.

  • Create a new instance of the SettingsManager class.

  • Pass the settings-list.js settingsList object to the SettingsManager constructor.

  • Done.

  • To set a setting's value, call the setSetting method with the setting name and the value you want to set.

  • To get a setting's value, call the getSetting method with the setting name.

  • To get a setting's object, call the getSettingObject method with the setting name.

  • To get the entire settings object, call the getSettings method.

TODO / Planned Features

  • Add support for cookies, sessionStorage & non-persistent storage.
  • Add support for templating for the settings UI.
  • Add more settings types:
    • Options based:
      • Range inputs (min/max)
      • Range Slider (min/max)
      • Slider (min/max)
      • Select (multiple)
      • Checkbox (multiple)
      • Radio (choice)
    • Input based:
      • Text input (validation function)
      • Textarea (validation function)
      • File (upload function)
      • Colorpicker (validation function)
      • Datetimepicker (validation function)
    • Other:
      • Custom (custom function)
  • Add option to set error logging level for the console (error, warning, info, debug, off).
  • Add option to log errors to a file with a server-side logging system.
  • Add support for toggleable settings sections to show and hide multiple settings at once in the settings UI (e.g. "Graphics Settings" and "UI Settings").
  • Add default styling CSS for the settings UI.
  • Add default templates for the settings UI for a few different css libraries like Bootstrap, Materialize, etc.

License

This code is licensed under the MIT license.

Contributing

  • If you have any questions or comments, please open an issue or open a pull request on the Github repository for the project.
  • If you would like to contribute to the project, please reach out to me via an issue or DM me on Twitter (@UPLYNXED)..

settingsmanager's People

Contributors

uplynxed avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.