Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

advanced-sheet-handler

Package Overview
Dependencies
Maintainers
1
Versions
46
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

advanced-sheet-handler

prototype for advanced-sheet-handler

  • 0.1.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
22
decreased by-77.55%
Maintainers
1
Weekly downloads
 
Created
Source

Advanced-sheet-handler

Advanced-sheet is a web-component that was developped using Stencil (v0.6.1), a web-component compiler developped by the ionic team. You can find a link to know how to do some here

Getting Started

To install this web-component just run


npm install advanced-sheet-handler

Example of use

In your HTML file, place the script reference inside your header in order to be able to use this package. NB: The font-awesome link is currently necessary if you want to see the spinner during your search.


<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
  <script src='modules/advanced-sheet-handler/dist/advanced-sheet-handler.js'></script>
</head>

Then you can paste this anywhere in your code where a HTML element can be placed:


<advanced-sheet-handler></advanced-sheet-handler>

Accessible events and properties

Some properties and methods are provided. More will probably be added in the future

Properties

.data

The data property is the main entry point to the component. The component include another component named "advanced-sheet" that has this data property. Your data must be provided in this particular format:


{"data":[{"_id":"something","key2": "example", "key3": "example2"}]}

"data" and "_id" are mandatory parameters The data format will be improved in a next release

.pdbFile

By modifying the advanced-sheet pdbFile property you can see your molecule thanks to ngl. This property must be a string (representing the url to your pdb file)

Events

Once the advanced-sheet is loaded, the event sheetLoaded is emitted. Once it is emited, you can pass data to the component. During developpement we used it like this:


<script>

	document.addEventListener('sheetLoaded',function(){
		let sheet = document.getElementsByTagName('advanced-sheet')[0];
    	sheet.data = {"data":[{"_id":"little_bird", "name": "titi", "color":"yellow"}]};
	})

</script>

Release notes

v0.0.1 -> v0.0.2

Prototype of the advanced-sheet-handler component

v0.0.3 -> v0.0.4

Component compatible with bootstrap version 3.3.7

v0.1.0

ngl dependency added, we can see view pdb files by modifying the .pdbFile property.

Keywords

FAQs

Package last updated on 05 Apr 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc