Skip to content

Commit

Permalink
Merge branch 'medium-editor'
Browse files Browse the repository at this point in the history
  • Loading branch information
smartapant committed Jan 18, 2018
2 parents 8882d2b + 178e498 commit 0adbcab
Showing 10 changed files with 294 additions and 2 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -30,6 +30,7 @@
"ionicons": "^3.0.0",
"kewler": "^1.0.8",
"leaflet-map": "^0.2.1",
"medium-editor": "^5.23.3",
"normalize.css": "7.0.0",
"vee-validate": "2.0.0-rc.7",
"vue": "2.5.2",
110 changes: 110 additions & 0 deletions src/components/forms/medium-editor/MediumEditor.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<template>
<div class="medium-editor">
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="'forms.mediumEditor.title' | translate">
<vuestic-medium-editor @initialized="handleEditorInitialization">
<h1>Girl, no you don’t</h1>

<p>
<i>Every time a straight girl tells me “I wish I was a lesbian”, I want to light myself on fire.</i>
</p>

<p>
Picture it. Walk with me for a second.
</p>


<p>
You enter into your favorite local bar looking <b class="default-selection">good</b> as hell, but you know the only heads you want to turn — spicy & stylish alpha bitches — are heavily
fixated on the D. The hot girl talks to you, but she only wants to be your best friend. Her nonthreatening and attentive best friend. Receiver of sexy
selfies, listener of stories. Meanwhile, you attract unwanted attention from straight men, pudgy and greasy moths to your emotionally distant flame.
</p>

<h3>
The only place you can go out and feel desired is a <i>lesbian</i> party. There is a reason lesbian bars no longer exist. Women aren’t taught to approach each
other. We’re taught to cross our arms and judge. You worry about the shape of your eyebrows now? The stage of your roots? You haven’t felt fully judged
until you’ve been in a room full of scowling women who want to fuck each other.
</h3>

<p>
For years, your friends, family members, and medical professionals will doubt your continued homosexual confessions. They will tell you that you “haven’t
met the right man.” Sex with women is fine. That’s allowed. You can be “experimental,” a titillating object of the male gaze. You can be fluid. But you
want to partner with a woman? No no. You must be mistaken. You tend to believe them, because you’ve been conditioned to disbelieve yourself, to instead
defer to the voices of others.
</p>

<p>
You will experience years of confusion about your sexuality, because you haven’t been taught to prioritize your own sexual desire. None of your female
friends orgasm anyway. And if they do, it’s definitely not from penetration. Everyone’s a little in love with their best friend, right? Maybe you just
haven’t met the right man.
</p>

<p>
The word “crazy” continues to come up whenever you discuss your love life, because mainstream society still associates lesbian love with mental
instability. If you’re femme-presenting, you will hear wildly homophobic statements in your presence. You will hear people opine about single brothers,
cousins, uncles who are “obviously gay,” which doesn’t bother you. But then you’ll hear them mention their unhinged friend, about whom they express a
performative concern, tinged with excitement: “She went to rehab and then she dated a woman…. That’s just Crazy Carrie for you!”
</p>

<p>
A family member to tell you that your your “alarming lifestyle” has required them to seek therapy. Your mom will tell you that she “supports you no
matter what” but that it would be “much easier for everyone if you dated a man.” Your love life will become a burden, something that frightens people.
You will go to the Deep South for the holidays and your Grandmother will quite literally scream when you confirm her suspicions that you do, in fact,
have a girlfriend...
</p>

<p>
Read full article on <a href="https://medium.com/@dorn.anna/girl-no-you-dont-2e21e826c62c">Medium</a>
</p>
</vuestic-medium-editor>
</vuestic-widget>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'medium-editor',
data () {
return {
editor: {},
editorOptions: {
buttonLabels: 'fontawesome',
autoLink: true,
toolbar: {
buttons: [
'bold',
'italic',
'underline',
'anchor',
'h1',
'h2',
'h3'
]
}
}
}
},
methods: {
handleEditorInitialization (editor) {
this.editor = editor
this.$nextTick(() => {
this.highlightSampleText()
})
},
highlightSampleText () {
let sampleText = document.getElementsByClassName('default-selection')[0]
this.editor.selectElement(sampleText)
}
}
}
</script>

<style lang="scss">
</style>
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ import Switch from 'src/components/vuestic-components/vuestic-switch/VuesticSwit
import Tabs from 'src/components/vuestic-components/vuestic-tabs/VuesticTabs.vue'
import Widget from 'src/components/vuestic-components/vuestic-widget/VuesticWidget.vue'
import Wizard from 'src/components/vuestic-components/vuestic-wizard/VuesticWizard.vue'
import MediumEditor from 'src/components/vuestic-components/vuestic-medium-editor/VuesticMediumEditor.vue'

