Skip to content

Commit

Permalink
修复ImageParser中CSS命名污染的问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@liyumeng
liyumeng committed May 4, 2016
1 parent 6651c05 commit 3d21aaa
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 151 deletions.
219 changes: 90 additions & 129 deletions css/image-parser.css
View file
@@ -1,134 +1,95 @@

.my-alert-box{
position:fixed;
z-index:1000;
top:50px;
left:10px;
}
.alert {
padding:15px;
margin-bottom:20px;
border:1px solid transparent;
border-radius:4px
}
.alert h4 {
margin-top:0;
color:inherit
}
.alert .alert-link {
font-weight:700
}
.alert > p, .alert > ul {
margin-bottom:0
}
.alert > p + p {
margin-top:5px
}
.alert-dismissable, .alert-dismissible {
padding-right:35px
}
.alert-dismissable .close, .alert-dismissible .close {
position:relative;
top:-2px;
right:-21px;
color:inherit
}
.alert-success {
color:#3c763d;
background-color :#dff0d8;
border-color:#d6e9c6
}
.alert-success hr {
border-top-color:#c9e2b3
}
.alert-success .alert-link {
color:#2b542c
}
.alert-info {
color:#31708f;
background-color:#d9edf7;
border-color:#bce8f1
}
.alert-info hr {
border-top-color:#a6e1ec
}
.alert-info.alert-link {
color:#245269
}
.alert-warning {
color:#8a6d3b;
background-color:#fcf8e3;
border-color:#faebcc
}
.alert-warning hr {
border-top-color:#f7e1b5
}
.alert-warning.alert-link {
color:#66512c
}
.alert-danger {
color:#a94442;
background-color:#f2dede;
border-color:#ebccd1
}
.alert-danger hr {
border-top-color:#e4b9c0
.my-img-parser .imgp-alert-box {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
position: fixed;
z-index: 1000;
top: 50px;
left: 10px;
padding-right: 35px;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
opacity: 1;
}
.alert-danger.alert-link {
color:#843534
}
.fade {
opacity:0;
-webkit-transition:opacity .15s linear;
-o-transition:opacity .15s linear;
transition:opacity .15s linear
}
.fade.in {
opacity:1
}
button.close {
-webkit-appearance : none;
padding : 0;
cursor : pointer;
background : 0 0;
border : 0
}
.close {
float : right;
font-size : 21px;
font-weight : 700;
line-height : 1;
color : # 000;
text-shadow : 0 1px 0 # fff;
filter : alpha(opacity=20);
opacity : .2
}
.close:hover, .close:focus {
color : # 000;
text-decoration : none;
cursor : pointer;
filter : alpha(opacity=50);
opacity : .5
}
button, input, optgroup, select, textarea {
margin : 0;
font : inherit;
color : inherit
}
button {
overflow : visible

.my-img-parser .imgp-alert-box .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}

.my-img-parser .imgp-alert-box .close:hover,
.my-img-parser .imgp-alert-box .close:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}

.my-img-parser .imgp-alert-box.imgp-alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}

.my-img-parser .imgp-alert-box.imgp-alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}


.my-img-parser button,
.my-img-parser input,
.my-img-parser optgroup,
.my-img-parser select,
.my-img-parser textarea {
margin: 0;
font: inherit;
color: inherit;
}
button, select {
text-transform : none

.my-img-parser button {
overflow: visible;
}
button, html input[type=button], input[type=reset], input[type=submit]{
-webkit-appearance : button;
cursor : pointer

.my-img-parser button,
.my-img-parser select {
text-transform: none;
}
button[disabled], html input[disabled]{
cursor : default

.my-img-parser button,
.my-img-parser html input[type=button],
.my-img-parser input[type=reset],
.my-img-parser input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
}
button::-moz-focus-inner, input::-moz-focus-inner {
padding : 0;
border : 0
}

.my-img-parser button[disabled],
.my-img-parser html input[disabled] {
cursor: default;
}

.my-img-parser button::-moz-focus-inner,
.my-img-parser input::-moz-focus-inner {
padding: 0;
border: 0;
}
46 changes: 25 additions & 21 deletions js/image-parser.js
View file
@@ -1,4 +1,4 @@
/*
/*
用于实现通用的在网站编辑器中粘贴markdown图片的功能
*/
var ImagePaster = function () {
Expand All @@ -17,42 +17,46 @@ var ImagePaster = function () {
//上传图片过程中的提示框，使用bootstrap样式
me.WarningBoxTpl = heredoc(function () {
/*
<div class="alert alert-warning alert-dismissible fade in my-alert-box" role="alert" style="">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true" style="margin-right:5px;">&times;</span>
</button>
<span>
正在上传图片......
</span>
</div>
<div class="my-img-parser">
<div class="alert imgp-alert-box imgp-alert-warning" role="alert" style="">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true" style="margin-right:5px;">&times;</span>
</button>
<span>
正在上传图片......
</span>
</div>
</div>
*/
});

//图片上传成功的提示框
me.SuccessBoxTpl = heredoc(function () {
/*
<div class="alert alert-success alert-dismissible fade in my-alert-box" role="alert" style="">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true" style="margin-right:5px;">&times;</span>
</button>
<span>
图片上传成功，如果未自动粘贴请再次按Ctrl+V完成图片粘贴。
</span>
</div>
<div class="my-img-parser">
<div class="alert imgp-alert-box imgp-alert-success" role="alert" style="">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true" style="margin-right:5px;">&times;</span>
</button>
<span>
图片上传成功，如果未自动粘贴请再次按Ctrl+V完成图片粘贴。
</span>
</div>
<div>
*/
});

//弹出图片正在上传的提示
me.ShowUploading = function () {
//关闭其他提示窗口
$('.my-alert-box').alert('close');
$('.imgp-alert-box').alert('close');
$('body').prepend(me.WarningBoxTpl);
}

//弹出图片上传成功的提示
me.ShowUploaded = function () {
//关闭其他提示窗口
$('.my-alert-box').alert('close');
$('.imgp-alert-box').alert('close');
$('body').prepend(me.SuccessBoxTpl);
}

Expand Down Expand Up @@ -120,7 +124,7 @@ var ImagePaster = function () {
me.ShowUploaded();
} else {

$('.my-alert-box').alert('close'); //关闭其他提示窗口
$('.imgp-alert-box').alert('close'); //关闭其他提示窗口
swal({
title : '图片上传失败，请先登录微博',
text : '请不要屏蔽弹出窗口',
Expand All @@ -137,7 +141,7 @@ var ImagePaster = function () {
if (me.ImgUrlBuffer != null) {
me.ImgUrlBuffer = null;
isAutoPasting=false;
$('.my-alert-box').alert('close'); //关闭其他提示窗口
$('.imgp-alert-box').alert('close'); //关闭其他提示窗口
}
}

Expand Down
2 changes: 1 addition & 1 deletion manifest.json
View file
Expand Up @@ -3,7 +3,7 @@
"name": "新浪微博图床",
"short_name": "新浪微博图床",
"description": "简单好用的新浪微博图床,支持选择/拖拽/粘贴上传图片,并生成图片地址,HTML,UBB和Markdown等格式,支持浏览和删除历史记录",
"version": "1.9",
"version": "1.91",
"icons": {
"16": "icon.png",
"48": "icon.png",
Expand Down

0 comments on commit 3d21aaa

Please sign in to comment.