ISSUE-59: Allow 100% with for all formatters and some ++candy (#60)

* First pass on reverting bugs introduced by Pull 19

For some strange reason, this schema keys wen't this weird route. This is the first step on fixing these. Introduced in #19

* More fixes. This is moving fast and good

* identation!

* We have mixed values. Some are string, some are ints

Figure out what the form is really saving right?

* First pass on normalizing with to use '0' as shortcut for 100%

This touches every formatter. Should not require any changes on current settings.

* Allow 0 heigth on PDF to force proportional height

* Mixed width and height on openseadragon

reacting to my lack of sleep

* Well, canvases need fixed sizes

Will add an onresize callback after this commit. Fix to 720 px as starting point if you have 0 as width. JS will then do a full rescale to scale to pixels based on the parent container

* First shot on canvas resize...

* globalize the local

* We know canvas is there

* Jquery-ize

* log/debug

* Another approach

* move viewer.FitInWindow(); to after

* set attr and css

* And now it works

Next step, the base64 encoded snapshot of the 3D rendering to allow a Thumbnail.

* Try a loading notification

* use D8 std classes for ajax progress

* Try own css

* loader centered via absolute css

Kinda 90's but better than a white screen while the world changes

* ups.jquery.ups

* wrong selector, but better via the class anyway

* Let the preloader start a little bit earlier. Let it go if something fails

* For fun.. will delete after

* Cross domain messed the fun

Lets try something local

* Add model/obj to our list and remove test

Doing this directly on formatter but should on beta3 move to SBF?

* Simpler summary for width and height...

Since we have defaults now and also 0 evaluates to false.
Also make width and heigth and JSON KEY required elements.

* Worst copy pasta ever

Ok, now it should be Ok again

* Same mistake i made 5 hours ago

Should i sleep or more coffee?

* And again...

* Pass no widht and height attribute.. this is not 1996

* Allow 0 height for Video as stub for auto/proportional

Because squeezed video is so 1998

* Forgot we have two processors for paged. Done!

* Thanks to Giancarlo super eyes!

Also, i just found i was issuing a getSettings (see the s!) instead of singular for the thumbnails. That is not right and was adding a lot of info to that data- property in the HTML. FIXED!

config/schema/format_strawberryfield.schema.yml

@@ -350,4 +350,3 @@ ds.field_plugin.*:
  formatter:
  type: field.formatter.settings.[%parent.%parent.formatter]
  label: "Formatter settings for a generic ds.field plugin"
-

css/sbfutils.css

@@ -0,0 +1,17 @@
+.sbf-preloader {
+ border: 1rem solid #f3f3f3;
+ border-top: 1rem solid #4b82bf;
+ border-radius: 50%;
+ width: 3rem;
+ height: 3rem;
+ animation: incircles 1200ms linear infinite;
+ position: absolute;
+ left: 50%;
+ top: 10%;
+ pointer-events: none;
+}
+
+@keyframes incircles {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}

format_strawberryfield.libraries.yml

@@ -94,6 +94,9 @@ jsm_modeler:
 
 jsm_model_strawberry:
  version: 1.0
+ css:
+ component:
+ css/sbfutils.css: {}
  js:
  js/jsm-model_strawberry.js: {minified: false}
  dependencies:

format_strawberryfield.module

@@ -85,4 +85,12 @@ function format_strawberryfield_theme() {
  'template' => 'format-strawberryfield-pdfs'
  ],
  ];
+}
+
+function format_strawberryfield_file_mimetype_mapping_alter(&$mapping) {
+ // Add relevant Repository Mimetypes missing from D8
+ $mapping['extensions']['obj'] = 'obj_model_mimetype';
+ // @see https://www.iana.org/assignments/media-types/media-types.xhtml
+ $mapping['mimetypes']['obj_model_mimetype'] = 'model/obj';
+
 }

js/iiif-iabookreader_strawberry.js