const VuesticComponentsPlugin = {
install (Vue, options) {
@@ -35,6 +36,7 @@ const VuesticComponentsPlugin = {
Vue.component(Tabs.name, Tabs)
Vue.component(Widget.name, Widget)
Vue.component(Wizard.name, Wizard)
Vue.component(MediumEditor.name, MediumEditor)
}
}

Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<template>
<div class="vuestic-medium-editor">
<slot></slot>
</div>
</template>

<script>
import MediumEditor from 'medium-editor'
export default {
name: 'vuestic-medium-editor',
props: {
editorOptions: {
type: Object,
default: () => {
return {
buttonLabels: 'fontawesome',
autoLink: true,
toolbar: {
buttons: [
'bold',
'italic',
'underline',
'anchor',
'h1',
'h2',
'h3'
]
}
}
}
}
},
data () {
return {
editor: null
}
},
mounted () {
this.initEditor()
},
beforeDestroy () {
this.destroyEditor()
},
methods: {
initEditor () {
this.editor = new MediumEditor(this.$el, this.editorOptions)
this.$emit('initialized', this.editor)
},
destroyEditor () {
this.editor.destroy()
}
}
}
</script>

<style lang="scss">
.vuestic-medium-editor {
&:focus {
outline: none;
}
}
</style>
4 changes: 4 additions & 0 deletions src/i18n/en.json
Original file line number Diff line number Diff line change
@@ -84,6 +84,9 @@
"title": "Inputs",
"upload": "UPLOAD"
},
"mediumEditor": {
"title": "Medium Editor"
},
"selects": {
"country": "Country Select",
"countryMulti": "Country Multi Select",
@@ -133,6 +136,7 @@
"formElements": "Form Elements",
"forms": "Forms",
"formWizards": "Form Wizards",
"mediumEditor": "Medium Editor",
"grid": "Grid",
"icons": "Icons",
"spinners": "Spinners",
4 changes: 4 additions & 0 deletions src/i18n/es.json
Original file line number Diff line number Diff line change
@@ -81,6 +81,9 @@
"title": "Inputs",
"upload": "SUBIR"
},
"mediumEditor": {
"title": "Medium Editor"
},
"selects": {
"country": "País Select",
"countryMulti": "País Multi Select",
@@ -126,6 +129,7 @@
"formElements": "Elementos de un Formulario",
"forms": "Formularios",
"formWizards": "Asistente para Formularios",
"mediumEditor": "Medium Editor",
"grid": "Grid",
"icons": "Iconos",
"login": "Iniciar sesión",
90 changes: 90 additions & 0 deletions src/sass/_override-custom-libs.scss
Original file line number Diff line number Diff line change
@@ -75,3 +75,93 @@
}
}
}

//Medium Editor
.medium-editor-toolbar,
.medium-editor-toolbar-form,
.medium-editor-toolbar-actions,
.medium-editor-toolbar-anchor-preview {
background-color: $brand-primary;
border-radius: $btn-border-radius;
box-shadow: $btn-box-shadow;
}

.medium-editor-toolbar {
max-width: 80%;
box-shadow: none;
.medium-editor-toolbar-actions {
overflow: hidden;
}

.medium-editor-action {
@extend .btn.btn-primary;
height: $medium-editor-button-size;
padding: $btn-padding-y $btn-group-button-padding-x;
box-shadow: none;
border-radius: 0;

&.medium-editor-button-active {
background-color: darken($brand-primary, 15%);
}
}
}

.medium-editor-toolbar-form {
color: $white;
overflow: hidden;

.medium-editor-toolbar-input {
height: $medium-editor-button-size;
background: $brand-primary;
box-sizing: border-box;
color: $white;
padding-left: 16px;
width: 220px;

&::-webkit-input-placeholder {
color: rgba($white, .8);
}
&:-moz-placeholder { /* Firefox 18- */
color: rgba($white, .8);
}
&::-moz-placeholder { /* Firefox 19+ */
color: rgba($white, .8);
}
&:-ms-input-placeholder {
color: rgba($white, .8);
}
}

a {
color: $white;
transform: translateY(2px);
}

.medium-editor-toolbar-close {
margin-right: 16px;
}
}

.medium-toolbar-arrow-under:after {
border-color: $brand-primary transparent transparent transparent;
top: $medium-editor-button-size;
}

.medium-toolbar-arrow-over:before {
border-color: transparent transparent $brand-primary transparent;
}

.medium-editor-toolbar-anchor-preview {
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
.medium-editor-toolbar-anchor-preview {
margin: 0;
}
}

.medium-editor-anchor-preview {
max-width: 50%;
a {
color: $white;
text-decoration: none;
}
}
3 changes: 3 additions & 0 deletions src/sass/_variables.scss
Original file line number Diff line number Diff line change
@@ -337,3 +337,6 @@ $tab-content-pb: 1.5rem;
//PreLoader
$vuestic-preloader-left: calc(50% - 140px/2);
$vuestic-preloader-top: calc(50% - 104px/2);

//Medium Editor
$medium-editor-button-size: $btn-padding-y * 2 + $font-size-base * $btn-line-height;
3 changes: 2 additions & 1 deletion src/sass/main.scss
Original file line number Diff line number Diff line change
@@ -9,14 +9,15 @@

@import "~ionicons/dist/css/ionicons.css";
@import "~awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss";
@import "~medium-editor/src/sass/medium-editor";
@import "_icons-styles.scss";

@import "base";
@import "typography";
@import "icons";
@import "material-forms";

@import "override-custom-libs";
@import "override-bootstrap";
@import "override-custom-libs";

@import "glyphicons";
10 changes: 9 additions & 1 deletion src/store/modules/menu/forms.js
Original file line number Diff line number Diff line change
@@ -17,12 +17,20 @@ export default {
}
},
{
name: 'Form Wizards',
name: 'FormWizards',
path: '/forms/form-wizard',
component: lazyLoading('forms/form-wizard/FormWizard'),
meta: {
title: 'menu.formWizards'
}
},
{
name: 'MediumEditor',
path: '/forms/medium-editor',
component: lazyLoading('forms/medium-editor/MediumEditor'),
meta: {
title: 'Medium Editor'
}
}
]
}

0 comments on commit 0adbcab

Please sign in to comment.