Add RTL Support by using RTLCSS.com

gulpfile.js

@@ -11,60 +11,72 @@ var gulpCopy = require('gulp-copy');
 var replace = require('gulp-replace');
 var $ = require('gulp-load-plugins')();
 var refresh = require('gulp-refresh');
-// provide a paht to node modules 
+var rtlcss = require('gulp-rtlcss');
+var rename = require('gulp-rename');
+
+// provide a path to node modules
 var sassPaths = [
   'node_modules'
 ];
 // Copy materialize and tablesaw libraries.
-gulp.task('libsrc', function() {
+gulp.task('libsrc', function () {
   gulp.src([
-      'node_modules/materialize-css/dist/js/materialize.min.js'
-    ])
-    .pipe(gulpCopy('js/vendor', { prefix: 4 }));
+    'node_modules/materialize-css/dist/js/materialize.min.js'
+  ])
+      .pipe(gulpCopy('js/vendor', {prefix: 4}));
   gulp.src([
-      'node_modules/tablesaw/dist/stackonly/tablesaw.stackonly.jquery.js'
-    ])
-    .pipe(gulpCopy('js/lib', { prefix: 4 }));
+    'node_modules/tablesaw/dist/stackonly/tablesaw.stackonly.jquery.js'
+  ])
+      .pipe(gulpCopy('js/lib', {prefix: 4}));
   gulp.src([
-      'node_modules/tablesaw/dist/tablesaw-init.js'
-    ])
-    .pipe(gulpCopy('js/lib', { prefix: 3 }));
+    'node_modules/tablesaw/dist/tablesaw-init.js'
+  ])
+      .pipe(gulpCopy('js/lib', {prefix: 3}));
 });
-// Rename functions that conflict with jQueryUI; then move to source control folder js/lib
-gulp.task('rename', function() {
+// Rename functions that conflict with jQueryUI; then move to source control
+// folder js/lib
+gulp.task('rename', function () {
   gulp.src(['js/vendor/materialize.min.js'])
-    .pipe(replace('fn.autocomplete', 'fn.autocomplete_materialize'))
-    .pipe(replace('r.autocomplete', 'r.autocomplete_materialize'))
-    .pipe(replace('fn.tabs', 'fn.tabs_materialize'))
-    .pipe(replace('.tabs(', '.tabs_materialize('))
-    .pipe(gulp.dest('js/lib'));
+      .pipe(replace('fn.autocomplete', 'fn.autocomplete_materialize'))
+      .pipe(replace('r.autocomplete', 'r.autocomplete_materialize'))
+      .pipe(replace('fn.tabs', 'fn.tabs_materialize'))
+      .pipe(replace('.tabs(', '.tabs_materialize('))
+      .pipe(gulp.dest('js/lib'));
 });
-gulp.task('sass', function() {
+gulp.task('sass', function () {
   return gulp.src(['scss/**/**.scss'])
-    .pipe(sassLint({
-      configFile: 'scss/.sass-lint.yml',
-    }))
-    .pipe(sassLint.format())
-    .pipe(sassLint.failOnError())
-    .pipe(sourcemaps.init())
-    .pipe(sourcemaps.identityMap())
-    .pipe($.sass({
+      .pipe(sassLint({
+        configFile: 'scss/.sass-lint.yml',
+      }))
+      .pipe(sassLint.format())
+      .pipe(sassLint.failOnError())
+      .pipe(sourcemaps.init())
+      .pipe(sourcemaps.identityMap())
+      .pipe($.sass({
         includePaths: sassPaths
       })
-      .on('error', $.sass.logError))
-    .pipe($.autoprefixer({
-      browsers: ['last 2 versions', 'ie >= 9']
-    }))
-    .pipe(sourcemaps.write('./maps'))
-    .pipe(gulp.dest('css'))
-    .pipe(refresh());
+          .on('error', $.sass.logError))
+      .pipe($.autoprefixer({
+        browsers: ['last 2 versions', 'ie >= 9']
+      }))
+      .pipe(sourcemaps.write('./maps'))
+      .pipe(gulp.dest('css'))
+      .pipe(refresh());
 });
-gulp.task('lint', function() {
+
+gulp.task('rtlcss', ['sass'], function () {
+  return gulp.src(['css/**.css','!css/**-rtl.css'])
+      .pipe(rtlcss()) // Convert to RTL.
+      .pipe(rename({suffix: '-rtl'})) // Append "-rtl" to the filename.
+      .pipe(gulp.dest('css'))// Output RTL stylesheets.
+});
+
+gulp.task('lint', function () {
   return gulp.src(['./js/*.js', '!./js/vendor.all.js'])
-    .pipe(jshint())
-    .pipe(jshint.reporter('jshint-stylish'));
+      .pipe(jshint())
+      .pipe(jshint.reporter('jshint-stylish'));
 });
-gulp.task('default', ['sass'], function() {
+gulp.task('default', ['sass','rtlcss'], function () {
   refresh.listen();
-  gulp.watch(['scss/**/*.scss'], ['sass']);
+  gulp.watch(['scss/**/*.scss'], ['sass','rtlcss']);
 });

inc/preprocess.inc

@@ -18,6 +18,12 @@ function material_admin_preprocess_html(&$variables) {
   if (in_array($route_match, $portal_paths) && theme_get_setting('material_admin_portal_login')) {
     $variables['attributes']['class'][] = 'material_login';
   }
+
+  // Load specific library for pages with html attribute of RTL
+  if ($variables['html_attributes']['dir'] == 'rtl') {
+    $key = array_search('material_admin/global-styling',$variables['page']['#attached']['library']);
+    $variables['page']['#attached']['library'][$key] .= '-rtl';
+  }
 }
 
 /**

material_admin.libraries.yml

@@ -12,6 +12,20 @@ global-styling:
     - core/jquery.once
     - core/drupalSettings
 
+global-styling-rtl:
+  version: VERSION
+  css:
+    base:
+      css/material_admin-rtl.css: {}
+  js:
+    js/lib/materialize.min.js: {}
+    js/material_admin.js: {}
+  dependencies:
+    - core/drupal
+    - core/jquery
+    - core/jquery.once
+    - core/drupalSettings
+
 tables:
   version: VERSION
   js:

package.json

@@ -12,7 +12,9 @@
     "gulp-jshint": "^2.0.4",
     "gulp-load-plugins": "^1.1.0",
     "gulp-refresh": "^1.1.0",
+    "gulp-rename": "^1.2.3",
     "gulp-replace": "^0.5.4",
+    "gulp-rtlcss": "^1.2.0",
     "gulp-sass": "^3.1.0",
     "gulp-sass-lint": "^1.3.4",
     "gulp-sourcemaps": "^2.6.0",