@@ -8,11 +8,15 @@
  .each(function (index, value) {
  // Get the node uuid for this element
  var element_id = $(this).attr("id");
+ var default_width = drupalSettings.format_strawberryfield.iabookreader[element_id]['width'];
+ var default_height = drupalSettings.format_strawberryfield.iabookreader[element_id]['height'];
+
  // Check if we got some data passed via Drupal settings.
  if (typeof(drupalSettings.format_strawberryfield.iabookreader[element_id]) != 'undefined') {
 
- $(this).height(drupalSettings.format_strawberryfield.iabookreader[element_id]['height']);
- $(this).width(drupalSettings.format_strawberryfield.iabookreader[element_id]['width']);
+ $(this).height(default_height);
+ $(this).css("width",default_width);
+
  // Defines our basic options for IIIF.
  var options = {
  ui: 'full', // embed, full (responsive)

js/iiif-openseadragon_strawberry.js

@@ -10,10 +10,11 @@
  var showthumbs = false
  $('.strawberry-media-item[data-iiif-infojson]').once('attache_osd')
  .each(function (index, value) {
- var default_width = $(this).attr("width")>0 ? $(this).attr("width"): 320;
- var default_height = $(this).attr("height")>0 ? $(this).attr("height"): Math.round((default_width/4)*3);
+
  // Get the node uuid for this element
  var element_id = $(this).attr("id");
+ var default_width = drupalSettings.format_strawberryfield.openseadragon[element_id]['width'];
+ var default_height = drupalSettings.format_strawberryfield.openseadragon[element_id]['height'];
  var group = $(this).data("iiif-group");
  var infojson = $(this).data("iiif-infojson");
  showthumbs = $(this).data("iiif-thumbnails");
@@ -23,8 +24,7 @@
  groupsid[group] = element_id;
 
  $(this).height(default_height);
- $(this).width(default_width);
-
+ $(this).css("width",default_width);
 
  }
  else {

js/iiif-pannellum_strawberry.js

@@ -35,6 +35,9 @@
  // Get the node uuid for this element
  var element_id = $(this).attr("id");
  var $multiscene = drupalSettings.format_strawberryfield.pannellum[element_id].hasOwnProperty('tour');
+ var default_width = drupalSettings.format_strawberryfield.pannellum[element_id]['width'];
+ var default_height = drupalSettings.format_strawberryfield.pannellum[element_id]['height'];
+
 
  // Check if we got some data passed via Drupal settings.
  if (typeof(drupalSettings.format_strawberryfield.pannellum[element_id]) != 'undefined') {
@@ -50,8 +53,8 @@
  hotspots.push(hotspotdata);
  });
  }
- $(this).height(520); //@TODO this needs to be a setting. C'mon
- $(this).css("width","100%");
+ $(this).height(default_height);
+ $(this).css("width",default_width);
 
  console.log('Initializing Pannellum.')
  // When loading a webform with an embeded Viewer

js/jsm-model_strawberry.js

@@ -10,6 +10,7 @@
  var element_id = $(this).attr("id");
  // Check if we got some data passed via Drupal settings.
  var canvas = value;
+ var canvasDom = $(value);
  var viewerSettings = {
  cameraEyePosition: [-2.0, -1.5, 1.0],
  cameraCenterPosition: [0.0, 0.0, 0.0],
@@ -19,6 +20,18 @@
  var sourceurl = $(value).data('iiif-model');
  var browser_supported = JSM.IsWebGLEnabled() && JSM.IsFileApiEnabled();
 
+
+ // Ajusts width to what ever is smallest.
+ // If given width is less than window size, do nothing
+ // In any other case make it as width
+ // TODO. Deal with the parent container. noty
+ function resizeCanvas () {
+ if (document.body.clientWidth < canvasDom.data("iiif-image-width")) {
+ canvasDom.width(document.body.clientWidth - 20);
+ canvasDom.attr("width", document.body.clientWidth - 20);
+ }
+ }
+
  console.log('Initializing JSModeler')
  if (browser_supported) {
  var urls = sourceurl;
@@ -30,16 +43,26 @@
  var urlList = urls.split('|');
  // This is in case we have material, textures, etc in the same URL.
  //@TODO allow people to select default materials
+ var $div = $("<div>", {id: "jsm-preloader", "class": "sbf-preloader"});
+ canvasDom.parent().append($div);
  JSM.ConvertURLListToJsonData(urlList, {
  onError: function () {
  console.log('Could not convert file' + element_id);
+ $(".sbf-preloader").fadeOut('fast');
  return;
  },
  onReady: function (fileNames, jsonData) {
-
+ console.log('Loaded Materials');
+ console.log(jsonData.materials);
+ // add a texture?
+ /* jsonData.materials[0].texture = 'http://localhost:8183/iiif/2/someid/1536,1024,512,512/512,/0/default.jpg';
+ jsonData.materials[0].textureWidth = 1.0;
+ jsonData.materials[0].textureHeight = 1.0;
+ */
  var viewer = new JSM.ThreeViewer();
  if (!viewer.Start(canvas, viewerSettings)) {
  console.log('Error initializing JSM Viewer' + element_id);
+ $(".sbf-preloader").fadeOut('fast');
  return;
  }
 
@@ -59,15 +82,23 @@
  viewer.AdjustClippingPlanes(50.0);
  viewer.FitInWindow();
  }
+ console.log(viewer.renderer.domElement.toDataURL( 'image/png' ), 'screenshot');
  viewer.EnableDraw(true);
  viewer.Draw();
+ $(".sbf-preloader").fadeOut('slow');
+ resizeCanvas();
+ $( window ).resize(function() {
+ resizeCanvas();
+ viewer.FitInWindow();
+ });
  }
  };
 
  var textureLoaded = function () {
  viewer.Draw();
  };
  JSM.ConvertJSONDataToThreeMeshes(jsonData, textureLoaded, environment);
+
  }
  });
  }

src/Plugin/Field/FieldFormatter/Strawberry3DFormatter.php

@@ -52,6 +52,7 @@ public function settingsForm(array $form, FormStateInterface $form_state) {
  '#type' => 'textfield',
  '#title' => t('JSON Key from where to fetch Media URLs'),
  '#default_value' => $this->getSetting('json_key_source'),
+ '#required' => TRUE
  ],
  'number_models' => [
  '#type' => 'number',
@@ -64,11 +65,13 @@ public function settingsForm(array $form, FormStateInterface $form_state) {
  'max_width' => [
  '#type' => 'number',
  '#title' => $this->t('Maximum width'),
+ '#description' => $this->t('Use 0 to force 100% width'),
  '#default_value' => $this->getSetting('max_width'),
  '#size' => 5,
  '#maxlength' => 5,
  '#field_suffix' => $this->t('pixels'),
  '#min' => 0,
+ '#required' => TRUE
  ],
  'max_height' => [
  '#type' => 'number',
@@ -78,6 +81,7 @@ public function settingsForm(array $form, FormStateInterface $form_state) {
  '#maxlength' => 5,
  '#field_suffix' => $this->t('pixels'),
  '#min' => 0,
+ '#required' => TRUE
  ],
  ] + parent::settingsForm($form, $form_state);
  }
@@ -99,22 +103,14 @@ public function settingsSummary() {
  '%number' => $this->getSetting('number_models'),
  ]);
  }
- if ($this->getSetting('max_width') && $this->getSetting('max_height')) {
- $summary[] = $this->t('Maximum size: %max_width x %max_height pixels', [
- '%max_width' => $this->getSetting('max_width'),
- '%max_height' => $this->getSetting('max_height'),
- ]);
- }
- elseif ($this->getSetting('max_width')) {
- $summary[] = $this->t('Maximum width: %max_width pixels', [
- '%max_width' => $this->getSetting('max_width'),
- ]);
- }
- elseif ($this->getSetting('max_height')) {
- $summary[] = $this->t('Maximum height: %max_height pixels', [
- '%max_height' => $this->getSetting('max_height'),
- ]);
- }
+ $summary[] = $this->t(
+ 'Maximum size: %max_width x %max_height',
+ [
+ '%max_width' => (int) $this->getSetting('max_width') == 0 ? '100%' : $this->getSetting('max_width') . ' pixels',
+ '%max_height' => $this->getSetting('max_height') . ' pixels',
+ ]
+ );
+
 
  return $summary;
  }
