Fix tag label formatting, add form integration with api, add responsive video sizing without js

src/definitions/behaviors/form.js

@@ -343,11 +343,27 @@ $.fn.form = function(fields, parameters) {
           }
         },
 
+        set: {
+          success: function() {
+            $module
+              .removeClass(className.error)
+              .addClass(className.success)
+            ;
+          },
+          error: function() {
+            $module
+              .removeClass(className.success)
+              .addClass(className.error)
+            ;
+          }
+        },
+
         validate: {
 
           form: function(event) {
             var
-              allValid = true
+              allValid = true,
+              apiRequest
             ;
             // reset errors
             formErrors = [];
@@ -358,18 +374,19 @@ $.fn.form = function(fields, parameters) {
             });
             if(allValid) {
               module.debug('Form has no validation errors, submitting');
-              $module
-                .removeClass(className.error)
-                .addClass(className.success)
-              ;
+              module.set.error();
               return $.proxy(settings.onSuccess, this)(event);
             }
             else {
               module.debug('Form has errors');
-              $module.addClass(className.error);
+              module.set.error();
               if(!settings.inline) {
                 module.add.errors(formErrors);
               }
+              // prevent ajax submit
+              if($module.data('moduleApi') !== undefined) {
+                event.stopImmediatePropagation();
+              }
               return $.proxy(settings.onFailure, this)(formErrors);
             }
           },

src/definitions/elements/label.less

