JS Interface Modal Image Dialog

[nikosch]

Hello again,

while I evaluated possabilities around reusing the image dialog outside of CKE (https://processwire.com/talk/topic/10009-image-field-select-image-from-another-page/) I did a introspektion of CKE's pwimage plugin (indeed I reused a lot of the given logic). Because I don't like the way, the plugin grabs its image information in a big bulk of code, I started to refactor the code and ended in something like this (excerpt):

[..]
  this.config = {

      uri       : ProcessWire.config.urls.admin + 'page/image/'
    , selectors : {
          image           : '#selected_image'
        , captionWrapper  : '#wrap_caption'
        , cbLink          : '#selected_image_link'
        , cbHiDpi         : '#selected_image_hidpi'
        , cbCaption       : '#selected_image_caption'
        , inDescription   : '#selected_image_description'
        , inRotation      : '#selected_image_rotate'
        , inPageId        : '#page_id'
      }
[..]
  };
[..]

  , getImageProperties : function (jImage , jIframeContent) {

        var that    = this;

        var jImage                = jQuery (that.config.selectors.image         , jIframeContent);
        var jCheckboxLinkToLarger = jQuery (that.config.selectors.cbLink        , jIframeContent);
        var jCheckboxHiDpi        = jQuery (that.config.selectors.cbHiDpi       , jIframeContent);
        var jCheckboxCaption      = jQuery (that.config.selectors.cbCaption     , jIframeContent);
        var jInputDescription     = jQuery (that.config.selectors.inDescription , jIframeContent);
        var jInputRotation        = jQuery (that.config.selectors.inRotation    , jIframeContent);
        var jInputPageId          = jQuery (that.config.selectors.inPageId      , jIframeContent);

        var flipHorizontal = jImage.hasClass ('flip_horizontal');
        var flipVertical   = jImage.hasClass ('flip_vertical');

        var src = jImage.attr ('src');
        var cls = jImage
                    .removeClass ('ui-resizable No Alignment resizable_setup')
                    .removeClass ('rotate90 rotate180 rotate270 rotate-90 rotate-180 rotate-270')
                    .removeClass ('flip_vertical flip_horizontal')
                    .attr ('class')
                  ;

        var imageProperties = {
                'identifier' : jImage.data ('idname')
              , 'pageId'     : jInputPageId.val ()
              , 'src'        : src
              , 'file'       : src.substring (src.lastIndexOf ('/') + 1)
              , 'origin'     : jCheckboxLinkToLarger.val ()
              , 'width'      : jImage.attr ('width')
              , 'height'     : jImage.attr ('height')
              , 'widthAuto'  : jImage.attr ('width') == 0
              , 'linkOrigin' : jCheckboxLinkToLarger.is (":checked")
              , 'alt'        : jInputDescription.val ()
              , 'caption'    : jCheckboxCaption.is (":checked")
              , 'hidpi'      : jCheckboxHiDpi.is (":checked")
              , 'editing' : {
                    'rotate' : parseInt (jInputRotation.val ())
                  , 'flip-h' : flipHorizontal
                  , 'flip-v' : flipVertical
                  , 'crop-x' : 0
                  , 'crop-y' : 0
                }
              , 'class'      : cls
            };

        if (! imageProperties.width) {
          imageProperties.width  = jImage.width ();
        }

        if (! imageProperties.height) {
          imageProperties.height = jImage.height ();
        }
    
        return imageProperties;
  }

As you can see, I started to put selectors into configurations und tried to build a literal of the significant image data (which was the goal).

I thought it would be nice, if the Image modal page itself could implement an interface like this. So that every derived operation (including CKE) could simply ask for image properties instead of scratching data from markup and input element status all by itself. In result there would exist a future proof approach for times when UI elements, possible image modifications etc. change.