New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

device-asset

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

device-asset

Easily get device-specific assets.

1.0.0
latest
npm

Version published: 9 years ago

Weekly downloads: 4; decreased by-20%

Maintainers: 1

Weekly downloads

Created: 9 years ago

Source

device-asset

Motivation

device-asset is used to read the browser's window + screen to calculate the best file size you should use for a given asset. Additionally, you can pass options like base and ext to immediately create the correct filename path.

Specific Devices supported:

iphone 4
iphone 5
iphone 6
iphone 6 plus
ipad
ipad air
ipad retina
ipad pro
samsung galaxy
surface 3
android
android hd

Node.js Usage

Use anywhere you have a global window and screen object. Filenames will become back as a string that corresponds to the keys in config.json.


var da = require('device-asset');

da.getAsset();

will produce a response:

{
  "displayName": "iPhone 6 Plus",
  "fileName": "iphone_6_plus",
  "res": {
    "w": 1242,
    "h": 2208
  }
}

Additionally, you can pass options base or ext like so:


var da = require('device-asset');
da.getAsset({
  base: 'http://mysite.com/images/',
  ext: 'jpg'
});

will produce a response with useful fileName:

{
  "displayName": "iPhone 6 Plus",
  "fileName": "http://mysite.com/images/iphone_6_plus.jpg",
  "res": {
    "w": 1242,
    "h": 2208
  }
}

If you're feeling extra lucky, you can pass your own config (use the structure in config.json).


var da = require('device-asset');
var customConfig = {
  "custom_thing": {
    "displayName": "Custom Thing",
    "fileName": "custom_thing",
    "res": {
      "w": 600,
      "h": 800
    }
  },
  "custom_thing_2": {
    "displayName": "Custom Thing 2",
    "fileName": "custom_thing 2",
    "res": {
      "w": 200,
      "h": 300
    }
  }
}
da.getAsset({
  base: 'http://mysite.com/images/',
  ext: 'jpg'
}, customConfig);

You can also get the default config by using getDevices.


var da = require('device-asset');

function getOptions(devices) {
  return Object.keys(devices).map(function(d) {
   var elm = document.createElement('option');
   elm.value = devices[k].fileName; 
   elm.innerHTML = devices[k].displayName

   return elm;
  });
}

var devices = getOptions(da.getDevices());

Non-npm Usage

To use outside of NPM, require the device-asset-min.js file in your project which will expose a global deviceAsset object.

<html>
<head>
<title>Page</title>
</head>
<body>
  <div id="mount"></div>
  <script type="text/javascript" src="/device-asset-min.js"></script>
  <script>
    var bestAsset = deviceAsset.getAsset({
      base: 'http://mysite.com/images/',
      ext: 'jpg'
    });

    var image = document.createElement('img');
    image.src = bestAsset.fileName;

    var container = document.getElementById('mount');
    container.appendChild(image);
  </script>
</body>
</html>

Keywords

FAQs

What is device-asset?

Is device-asset popular?

Is device-asset well maintained?

Package last updated on 28 Mar 2016

Did you know?

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

device-asset

device-asset

Motivation

Specific Devices supported:

Node.js Usage

Non-npm Usage

Keywords

Related posts

Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional

Maven Central Adds Sigstore Signature Validation