@@ -223,7 +223,7 @@ a.ui.label:hover:before {
 .ui.tag.label:before {
     position: absolute;
     top: @tagTriangleTopOffset;
-    left: @tagTriangleLeftOffset;
+    right: @tagTriangleRightOffset;
     content: '';
 
     background-color: @backgroundColor;
@@ -232,7 +232,7 @@ a.ui.label:hover:before {
     width: @tagTriangleSize;
     height: @tagTriangleSize;
 
-    transform: rotate(45deg);
+    transform: translateY(-50%) translateX(50%) rotate(-45deg);
     transition:
       background 0.1s linear
     ;

src/definitions/modules/modal.js

@@ -732,7 +732,8 @@ $.fn.modal.settings = {
   },
   error : {
     dimmer    : 'UI Dimmer, a required component is not included in this page',
-    method    : 'The method you called is not defined.'
+    method    : 'The method you called is not defined.',
+    notFound  : 'The element you specified could not be found'
   },
   className : {
     active    : 'active',

src/definitions/modules/modal.less

@@ -31,13 +31,14 @@
   left: 50%;
   text-align: left;
 
-  width: @modalWidth;
-  margin-left: @modalXOffset;
+  width: @width;
+  margin-left: @xOffset;
 
-  background-color: #FFFFFF;
-  border: 1px solid #DDDDDD;
+  background: @background;
+  border: @border;
+  box-shadow: @boxShadow;
 
-  border-radius: @modalBorderRadius;
+  border-radius: @borderRadius;
   user-select: text;
 }
 
@@ -53,17 +54,17 @@
 .ui.modal > .close {
   cursor: pointer;
   position: absolute;
-  top: @modalCloseTop;
-  right: @modalCloseRight;
+  top: @closeTop;
+  right: @closeRight;
   z-index: 1;
 
-  opacity: @modalCloseOpacity;
-  font-size: @modalCloseSize;
-  color: @modalCloseColor;
+  opacity: @closeOpacity;
+  font-size: @closeSize;
+  color: @closeColor;
 
-  width: @modalCloseHitbox;
-  height: @modalCloseHitbox;
-  padding: @modalClosePadding;
+  width: @closeHitbox;
+  height: @closeHitbox;
+  padding: @closePadding;
 }
 .ui.modal > .close:hover {
   opacity: 1;
@@ -74,15 +75,18 @@
 ---------------*/
 
 .ui.modal > .header {
-  font-family: @modalHeaderFontFamily;
-  margin: @modalHeaderMargin;
-  padding: @modalHeaderPadding;
+  display: block;
+  font-family: @headerFontFamily;
+  background: @headerBackground;
+  margin: @headerMargin;
+  padding: @headerPadding;
 
-  font-size: @modalHeaderFontSize;
-  font-weight: @modalHeaderFontWeight;
+  font-size: @headerFontSize;
+  font-weight: @headerFontWeight;
+  border-bottom: @headerBottomBorder;
 
-  border-top-left-radius: @modalBorderRadius;
-  border-top-right-radius: @modalBorderRadius;
+  border-top-left-radius: @borderRadius;
+  border-top-right-radius: @borderRadius;
 }
 
 /*--------------
@@ -93,25 +97,31 @@
   position: relative;
   display: table;
   width: 100%;
-  font-size: @modalContentFontSize;
-  line-height: @modalContentLineHeight;
-  padding: @modalContentPadding;
-  background: @modalContentBackground;
+  font-size: @contentFontSize;
+  line-height: @contentLineHeight;
+  padding: @contentPadding;
+  background: @contentBackground;
+
+  border-bottom-left-radius: @borderRadius;
+  border-bottom-right-radius: @borderRadius;
+}
+.ui.modal > .content:only-child {
+  border-radius: @borderRadius;
 }
 .ui.modal > .content > .image {
   display: table-cell;
-  padding-right: @modalImagePadding;
-  min-width: @modalImageMinWidth;
+  padding-right: @imagePadding;
+  min-width: @imageMinWidth;
 }
 .ui.modal > .content > .description {
   display: table-cell;
   vertical-align: top;
-  padding-left: @modalDescriptionPadding;
-  min-width: @modalDescriptionMinWidth;
+  padding-left: @descriptionPadding;
+  min-width: @descriptionMinWidth;
 }
 /*rtl:ignore*/
 .ui.modal > .content > .image > i.icon {
-  font-size: @modalImageIconSize;
+  font-size: @imageIconSize;
   margin: 0em;
 }
 
@@ -120,11 +130,11 @@
 ---------------*/
 
 .ui.modal .actions {
-  padding: @modalActionPadding;
+  padding: @actionPadding;
   text-align: right;
 }
 .ui.modal .actions > .button {
-  margin-left: @modalButtonDistance;
+  margin-left: @buttonDistance;
 }
 
 /*-------------------
@@ -134,32 +144,32 @@
 /* Modal Width */
 @media only screen and (max-width : (@tabletBreakpoint - 1px)) {
   .ui.modal {
-    width: @modalMobileWidth;
-    margin: @modalMobileMargin;
+    width: @mobileWidth;
+    margin: @mobileMargin;
   }
 }
 @media only screen and (min-width : @tabletBreakpoint) {
   .ui.modal {
-    width: @modalTabletWidth;
-    margin: @modalTabletMargin;
+    width: @tabletWidth;
+    margin: @tabletMargin;
   }
 }
 @media only screen and (min-width : @computerBreakpoint) {
   .ui.modal {
-    width: @modalComputerWidth;
-    margin: @modalComputerMargin;
+    width: @computerWidth;
+    margin: @computerMargin;
   }
 }
 @media only screen and (min-width : @largeMonitorBreakpoint) {
   .ui.modal {
-    width: @modalLargeMonitorWidth;
-    margin: @modalLargeMonitorMargin;
+    width: @largeMonitorWidth;
+    margin: @largeMonitorMargin;
   }
 }
 @media only screen and (min-width : @widescreenMonitorBreakpoint) {
   .ui.modal {
-    width: @modalWidescreenMonitorWidth;
-    margin: @modalWidescreenMonitorMargin;
+    width: @widescreenMonitorWidth;
+    margin: @widescreenMonitorMargin;
   }
 }
 
@@ -169,12 +179,12 @@
    /*rtl:ignore*/
   .ui.modal .content > .image {
     display: block;
-    padding: @modalMobileImagePadding;
+    padding: @mobileImagePadding;
   }
   /*rtl:ignore*/
   .ui.modal .content > .description {
     display: block;
-    padding: @modalMobileDescriptionPadding;
+    padding: @mobileDescriptionPadding;
     box-shadow: none;
   }
   .ui.modal .content .image {
@@ -186,16 +196,16 @@
   }
   .ui.modal .actions > .buttons,
   .ui.modal .actions > .button {
-    margin-bottom: @modalMobileButtonDistance;
+    margin-bottom: @mobileButtonDistance;
   }
 }
 /* Tablet and Mobile */
 @media only screen and (max-width : @computerBreakpoint) {
   .ui.modal > .close {
-    top: @modalInnerCloseTop;
-    right: @modalInnerCloseRight;
+    top: @innerCloseTop;
+    right: @innerCloseRight;
 
-    color: @modalInnerCloseColor;
+    color: @innerCloseColor;
   }
 }
 
@@ -229,13 +239,29 @@
 
 
 /*******************************
-              States
+             States
 *******************************/
 
 .ui.active.modal {
   display: block;
 }
 
+/*******************************
+           Variations
+*******************************/
+
+/*--------------
+   Full Screen
+---------------*/
+
+.ui.fullscreen.modal {
+  width: @fullScreenWidth !important;
+  margin: @fullScreenMargin !important;
+}
+.ui.fullscreen.modal > .close {
+  right: 0em;
+}
+
 
 /*--------------
       Size
@@ -243,73 +269,75 @@
 
 /* Small */
 .ui.small.modal > .header {
-  font-size: @modalSmallHeaderSize;
+  font-size: @smallHeaderSize;
 }
+
 /* Small Modal Width */
 @media only screen and (max-width : (@tabletBreakpoint - 1px)) {
   .ui.small.modal {
-    width: @modalSmallMobileWidth;
-    margin: @modalSmallMobileMargin;
+    width: @smallMobileWidth;
+    margin: @smallMobileMargin;
   }
 }
 @media only screen and (min-width : @tabletBreakpoint) {
   .ui.small.modal {
-    width: @modalSmallTabletWidth;
-    margin: @modalSmallTabletMargin;
+    width: @smallTabletWidth;
+    margin: @smallTabletMargin;
   }
 }
 @media only screen and (min-width : @computerBreakpoint) {
   .ui.small.modal {
-    width: @modalSmallComputerWidth;
-    margin: @modalSmallComputerMargin;
+    width: @smallComputerWidth;
+    margin: @smallComputerMargin;
   }
 }
 @media only screen and (min-width : @largeMonitorBreakpoint) {
   .ui.small.modal {
-    width: @modalSmallLargeMonitorWidth;
-    margin: @modalSmallLargeMonitorMargin;
+    width: @smallLargeMonitorWidth;
+    margin: @smallLargeMonitorMargin;
   }
 }
 @media only screen and (min-width : @widescreenMonitorBreakpoint) {
   .ui.small.modal {
-    width: @modalSmallWidescreenMonitorWidth;
-    margin: @modalSmallWidescreenMonitorMargin;
+    width: @smallWidescreenMonitorWidth;
+    margin: @smallWidescreenMonitorMargin;
   }
 }
 
 /* Large Modal Width */
 .ui.large.modal > .header {
-  font-size: @modalLargeHeaderSize;
+  font-size: @largeHeaderSize;
 }
 @media only screen and (max-width : (@tabletBreakpoint - 1px)) {
   .ui.large.modal {
-    width: @modalLargeMobileWidth;
-    margin: @modalLargeMobileMargin;
+    width: @largeMobileWidth;
+    margin: @largeMobileMargin;
   }
 }
 @media only screen and (min-width : @tabletBreakpoint) {
   .ui.large.modal {
-    width: @modalLargeTabletWidth;
-    margin: @modalLargeTabletMargin;
+    width: @largeTabletWidth;
+    margin: @largeTabletMargin;
   }
 }
 @media only screen and (min-width : @computerBreakpoint) {
   .ui.large.modal {
-    width: @modalLargeComputerWidth;
-    margin: @modalLargeComputerMargin;
+    width: @largeComputerWidth;
+    margin: @largeComputerMargin;
   }
 }
 @media only screen and (min-width : @largeMonitorBreakpoint) {
   .ui.large.modal {
-    width: @modalLargeLargeMonitorWidth;
-    margin: @modalLargeLargeMonitorMargin;
+    width: @largeLargeMonitorWidth;
+    margin: @largeLargeMonitorMargin;
   }
 }
 @media only screen and (min-width : @widescreenMonitorBreakpoint) {
   .ui.large.modal {
-    width: @modalLargeWidescreenMonitorWidth;
-    margin: @modalLargeWidescreenMonitorMargin;
+    width: @largeWidescreenMonitorWidth;
+    margin: @largeWidescreenMonitorMargin;
   }
 }
 
+
 .loadUIOverrides();

src/definitions/modules/video.js

@@ -24,6 +24,12 @@ $.fn.video = function(parameters) {
     methodInvoked   = (typeof query == 'string'),
     queryArguments  = [].slice.call(arguments, 1),
 
+    requestAnimationFrame = window.requestAnimationFrame
+      || window.mozRequestAnimationFrame
+      || window.webkitRequestAnimationFrame
+      || window.msRequestAnimationFrame
+      || function(callback) { setTimeout(callback, 0); },
+
     returnedValue
   ;
 
@@ -39,10 +45,12 @@ $.fn.video = function(parameters) {
         error           = settings.error,
         metadata        = settings.metadata,
         namespace       = settings.namespace,
+        templates       = settings.templates,
 
         eventNamespace  = '.' + namespace,
         moduleNamespace = 'module-' + namespace,
 
+        $window         = $(window),
         $module         = $(this),
         $placeholder    = $module.find(selector.placeholder),
         $playButton     = $module.find(selector.playButton),
@@ -57,6 +65,7 @@ $.fn.video = function(parameters) {
 
         initialize: function() {
           module.debug('Initializing video');
+          module.create();
           $placeholder
             .on('click' + eventNamespace, module.play)
           ;
@@ -74,6 +83,19 @@ $.fn.video = function(parameters) {
           ;
         },
 
+        create: function() {
+          var
+            image = $module.data(metadata.image),
+            html = templates.video(image)
+          ;
+          $module.html(html);
+          module.refresh();
+          if(!image) {
+            module.play();
+          }
+          module.debug('Creating html for video element', html);
+        },
+
         destroy: function() {
           module.verbose('Destroying previous instance of video');
           $module
@@ -88,6 +110,13 @@ $.fn.video = function(parameters) {
           ;
         },
 
+        refresh: function() {
+          module.verbose('Refreshing selector cache');
+          $placeholder    = $module.find(selector.placeholder);
+          $playButton     = $module.find(selector.playButton);
+          $embed          = $module.find(selector.embed);
+        },
+
         // sets new video
         change: function(source, id, url) {
           module.debug('Changing video to ', source, id, url);
@@ -131,42 +160,60 @@ $.fn.video = function(parameters) {
           settings.onPlay();
         },
 
+        get: {
+          source: function(url) {
+            if(typeof url !== 'string') {
+              return false;
+            }
+            if(url.search('youtube.com') !== -1) {
+              return 'youtube';
+            }
+            else if(url.search('vimeo.com') !== -1) {
+              return 'vimeo';
+            }
+            return false;
+          },
+          id: function(url) {
+            if(settings.regExp.youtube.test(url)) {
+              return url.match(settings.regExp.youtube)[1];
+            }
+            else if(settings.regExp.vimeo.test(url)) {
+              return url.match(settings.regExp.vimeo)[2];
+            }
+            return false;
+          }
+        },
+
         generate: {
           // generates iframe html
           html: function(source, id, url) {
             module.debug('Generating embed html');
             var
-              width = (settings.width == 'auto')
-                ? $module.width()
-                : settings.width,
-              height = (settings.height == 'auto')
-                ? $module.height()
-                : settings.height,
               html
             ;
-            if(source && id) {
+            // allow override of settings
+            source = source || settings.source;
+            id     = id     || settings.id;
+            if((source && id) || url) {
+              if(!source || !id) {
+                source = module.get.source(url);
+                id     = module.get.id(url);
+              }
               if(source == 'vimeo') {
                 html = ''
                   + '<iframe src="http://player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"'
-                  + ' width="' + width + '" height="' + height + '"'
+                  + ' width="100%" height="100%"'
                   + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
                 ;
               }
               else if(source == 'youtube') {
                 html = ''
                   + '<iframe src="http://www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"'
-                  + ' width="' + width + '" height="' + height + '"'
+                  + ' width="100%" height="100%"'
                   + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
                 ;
               }
             }
-            else if(url) {
-              html = ''
-                + '<iframe src="' + url + '"'
-                + ' width="' + width + '" height="' + height + '"'
-                + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
-              ;
-            }
             else {
               module.error(error.noVideo);
             }
@@ -179,9 +226,9 @@ $.fn.video = function(parameters) {
               api      = (settings.api)
                 ? 1
                 : 0,
-              autoplay = (settings.autoplay)
-                ? 1
-                : 0,
+              autoplay = (settings.autoplay === 'auto')
+                ? ($module.data('image') !== undefined)
+                : settings.autoplay,
               hd       = (settings.hd)
                 ? 1
                 : 0,
@@ -216,7 +263,7 @@ $.fn.video = function(parameters) {
             }
             else if(source == 'youtube') {
               url = ''
-                +      'enablejsapi=' + api
+                + 'enablejsapi='      + api
                 + '&amp;autoplay='    + autoplay
                 + '&amp;autohide='    + hideUI
                 + '&amp;hq='          + hd
@@ -418,11 +465,18 @@ $.fn.video.settings = {
   performance : true,
 
   metadata    : {
-    source : 'source',
     id     : 'id',
+    image  : 'image',
+    source : 'source',
     url    : 'url'
   },
 
+  source      : false,
+  url         : false,
+  id          : false,
+
+  aspectRatio : (16/9),
+
   onPlay   : function(){},
   onReset  : function(){},
   onChange : function(){},
@@ -434,12 +488,17 @@ $.fn.video.settings = {
   width    : 'auto',
   height   : 'auto',
 
-  autoplay : false,
+  autoplay : 'auto',
   color    : '#442359',
   hd       : true,
   showUI   : false,
   api      : true,
 
+  regExp : {
+    youtube : /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/,
+    vimeo   : /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/
+  },
+
   error      : {
     noVideo     : 'No video specified',
     method      : 'The method you called is not defined'
@@ -456,5 +515,21 @@ $.fn.video.settings = {
   }
 };
 
+$.fn.video.settings.templates = {
+  video: function(image) {
+    var
+      html = ''
+    ;
+    if(image) {
+      html += ''
+        + '<i class="play sign icon"></i>'
+        + '<img class="placeholder" src="' + image + '">'
+      ;
+    }
+    html += '<div class="embed"></div>';
+    return html;
+  }
+};
+
 
 })( jQuery, window , document );

src/definitions/modules/video.less

@@ -1,5 +1,5 @@
-/*
- * # Semantic - Video
+ /*
+ * # Semantic - Button
  * http://github.com/semantic-org/semantic-ui/
  *
  *
@@ -9,15 +9,28 @@
  *
  */
 
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'video';
+
+@import '../../semantic.config';
+
 
 /*******************************
             Video
 *******************************/
 
 .ui.video {
-  background-color: #000000;
+  position: relative;
+  background-color: @background;
   position: relative;
   max-width: 100%;
+  padding-bottom: 56.25%;
+  height: 0px;
+  overflow: hidden;
 }
 
 /*--------------
@@ -26,7 +39,7 @@
 
 /* Placeholder Image */
 .ui.video .placeholder {
-  background-color: #333333;
+  background-color: @placeholderBackground;
 }
 
 /* Play Icon Overlay */
@@ -40,14 +53,7 @@
   width: 100%;
   height: 100%;
 
-  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-  opacity: 0.6;
-
-  -webkit-transition: opacity 0.3s;
-  -moz-transition: opacity 0.3s;
-  -o-transition: opacity 0.3s;
-  -ms-transition: opacity 0.3s;
+  opacity: @playOpacity;
   transition: opacity 0.3s;
 }
 .ui.video .play.icon:before {
@@ -56,21 +62,40 @@
   left: 50%;
   z-index: 11;
 
-  font-size: 6rem;
-  margin: -3rem 0em 0em -3rem;
-  color: #FFFFFF;
-  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
+  background: @playBackground;
+
+  width: (@playSize + @playBorderSize);
+  height: (@playSize + @playBorderSize);
+  line-height: (@playSize + @playBorderSize);
+  border-radius: @playBorderRadius;
+
+  color: @playColor;
+  font-size: @playSize;
+  text-shadow: @playShadow;
+  transform: translateX(-50%) translateY(-50%);
 }
 
 .ui.video .placeholder {
+  position: absolute;
+  top: 0px;
+  left: 0px;
   display: block;
   width: 100%;
   height: 100%;
 }
 
 /* IFrame Embed */
-.ui.video .embed {
-  display: none;
+.ui.video .embed iframe,
+.ui.video .embed embed,
+.ui.video .embed object {
+  position: absolute;
+  border: none;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  margin: 0em;
+  padding: 0em;
 }
 
 /*******************************
@@ -82,10 +107,9 @@
 ---------------*/
 
 .ui.video .play:hover {
-  opacity: 1;
+  opacity: @playHoverOpacity;
 }
 
-
 /*--------------
      Active
 ---------------*/
@@ -95,5 +119,7 @@
   display: none;
 }
 .ui.video.active .embed {
-  display: block;
+  display: inline;
 }
+
+.loadUIOverrides();