FLUID-2642: User-initiated no-Flash graceful degradation

Description

Add functionality to the Uploader to allow users to switch between the Advanced Flash-based Multi-File Uploader and the generic form file uploader.

This should be a configuration option and be tied to progressive enhancement.

Attachments

• FLUID-2642-a.patch

Comments

• Eli Cochran commented 2009-05-01T19:41:26.000-0400

  There are some challenges to implementing this. The place to configure this is either in progressiveEnhanceableUploader or in Uploader. The problem is that it needs data from both. Right now progressiveEnhanceableUploader doesn't have access to some of the options in Uploader because Uploader has not been initialized yet. And Uploader doesn't know about the enhanceable element in progressiveEnhanceableUploader since that is discarded after progressiveEnhanceableUploader has done it's work.

  Perhaps the best way is to make the enhancable element an option of the Uploader which then gets passed into the Uploader on the options but used by progressiveEnhanceableUploader first.

• Eli Cochran commented 2009-05-05T12:09:20.000-0400

  Colin Clark and I worked out a way to handle this situation that is a mix of very light framework code that could be used by almost any component and a bit of rather specific (perhaps too) Uploader code. However, the Uploader's requirement that it be user enhancable and degradable is an edge case, and the framework really should carry the burden of supporting that odd functionality.

  Below is the code sketch that we worked out. (This is only a sketch and I'm putting it here for safe keeping until we implement the solution).

  fluid.progressiveEnhanceableUploader = function (container, enhanceable, options) {
  enhanceable = fluid.container(enhanceable);
  container = fluid.container(container);

  // setup the toggle, this is temp code, needs to be smart and DOM agnostic
  var toggleElement = $(".uploader-toggle-choice",enhanceable);
  toggleElement.removeClass("fl-uploader-hidden");
  toggleElement.click(function () {
  enhanceable.hide();
  container.show();
  });

  if (swfobject.getFlashPlayerVersion().major < 9) {
  // Degrade gracefully.
  enhanceable.show();
  } else {
  // Instantiate the component.
  container.show();
  $(".uploader-toggle-choice",container).click(function () {
  container.hide();
  enhanceable.show();
  });

  return fluid.uploader(container, options);
  }

  var options = {
  enhanceable: "#thingy",
  selectors: {
  enhancableToggleControl : ".foo",
  enhanceable : ".uploader_basic"
  }
  }

  fluid.uploader = function (container, options) {

  };

  fluid.progressiveEnhance = function (componentName, container, enhanceable, options) {
  var systemCheck = fluid.invokeGlobalFunction(componentName + ".checkSystemRequirements");
  if (systemCheck) {
  var component = fluid.invokeGlobalFunction(componentName, [container, options]);
  component.enhanceable = enhanceable;
  } else {
  container.hide();
  enhanceable.show();
  }
  };

  fluid.uploader = function (container, options) {
  if (that.enhanceable) {
  // write out link
  }

  //...
  };

  fluid.uploader.checkSystemRequirements = function (container, enhanceable, options) {
  var goodFlash = swfobject.getFlashPlayerVersion().major > 8;
  if (goodFlash) {
  var enhanceLink = "<a href='#'>blah blah</a>";
  enhanceLink.click(function () {
  container.hide();
  enhanceable.show();
  });
  enhanceable.append(enhanceLink);
  }
  return goodFlash;
  };

  };

• Colin Clark commented 2009-05-15T18:50:35.000-0400

  Here's a patch with a working (though raw) implementation of clickToDegrade decorator. I ran into a snag trying to register this as an actual decorator on the component--this should be possible, but I haven't had enough time to debug the issues. But this works in a bare-bones style.

• Eli Cochran commented 2009-05-18T17:08:25.000-0400

  I think that the DOM for the enhancible links should be carried in the markup for maximum flexibility and then the selectors would be added to the clickToDegrade decorator.

• Colin Clark commented 2009-10-13T18:34:31.000-0400

  This was fixed for Infusion 1.0

• Michelle D'Souza commented 2011-02-22T16:27:52.846-0500

  Closing issues that were resolved for 1.0 and earlier releases.