@@ -126,6 +122,9 @@ public function settingsSummary() {
  public function viewElements(FieldItemListInterface $items, $langcode) {
  $elements = [];
  $max_width = $this->getSetting('max_width');
+ $max_width_css = empty($max_width) || $max_width == 0 ? '100%' : $max_width .'px';
+ // Because canvases can not be dynamic. But we can make them scale with JS?
+ $max_width = empty($max_width) || $max_width == 0 ? 720 : $max_width ;
  $max_height = $this->getSetting('max_height');
  $number_models = $this->getSetting('number_models');
  /* @var \Drupal\file\FileInterface[] $files */
@@ -222,7 +221,8 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
  'data-iiif-image-width' => $max_width,
  'data-iiif-image-height' => $max_height,
  'height' => $max_height,
- 'width' => $max_width
+ 'width' => $max_width,
+ 'style' => "width:{$max_width_css}; height:{$max_height}px"
  ],
  '#title' => $this->t(
  '3D Model for @label',

src/Plugin/Field/FieldFormatter/StrawberryAudioFormatter.php

@@ -54,6 +54,7 @@ public function settingsForm(array $form, FormStateInterface $form_state) {
  '#type' => 'textfield',
  '#title' => t('JSON Key from where to fetch Media URLs'),
  '#default_value' => $this->getSetting('json_key_source'),
+ '#required' => TRUE
  ],
  'number_media' => [
  '#type' => 'number',
@@ -71,6 +72,7 @@ public function settingsForm(array $form, FormStateInterface $form_state) {
  '#maxlength' => 5,
  '#field_suffix' => $this->t('pixels'),
  '#min' => 0,
+ '#required' => TRUE
  ],
  'max_height' => [
  '#type' => 'number',
@@ -80,6 +82,7 @@ public function settingsForm(array $form, FormStateInterface $form_state) {
  '#maxlength' => 5,
  '#field_suffix' => $this->t('pixels'),
  '#min' => 0,
+ '#required' => TRUE
  ],
  ];
  }
@@ -101,22 +104,13 @@ public function settingsSummary() {
  '%number' => $this->getSetting('number_media'),
  ]);
  }
