npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ti.imageview

v1.0.1

Published

A simple extension to add requestHeaders to ImageViews

Downloads

8

Readme

Ti.ImageView

Ti.ImageView is an extension on top of the existing Ti.UI.createImageView method. It allows you to add requestHeaders to fetching of an image, or pass the fetching of the image to your xhr library of choice.

General Note

When using this module, all images going through it will be downloaded using a XHR-request and will not follow the default downloading and caching method build into the platforms natively. If you don't need any of the functionalities provided by this module, it is recommended not to use this.

Usage

Install Ti.ImageView by running the NPM command below in your lib folder in alloy, or in classic run it in your Resources folder.

npm i ti.imageview

Then use it in your alloy project like this

<ImageView module="ti.imageview" id="myImage" />

In your classic project, you can use it by doing a simple require

require('ti.imageview').createImageView(args);

Global Request Headers

The easiest way to set request headers is setting them globally. Just run the code below in alloy.js or any other file you know is called before the images are requested, and all images will be using those headers to fetch images. It is still possible to manually override this property for every ImageView where you want.

require('ti.imageview').defaultRequestHeaders = {
  'User-Agent': 'TiRocks'
};

Of course they can be changed at any point in time, and from then on the new values will be used.

Adding Request Headers Per Image

For adding requestHeaders for a specific image you add a requestHeaders property to your tss. It should look like this:

'#myImage': {
  image: 'YOUR_IMAGE_URL',
  requestHeaders: {
    'User-Agent': 'TiRocks'
  }
}

These request headers will be automatically picked up and used in fetching the image. Keep in mind, if you have set request headers globally, those will be ignored, and the headers provided inside the ImageView will be used instead. There is no merging of headers.

Using Your Own XHR-Library

You can set that up by using the setHttpHandler property exposed in the module. This method will be called with an URL and a callback method. In case of ti.xhr you can set it up as shown in the snippet below. The callback function expects an ImageView.image supported property back.

When using your own XHR-library, keep in mind the request headers you might've provided as described above will not be used. You are responsible of setting this up yourself in your own XHR-library.

Ti.XHR Example

For example, if you already use Ti.XHR in your app, and you've already have that configured to use the right request headers, you might as well want to use that module so you don't have to configure your request headers twice.

require('ti.imageview').httpHandler = function (url, cb) {
  xhr.GET({
    url : url,
    onSuccess : function (e) {
      cb(e.data);
    }
  });
};

Assuming you've already set up the requestHeaders with ti.xhr you don't have to do anything else besides the above. Now this method will be called every time an image needs downloading.

Debug mode

It is also possible to enable debug mode for this module. Just set the debug property to true.

require('ti.imageview').debug = true;

License

Apache 2.0

Contributing

Code contributions are greatly appreciated, please submit a new pull request!