- if ($this->getSetting('max_width') && $this->getSetting('max_height')) {
- $summary[] = $this->t('Maximum size: %max_width x %max_height pixels', [
- '%max_width' => $this->getSetting('max_width'),
- '%max_height' => $this->getSetting('max_height'),
- ]);
- }
- elseif ($this->getSetting('max_width')) {
- $summary[] = $this->t('Maximum width: %max_width pixels', [
- '%max_width' => $this->getSetting('max_width'),
- ]);
- }
- elseif ($this->getSetting('max_height')) {
- $summary[] = $this->t('Maximum height: %max_height pixels', [
- '%max_height' => $this->getSetting('max_height'),
- ]);
- }
+ $summary[] = $this->t(
+ 'Maximum size: %max_width x %max_height',
+ [
+ '%max_width' => (int) $this->getSetting('max_width') == 0 ? '100%' : $this->getSetting('max_width') . ' pixels',
+ '%max_height' => $this->getSetting('max_height') . ' pixels',
+ ]
+ );
 
  return $summary;
  }
@@ -128,6 +122,7 @@ public function settingsSummary() {
  public function viewElements(FieldItemListInterface $items, $langcode) {
  $elements = [];
  $max_width = $this->getSetting('max_width');
+ $max_width_css = empty($max_width) || $max_width == 0 ? '100%' : $max_width .'px';
  $max_height = $this->getSetting('max_height');
  $number_media = $this->getSetting('number_media');
  /* @var \Drupal\file\FileInterface[] $files */
@@ -241,14 +236,13 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
  '#attributes' => [
  'class' => ['field-av', 'audio-av'],
  'id' => 'audio_' . $uniqueid,
- 'controls' => TRUE
+ 'controls' => TRUE,
+ 'style' => "width:{$max_width_css}; height:{$max_height}px",
  ],
  '#alt' => $this->t(
  'Audio for @label',
  ['@label' => $items->getEntity()->label()]
  ),
- '#width' => $max_width,
- '#height' => $max_height,
  'source' => [
  '#type' => 'html_tag',
  '#tag' => 'source',